From 45572c031ed463a66d2eac202f1ca259a5034e44 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Tue, 7 Oct 2025 15:07:18 +0200
Subject: [PATCH 001/102] Add custom token related pages

---
 src/components/TokenCard.vue             | 174 +++++
 src/components/navigation/AppSidebar.vue |  15 +-
 src/pages/finances/account-balances.vue  | 782 +++++++++++++++++++++++
 src/pages/finances/create-token.vue      | 586 +++++++++++++++++
 src/pages/finances/token-definitions.vue | 280 ++++++++
 src/stores/wax.store.ts                  |  91 ++-
 src/utils/nai-tokens.ts                  | 349 ++++++++++
 src/utils/router.ts                      |   6 +
 8 files changed, 2275 insertions(+), 8 deletions(-)
 create mode 100644 src/components/TokenCard.vue
 create mode 100644 src/pages/finances/account-balances.vue
 create mode 100644 src/pages/finances/create-token.vue
 create mode 100644 src/pages/finances/token-definitions.vue
 create mode 100644 src/utils/nai-tokens.ts

diff --git a/src/components/TokenCard.vue b/src/components/TokenCard.vue
new file mode 100644
index 0000000..b9c3c3b
--- /dev/null
+++ b/src/components/TokenCard.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import {
+  mdiContentCopy,
+  mdiEye,
+  mdiStar
+} from '@mdi/js';
+import { toast } from 'vue-sonner';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { copyText } from '@/utils/copy';
+
+interface TokenDefinition {
+  nai: string;
+  name: string;
+  symbol: string;
+  description?: string;
+  can_stake: boolean;
+  initial_supply: string;
+  precision: number;
+  created_at: string;
+  active: boolean;
+}
+
+interface Props {
+  token: TokenDefinition;
+}
+
+defineProps<Props>();
+
+// Copy NAI to clipboard
+const copyNAI = async (nai: string) => {
+  try {
+    copyText(nai);
+    toast.success('NAI copied to clipboard');
+  } catch (_error) {
+    toast.error('Failed to copy NAI');
+  }
+};
+
+// Format date
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+};
+
+// Format number with commas
+const formatNumber = (value: string) => {
+  const num = parseInt(value);
+  return isNaN(num) ? value : num.toLocaleString();
+};
+</script>
+
+<template>
+  <Card class="hover:shadow-md transition-shadow">
+    <CardHeader>
+      <div class="flex items-start justify-between">
+        <div class="space-y-1 flex-1">
+          <CardTitle class="text-lg">
+            {{ token.name }}
+          </CardTitle>
+          <CardDescription>
+            {{ token.symbol }}
+          </CardDescription>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <span
+            v-if="token.can_stake"
+            class="inline-flex items-center rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground"
+          >
+            <svg
+              width="12"
+              height="12"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-1"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiStar"
+              />
+            </svg>
+            Stakeable
+          </span>
+        </div>
+      </div>
+    </CardHeader>
+
+    <CardContent class="space-y-4">
+      <!-- Description -->
+      <p class="text-sm text-muted-foreground line-clamp-2">
+        {{ token.description || 'No description provided' }}
+      </p>
+
+      <!-- NAI -->
+      <div class="space-y-2">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium text-muted-foreground">NAI</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            class="h-6 px-2"
+            @click="copyNAI(token.nai)"
+          >
+            <svg
+              width="12"
+              height="12"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiContentCopy"
+              />
+            </svg>
+          </Button>
+        </div>
+        <div class="font-mono text-sm bg-muted rounded px-2 py-1">
+          {{ token.nai }}
+        </div>
+      </div>
+
+      <!-- Token Details -->
+      <div class="grid grid-cols-2 gap-4 text-sm">
+        <div>
+          <span class="text-muted-foreground">Supply:</span>
+          <div class="font-medium">
+            {{ formatNumber(token.initial_supply) }}
+          </div>
+        </div>
+        <div>
+          <span class="text-muted-foreground">Precision:</span>
+          <div class="font-medium">
+            {{ token.precision }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Created Date -->
+      <div class="text-xs text-muted-foreground">
+        Created {{ formatDate(token.created_at) }}
+      </div>
+
+      <!-- Actions -->
+      <div class="flex gap-2 pt-2">
+        <Button
+          variant="outline"
+          size="sm"
+          class="flex-1"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mr-1"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiEye"
+            />
+          </svg>
+          View Details
+        </Button>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/components/navigation/AppSidebar.vue b/src/components/navigation/AppSidebar.vue
index 48e30d8..63cce00 100644
--- a/src/components/navigation/AppSidebar.vue
+++ b/src/components/navigation/AppSidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { mdiHomeOutline, mdiMessageLockOutline, mdiFileSign, mdiAccountPlusOutline, mdiAccountArrowUpOutline, mdiAccountReactivateOutline, mdiSendOutline, mdiSwapHorizontal, mdiLink } from '@mdi/js';
+import { mdiHomeOutline, mdiMessageLockOutline, mdiFileSign, mdiAccountPlusOutline, mdiAccountArrowUpOutline, mdiAccountReactivateOutline, mdiSendOutline, mdiLink, mdiWallet, mdiViewList } from '@mdi/js';
 import { computed, onMounted, ref, type Ref } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -47,17 +47,20 @@ const groups: { title: string; items: Array<{ title: string; url: string; icon:
 }, {
   title: 'Finances',
   items: [
+    {
+      title: 'Account Balances',
+      url: '/finances/account-balances',
+      icon: mdiWallet
+    },
     {
       title: 'Send transfer',
       url: '/finances/transfer',
       icon: mdiSendOutline
     },
     {
-      title: 'Tokens',
-      badge: 'soon',
-      url: '/finances/swap',
-      icon: mdiSwapHorizontal,
-      disabled: ref(true)
+      title: 'My Token Definitions',
+      url: '/finances/token-definitions',
+      icon: mdiViewList
     }
   ]
 }, {
diff --git a/src/pages/finances/account-balances.vue b/src/pages/finances/account-balances.vue
new file mode 100644
index 0000000..3c41948
--- /dev/null
+++ b/src/pages/finances/account-balances.vue
@@ -0,0 +1,782 @@
+<script setup lang="ts">
+import {
+  mdiCurrencyUsd,
+  mdiRefresh,
+  mdiSend,
+  mdiAccount,
+  mdiLock,
+  mdiLockOpen,
+  mdiWater
+} from '@mdi/js';
+import { computed, onMounted, ref } from 'vue';
+import { toast } from 'vue-sonner';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useSettingsStore } from '@/stores/settings.store';
+import { getAccountBalances, transferNAIToken, stakeNAIToken, formatTokenAmount } from '@/utils/nai-tokens';
+import { toastError } from '@/utils/parse-error';
+
+const settingsStore = useSettingsStore();
+
+interface TokenBalance {
+  symbol: string;
+  name: string;
+  nai: string;
+  liquid_balance: string;
+  staked_balance: string;
+  total_balance: string;
+  precision: number;
+  logo_url?: string;
+}
+
+// State
+const balances = ref<TokenBalance[]>([]);
+const isLoading = ref(false);
+const searchQuery = ref('');
+
+// Transfer dialog state
+const isTransferDialogOpen = ref(false);
+const transferAmount = ref('');
+const transferRecipient = ref('');
+const selectedTokenForTransfer = ref<TokenBalance | null>(null);
+const isTransferLoading = ref(false);
+
+// Transform dialog state
+const isTransformDialogOpen = ref(false);
+const transformAmount = ref('');
+const transformDirection = ref<'liquid-to-staked' | 'staked-to-liquid'>('liquid-to-staked');
+const selectedToken = ref<TokenBalance | null>(null);
+const isTransformLoading = ref(false);
+
+// Computed
+const filteredBalances = computed(() => {
+  if (!searchQuery.value) return balances.value;
+
+  return balances.value.filter(balance =>
+    balance.symbol.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+    balance.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+    balance.nai.includes(searchQuery.value)
+  );
+});
+
+const totalValue = computed(() => {
+  // Mock calculation - in real app this would use current token prices
+  return balances.value.reduce((sum, balance) => {
+    const totalBalance = parseFloat(balance.total_balance);
+    return sum + (totalBalance * 0.01); // Mock price of $0.01 per token
+  }, 0);
+});
+
+// Methods
+const loadAccountBalances = async () => {
+  try {
+    isLoading.value = true;
+
+    const account = settingsStore.settings.account;
+    if (!account) {
+      toast.error('No account connected');
+      return;
+    }
+
+    const accountBalances = await getAccountBalances(account);
+
+    // Transform to match our interface
+    balances.value = accountBalances.map(balance => ({
+      ...balance,
+      total_balance: formatTokenAmount(
+        parseFloat(balance.liquid_balance) + parseFloat(balance.staked_balance),
+        balance.precision
+      )
+    }));
+
+    toast.success('Account balances loaded successfully');
+  } catch (error) {
+    toastError('Failed to load account balances', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const openTransferDialog = (balance: TokenBalance) => {
+  selectedTokenForTransfer.value = balance;
+  transferAmount.value = '';
+  transferRecipient.value = '';
+  isTransferDialogOpen.value = true;
+};
+
+const transferTokens = async () => {
+  if (!selectedTokenForTransfer.value || !transferAmount.value || !transferRecipient.value) {
+    toast.error('Please fill in all fields');
+    return;
+  }
+
+  try {
+    isTransferLoading.value = true;
+
+    await transferNAIToken({
+      to: transferRecipient.value,
+      amount: transferAmount.value,
+      symbol: selectedTokenForTransfer.value.symbol
+    });
+
+    toast.success(`Successfully transferred ${transferAmount.value} ${selectedTokenForTransfer.value.symbol} to ${transferRecipient.value}`);
+
+    // Refresh balances
+    await loadAccountBalances();
+
+    isTransferDialogOpen.value = false;
+  } catch (error) {
+    toastError('Failed to transfer tokens', error);
+  } finally {
+    isTransferLoading.value = false;
+  }
+};
+
+const openTransformDialog = (balance: TokenBalance, direction: 'liquid-to-staked' | 'staked-to-liquid') => {
+  selectedToken.value = balance;
+  transformDirection.value = direction;
+  transformAmount.value = '';
+  isTransformDialogOpen.value = true;
+};
+
+const transformTokens = async () => {
+  if (!selectedToken.value || !transformAmount.value) {
+    toast.error('Please enter an amount');
+    return;
+  }
+
+  try {
+    isTransformLoading.value = true;
+
+    await stakeNAIToken({
+      amount: transformAmount.value,
+      symbol: selectedToken.value.symbol,
+      direction: transformDirection.value === 'liquid-to-staked' ? 'stake' : 'unstake'
+    });
+
+    const action = transformDirection.value === 'liquid-to-staked' ? 'staked' : 'unstaked';
+    toast.success(`Successfully ${action} ${transformAmount.value} ${selectedToken.value.symbol}`);
+
+    // Refresh balances
+    await loadAccountBalances();
+
+    isTransformDialogOpen.value = false;
+  } catch (error) {
+    toastError('Failed to transform tokens', error);
+  } finally {
+    isTransformLoading.value = false;
+  }
+};
+const getMaxTransferAmount = (balance: TokenBalance) => {
+  return parseFloat(balance.liquid_balance);
+};
+
+const getMaxTransformAmount = (balance: TokenBalance, direction: 'liquid-to-staked' | 'staked-to-liquid') => {
+  return direction === 'liquid-to-staked'
+    ? parseFloat(balance.liquid_balance)
+    : parseFloat(balance.staked_balance);
+};
+
+// Initialize
+onMounted(() => {
+  loadAccountBalances();
+});
+</script>
+
+<template>
+  <div class="container mx-auto py-6 space-y-6">
+    <!-- Header -->
+    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+      <div>
+        <h1 class="text-3xl font-bold tracking-tight">
+          Account Balances
+        </h1>
+        <p class="text-muted-foreground">
+          Manage your custom token balances, transfers, and staking on Hive Token Machine
+        </p>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <Button
+          variant="outline"
+          :disabled="isLoading"
+          @click="loadAccountBalances"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mr-2"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiRefresh"
+            />
+          </svg>
+          Refresh
+        </Button>
+      </div>
+    </div>
+
+    <!-- Summary Cards -->
+    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <Card>
+        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle class="text-sm font-medium">
+            Total Portfolio Value
+          </CardTitle>
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="text-muted-foreground"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiCurrencyUsd"
+            />
+          </svg>
+        </CardHeader>
+        <CardContent>
+          <div class="text-2xl font-bold">
+            ${{ totalValue.toFixed(2) }}
+          </div>
+          <p class="text-xs text-muted-foreground">
+            +2.1% from last month
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle class="text-sm font-medium">
+            Total Tokens
+          </CardTitle>
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="text-muted-foreground"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiAccount"
+            />
+          </svg>
+        </CardHeader>
+        <CardContent>
+          <div class="text-2xl font-bold">
+            {{ balances.length }}
+          </div>
+          <p class="text-xs text-muted-foreground">
+            Different token types
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle class="text-sm font-medium">
+            Liquid Balance
+          </CardTitle>
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="text-muted-foreground"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiWater"
+            />
+          </svg>
+        </CardHeader>
+        <CardContent>
+          <div class="text-2xl font-bold">
+            {{ balances.reduce((sum, b) => sum + parseFloat(b.liquid_balance), 0).toFixed(3) }}
+          </div>
+          <p class="text-xs text-muted-foreground">
+            Available for transfer
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle class="text-sm font-medium">
+            Staked Balance
+          </CardTitle>
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="text-muted-foreground"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiLock"
+            />
+          </svg>
+        </CardHeader>
+        <CardContent>
+          <div class="text-2xl font-bold">
+            {{ balances.reduce((sum, b) => sum + parseFloat(b.staked_balance), 0).toFixed(3) }}
+          </div>
+          <p class="text-xs text-muted-foreground">
+            Earning rewards
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- Search -->
+    <div class="flex items-center gap-4">
+      <div class="flex-1">
+        <Input
+          v-model="searchQuery"
+          placeholder="Search tokens by symbol, name, or NAI..."
+          class="max-w-sm"
+        />
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div
+      v-if="isLoading"
+      class="space-y-4"
+    >
+      <Card
+        v-for="i in 3"
+        :key="i"
+      >
+        <CardHeader>
+          <div class="flex items-center justify-between">
+            <div class="space-y-2">
+              <Skeleton class="h-4 w-[250px]" />
+              <Skeleton class="h-3 w-[200px]" />
+            </div>
+            <Skeleton class="h-8 w-8 rounded-full" />
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div class="grid grid-cols-3 gap-4">
+            <div class="space-y-2">
+              <Skeleton class="h-3 w-[100px]" />
+              <Skeleton class="h-6 w-[80px]" />
+            </div>
+            <div class="space-y-2">
+              <Skeleton class="h-3 w-[100px]" />
+              <Skeleton class="h-6 w-[80px]" />
+            </div>
+            <div class="space-y-2">
+              <Skeleton class="h-3 w-[100px]" />
+              <Skeleton class="h-6 w-[80px]" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- Balances Table -->
+    <div
+      v-else-if="filteredBalances.length > 0"
+      class="space-y-4"
+    >
+      <Card>
+        <CardContent class="p-0">
+          <div class="overflow-x-auto">
+            <table class="w-full">
+              <thead class="border-b">
+                <tr class="hover:bg-muted/50">
+                  <th class="text-left p-4 font-medium text-muted-foreground">
+                    Asset
+                  </th>
+                  <th class="text-right p-4 font-medium text-muted-foreground">
+                    Price
+                  </th>
+                  <th class="text-right p-4 font-medium text-muted-foreground">
+                    Liquid
+                  </th>
+                  <th class="text-right p-4 font-medium text-muted-foreground">
+                    Staked
+                  </th>
+                  <th class="text-right p-4 font-medium text-muted-foreground">
+                    Total
+                  </th>
+                  <th class="text-right p-4 font-medium text-muted-foreground">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="balance in filteredBalances"
+                  :key="balance.nai"
+                  class="border-b hover:bg-muted/50 transition-colors"
+                >
+                  <!-- Asset Info -->
+                  <td class="p-4">
+                    <div class="flex items-center gap-3">
+                      <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+                        <img
+                          v-if="balance.logo_url"
+                          :src="balance.logo_url"
+                          :alt="balance.symbol"
+                          class="h-6 w-6 rounded-full"
+                        >
+                        <span
+                          v-else
+                          class="text-sm font-medium text-primary"
+                        >
+                          {{ balance.symbol.charAt(0) }}
+                        </span>
+                      </div>
+                      <div>
+                        <div class="font-semibold">
+                          {{ balance.symbol }}
+                        </div>
+                        <div class="text-sm text-muted-foreground">
+                          {{ balance.name }}
+                        </div>
+                        <div class="text-xs text-muted-foreground font-mono">
+                          {{ balance.nai }}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+
+                  <!-- Price -->
+                  <td class="p-4 text-right">
+                    <div class="font-medium">
+                      $0.01
+                    </div>
+                    <div class="text-sm text-green-600">
+                      +0.00%
+                    </div>
+                  </td>
+
+                  <!-- Liquid Balance -->
+                  <td class="p-4 text-right">
+                    <div class="font-medium">
+                      {{ balance.liquid_balance }}
+                    </div>
+                    <div class="text-sm text-muted-foreground">
+                      ${{ (parseFloat(balance.liquid_balance) * 0.01).toFixed(2) }}
+                    </div>
+                  </td>
+
+                  <!-- Staked Balance -->
+                  <td class="p-4 text-right">
+                    <div class="font-medium">
+                      {{ balance.staked_balance }}
+                    </div>
+                    <div class="text-sm text-muted-foreground">
+                      ${{ (parseFloat(balance.staked_balance) * 0.01).toFixed(2) }}
+                    </div>
+                  </td>
+
+                  <!-- Total Balance -->
+                  <td class="p-4 text-right">
+                    <div class="font-medium">
+                      {{ balance.total_balance }}
+                    </div>
+                    <div class="text-sm text-muted-foreground">
+                      ${{ (parseFloat(balance.total_balance) * 0.01).toFixed(2) }}
+                    </div>
+                  </td>
+
+                  <!-- Actions -->
+                  <td class="p-4">
+                    <div class="flex justify-end gap-1">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        :disabled="parseFloat(balance.liquid_balance) === 0"
+                        title="Transfer tokens"
+                        @click="openTransferDialog(balance)"
+                      >
+                        <svg
+                          width="14"
+                          height="14"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            style="fill: currentColor"
+                            :d="mdiSend"
+                          />
+                        </svg>
+                      </Button>
+
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        :disabled="parseFloat(balance.liquid_balance) === 0"
+                        title="Stake tokens"
+                        @click="openTransformDialog(balance, 'liquid-to-staked')"
+                      >
+                        <svg
+                          width="14"
+                          height="14"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            style="fill: currentColor"
+                            :d="mdiLock"
+                          />
+                        </svg>
+                      </Button>
+
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        :disabled="parseFloat(balance.staked_balance) === 0"
+                        title="Unstake tokens"
+                        @click="openTransformDialog(balance, 'staked-to-liquid')"
+                      >
+                        <svg
+                          width="14"
+                          height="14"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            style="fill: currentColor"
+                            :d="mdiLockOpen"
+                          />
+                        </svg>
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- Empty State -->
+    <div
+      v-else
+      class="text-center py-12"
+    >
+      <svg
+        width="48"
+        height="48"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="mx-auto text-muted-foreground mb-4"
+      >
+        <path
+          style="fill: currentColor"
+          :d="mdiAccount"
+        />
+      </svg>
+      <h3 class="text-lg font-semibold mb-2">
+        No token balances found
+      </h3>
+      <p class="text-muted-foreground mb-4">
+        {{ searchQuery ? 'No tokens match your search criteria' : 'You don\'t have any token balances yet' }}
+      </p>
+      <Button
+        v-if="!searchQuery"
+        @click="loadAccountBalances"
+      >
+        <svg
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="mr-2"
+        >
+          <path
+            style="fill: currentColor"
+            :d="mdiRefresh"
+          />
+        </svg>
+        Refresh Balances
+      </Button>
+    </div>
+
+    <!-- Transfer Dialog -->
+    <Dialog v-model:open="isTransferDialogOpen">
+      <DialogContent class="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Transfer {{ selectedTokenForTransfer?.symbol }}</DialogTitle>
+          <DialogDescription>
+            Send tokens to another account. Available balance: {{ selectedTokenForTransfer?.liquid_balance }} {{ selectedTokenForTransfer?.symbol }}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div class="grid gap-4 py-4">
+          <div class="grid gap-2">
+            <Label for="recipient">Recipient Account</Label>
+            <Input
+              id="recipient"
+              v-model="transferRecipient"
+              placeholder="Enter account name"
+            />
+          </div>
+
+          <div class="grid gap-2">
+            <Label for="amount">Amount</Label>
+            <div class="flex gap-2">
+              <Input
+                id="amount"
+                v-model="transferAmount"
+                type="number"
+                :step="1 / Math.pow(10, selectedTokenForTransfer?.precision || 3)"
+                :max="getMaxTransferAmount(selectedTokenForTransfer!)"
+                placeholder="0.000"
+              />
+              <Button
+                variant="outline"
+                @click="transferAmount = selectedTokenForTransfer?.liquid_balance || ''"
+              >
+                Max
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-2">
+          <Button
+            variant="outline"
+            @click="isTransferDialogOpen = false"
+          >
+            Cancel
+          </Button>
+          <Button
+            :disabled="isTransferLoading || !transferAmount || !transferRecipient"
+            @click="transferTokens"
+          >
+            <svg
+              v-if="isTransferLoading"
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-2 animate-spin"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiRefresh"
+              />
+            </svg>
+            <svg
+              v-else
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-2"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiSend"
+              />
+            </svg>
+            {{ isTransferLoading ? 'Transferring...' : 'Transfer' }}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+
+    <!-- Transform Dialog -->
+    <Dialog v-model:open="isTransformDialogOpen">
+      <DialogContent class="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>
+            {{ transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake' }} {{ selectedToken?.symbol }}
+          </DialogTitle>
+          <DialogDescription>
+            {{ transformDirection === 'liquid-to-staked'
+              ? `Stake tokens to earn rewards. Available: ${selectedToken?.liquid_balance} ${selectedToken?.symbol}`
+              : `Unstake tokens to make them liquid. Available: ${selectedToken?.staked_balance} ${selectedToken?.symbol}`
+            }}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div class="grid gap-4 py-4">
+          <div class="grid gap-2">
+            <Label for="transformAmount">Amount</Label>
+            <div class="flex gap-2">
+              <Input
+                id="transformAmount"
+                v-model="transformAmount"
+                type="number"
+                :step="1 / Math.pow(10, selectedToken?.precision || 3)"
+                :max="getMaxTransformAmount(selectedToken!, transformDirection)"
+                placeholder="0.000"
+              />
+              <Button
+                variant="outline"
+                @click="transformAmount = (transformDirection === 'liquid-to-staked'
+                  ? selectedToken?.liquid_balance
+                  : selectedToken?.staked_balance) || ''"
+              >
+                Max
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-2">
+          <Button
+            variant="outline"
+            @click="isTransformDialogOpen = false"
+          >
+            Cancel
+          </Button>
+          <Button
+            :disabled="isTransformLoading || !transformAmount"
+            @click="transformTokens"
+          >
+            <svg
+              v-if="isTransformLoading"
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-2 animate-spin"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiRefresh"
+              />
+            </svg>
+            <svg
+              v-else
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-2"
+            >
+              <path
+                style="fill: currentColor"
+                :d="transformDirection === 'liquid-to-staked' ? mdiLock : mdiLockOpen"
+              />
+            </svg>
+            {{ isTransformLoading
+              ? (transformDirection === 'liquid-to-staked' ? 'Staking...' : 'Unstaking...')
+              : (transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake')
+            }}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>
diff --git a/src/pages/finances/create-token.vue b/src/pages/finances/create-token.vue
new file mode 100644
index 0000000..7f0125b
--- /dev/null
+++ b/src/pages/finances/create-token.vue
@@ -0,0 +1,586 @@
+<script setup lang="ts">
+import {
+  mdiCurrencyUsd,
+  mdiRefresh,
+  mdiContentCopy,
+  mdiCheck,
+  mdiAlert,
+  mdiRocket,
+  mdiLoading
+} from '@mdi/js';
+import { computed, ref, watch } from 'vue';
+import { toast } from 'vue-sonner';
+
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { Textarea } from '@/components/ui/textarea';
+import { useWalletStore } from '@/stores/wallet.store';
+import { copyText } from '@/utils/copy';
+import { createNAIToken, generateNAI as generateNAIUtil, type TokenCreationParams } from '@/utils/nai-tokens';
+import { toastError } from '@/utils/parse-error';
+
+const walletStore = useWalletStore();
+
+const hasWallet = computed(() => walletStore.hasWallet);
+
+// Form state
+const tokenName = ref('');
+const tokenSymbol = ref('');
+const tokenDescription = ref('');
+const initialSupply = ref('1000000');
+const precision = ref('3');
+const canStake = ref(false);
+const agreedToDisclaimer = ref(false);
+
+// Loading states
+const isCreatingToken = ref(false);
+
+// Generated token ID
+const generatedNAI = ref('');
+const naiGenerated = ref(false);
+
+// Symbol validation state
+const symbolValidation = computed(() => {
+  const symbol = tokenSymbol.value.trim();
+  if (symbol.length === 0)
+    return { isValid: false, message: '' };
+  if (symbol.length < 3)
+    return { isValid: false, message: 'Symbol must be at least 3 characters' };
+  if (symbol.length > 10)
+    return { isValid: false, message: 'Symbol must be 10 characters or less' };
+  if (!/^[A-Z]+$/.test(symbol))
+    return { isValid: false, message: 'Symbol must contain only letters' };
+  return { isValid: true, message: 'Valid symbol' };
+});
+
+// Computed property to show NAI status
+const naiDisplayValue = computed(() => {
+  if (generatedNAI.value)
+    return generatedNAI.value;
+  if (tokenSymbol.value.trim().length >= 3)
+    return 'Generating...';
+  return '';
+});
+
+const shouldShowNAIField = computed(() => {
+  return symbolValidation.value.isValid;
+});
+
+// Validation
+const isFormValid = computed(() => {
+  return tokenName.value.trim() !== '' &&
+         symbolValidation.value.isValid &&
+         initialSupply.value.trim() !== '' &&
+         parseInt(initialSupply.value) > 0 &&
+         parseInt(precision.value) >= 0 &&
+         parseInt(precision.value) <= 12 &&
+         agreedToDisclaimer.value;
+});
+
+// Add a computed property for button text and state
+const createButtonState = computed(() => {
+  if (isCreatingToken.value)
+    return { text: 'Creating Token...', disabled: true };
+  if (!isFormValid.value)
+    return { text: 'Create Token', disabled: true };
+  if (!generatedNAI.value && symbolValidation.value.isValid)
+    return { text: 'Generate NAI & Create Token', disabled: false };
+  return { text: 'Create Token', disabled: false };
+});
+
+// Debounced token ID generation
+let debounceTimer: NodeJS.Timeout | null = null;
+
+// Auto-generate token ID when symbol changes (debounced)
+watch(tokenSymbol, (newSymbol) => {
+  // Clear previous timer
+  if (debounceTimer)
+    clearTimeout(debounceTimer);
+
+  // Reset state immediately when symbol is invalid
+  if (newSymbol.trim().length < 3 || !/^[A-Z]+$/i.test(newSymbol.trim())) {
+    generatedNAI.value = '';
+    naiGenerated.value = false;
+    return;
+  }
+
+  // Debounce the generation to avoid excessive calls
+  debounceTimer = setTimeout(() => {
+    if (symbolValidation.value.isValid)
+      generateNAI();
+  }, 300); // Wait 300ms after user stops typing
+});
+
+// Generate unique token ID
+const generateNAI = () => {
+  if (!symbolValidation.value.isValid)
+    return;
+
+  try {
+    generatedNAI.value = generateNAIUtil(tokenSymbol.value.trim());
+    naiGenerated.value = true;
+    toast.success('Token ID generated successfully!');
+  } catch (error) {
+    toastError('Failed to generate token ID', error);
+  }
+};
+
+const regenerateNAI = () => {
+  naiGenerated.value = false;
+  generatedNAI.value = '';
+  generateNAI();
+};
+
+// Copy NAI to clipboard
+const copyNAI = async () => {
+  try {
+    copyText(generatedNAI.value);
+    toast.success('NAI copied to clipboard!');
+  } catch (_error) {
+    toast.error('Failed to copy NAI');
+  }
+};
+
+// Create token
+const createToken = async () => {
+  if (!isFormValid.value) {
+    toast.error('Please fill all required fields and agree to disclaimer');
+    return;
+  }
+
+  if (!hasWallet.value) {
+    await walletStore.openWalletSelectModal();
+    return;
+  }
+
+  // Ensure NAI is generated before creating token
+  if (!generatedNAI.value) {
+    generateNAI();
+    // Wait a moment for generation to complete
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    if (!generatedNAI.value) {
+      toast.error('Failed to generate token NAI. Please try again.');
+      return;
+    }
+  }
+
+  isCreatingToken.value = true;
+
+  try {
+    const params: TokenCreationParams = {
+      symbol: tokenSymbol.value.trim(),
+      name: tokenName.value.trim(),
+      description: tokenDescription.value.trim(),
+      nai: generatedNAI.value,
+      initial_supply: initialSupply.value,
+      precision: parseInt(precision.value),
+      can_stake: canStake.value
+    };
+
+    await createNAIToken(params);
+
+    toast.success('Token created successfully!', {
+      description: `Token ${tokenSymbol.value} has been created and deployed to the Hive Token Machine.`
+    });
+
+    // Reset form
+    resetForm();
+
+  } catch (error) {
+    toastError('Failed to create token', error);
+  } finally {
+    isCreatingToken.value = false;
+  }
+};
+
+// Reset form
+const resetForm = () => {
+  tokenName.value = '';
+  tokenSymbol.value = '';
+  tokenDescription.value = '';
+  initialSupply.value = '1000000';
+  precision.value = '3';
+  canStake.value = false;
+  agreedToDisclaimer.value = false;
+  generatedNAI.value = '';
+  naiGenerated.value = false;
+};
+
+// Format number with commas
+const formatNumber = (value: string) => {
+  const num = parseInt(value.replace(/,/g, ''));
+  return isNaN(num) ? value : num.toLocaleString();
+};
+
+// Handle supply input
+const onSupplyInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const value = target.value.replace(/[^0-9]/g, '');
+  initialSupply.value = value;
+};
+
+// Handle symbol input
+const onSymbolInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const value = target.value.replace(/[^A-Za-z]/g, '').toUpperCase();
+  tokenSymbol.value = value;
+};
+</script>
+
+<template>
+  <div class="container mx-auto p-6 max-w-4xl">
+    <div class="space-y-6">
+      <!-- Header -->
+      <div class="text-center space-y-2">
+        <h1 class="text-3xl font-bold tracking-tight">
+          Create Custom Token
+        </h1>
+        <p class="text-muted-foreground">
+          Create your own custom token on the Hive Token Machine
+        </p>
+      </div>
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Token Creation Form -->
+        <Card>
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <svg
+                width="20"
+                height="20"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="mdiCurrencyUsd"
+                />
+              </svg>
+              Token Details
+            </CardTitle>
+            <CardDescription>
+              Enter the details for your new NAI token. Note: The token name is only a display property that can be changed. The NAI (Network Asset Identifier) is the only unique identifier for your token.
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-4">
+            <!-- Token Name -->
+            <div class="space-y-2">
+              <Label for="token-name">Token Name *</Label>
+              <Input
+                id="token-name"
+                v-model="tokenName"
+                placeholder="e.g., My Awesome Token"
+                :disabled="isCreatingToken"
+              />
+            </div>
+
+            <!-- Token Symbol -->
+            <div class="space-y-2">
+              <Label for="token-symbol">Token Symbol *</Label>
+              <Input
+                id="token-symbol"
+                :value="tokenSymbol"
+                placeholder="e.g., MAT"
+                class="uppercase"
+                :class="{ 'border-red-500': tokenSymbol.length > 0 && !symbolValidation.isValid }"
+                maxlength="10"
+                :disabled="isCreatingToken"
+                @input="onSymbolInput"
+              />
+              <p
+                class="text-xs"
+                :class="tokenSymbol.length > 0 && !symbolValidation.isValid ? 'text-red-500' : 'text-muted-foreground'"
+              >
+                {{ tokenSymbol.length > 0 && !symbolValidation.isValid ? symbolValidation.message : '3-10 characters, letters only' }}
+              </p>
+            </div>
+
+            <!-- Token Description -->
+            <div class="space-y-2">
+              <Label for="token-description">Description</Label>
+              <Textarea
+                id="token-description"
+                v-model="tokenDescription"
+                placeholder="Describe your token..."
+                :disabled="isCreatingToken"
+                rows="3"
+              />
+            </div>
+
+            <!-- Initial Supply -->
+            <div class="space-y-2">
+              <Label for="initial-supply">Initial Supply *</Label>
+              <Input
+                id="initial-supply"
+                :value="formatNumber(initialSupply)"
+                placeholder="1,000,000"
+                :disabled="isCreatingToken"
+                @input="onSupplyInput"
+              />
+              <p class="text-xs text-muted-foreground">
+                Total number of tokens to create
+              </p>
+            </div>
+
+            <!-- Precision -->
+            <div class="space-y-2">
+              <Label for="precision">Decimal Precision *</Label>
+              <Input
+                id="precision"
+                v-model="precision"
+                type="number"
+                min="0"
+                max="12"
+                step="1"
+                placeholder="3"
+                :disabled="isCreatingToken"
+                class="w-full"
+              />
+              <p class="text-xs text-muted-foreground">
+                Number of decimal places for token amounts (0-12)
+              </p>
+            </div>
+
+            <!-- Staking Options -->
+            <div class="space-y-3">
+              <div class="flex items-center space-x-2">
+                <Checkbox
+                  id="can-stake"
+                  v-model="canStake"
+                  :disabled="isCreatingToken"
+                />
+                <Label
+                  for="can-stake"
+                  class="text-sm font-normal"
+                >
+                  Allow token staking
+                </Label>
+              </div>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-3 ml-6">
+                <div class="flex items-center space-x-2">
+                  <Checkbox
+                    id="others-can-stake"
+                    :disabled="isCreatingToken || !canStake"
+                  />
+                  <Label
+                    for="others-can-stake"
+                    class="text-sm font-normal"
+                  >
+                    Others can stake
+                  </Label>
+                </div>
+
+                <div class="flex items-center space-x-2">
+                  <Checkbox
+                    id="others-can-unstake"
+                    :disabled="isCreatingToken || !canStake"
+                  />
+                  <Label
+                    for="others-can-unstake"
+                    class="text-sm font-normal"
+                  >
+                    Others can unstake
+                  </Label>
+                </div>
+              </div>
+            </div>
+
+            <Separator />
+
+            <!-- Generated NAI -->
+            <div class="space-y-2">
+              <div class="flex items-center justify-between">
+                <Label>Generated NAI</Label>
+                <Button
+                  v-if="naiGenerated"
+                  variant="outline"
+                  size="sm"
+                  :disabled="isCreatingToken"
+                  @click="regenerateNAI"
+                >
+                  <svg
+                    width="16"
+                    height="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="mr-1"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      :d="mdiRefresh"
+                    />
+                  </svg>
+                  Regenerate
+                </Button>
+              </div>
+
+              <div
+                v-if="shouldShowNAIField"
+                class="flex items-center gap-2"
+              >
+                <Input
+                  :value="naiDisplayValue"
+                  readonly
+                  class="font-mono"
+                  :class="{ 'text-muted-foreground': !generatedNAI }"
+                />
+                <Button
+                  v-if="naiGenerated"
+                  variant="outline"
+                  size="sm"
+                  @click="copyNAI"
+                >
+                  <svg
+                    width="16"
+                    height="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      :d="mdiContentCopy"
+                    />
+                  </svg>
+                </Button>
+              </div>
+
+              <div
+                v-else
+                class="text-sm text-muted-foreground"
+              >
+                Enter a token symbol (3+ characters) to generate unique ID
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <!-- Preview and Actions -->
+        <div class="space-y-6">
+          <!-- Token Preview -->
+          <Card>
+            <CardHeader>
+              <CardTitle>Token Preview</CardTitle>
+              <CardDescription>
+                How your token will appear
+              </CardDescription>
+            </CardHeader>
+            <CardContent class="space-y-4">
+              <div class="border rounded-lg p-4 space-y-2">
+                <div class="flex items-center justify-between">
+                  <div>
+                    <h3 class="font-semibold">
+                      {{ tokenName || 'Token Name' }}
+                    </h3>
+                    <p class="text-sm text-muted-foreground">
+                      {{ tokenSymbol || 'SYMBOL' }}
+                    </p>
+                  </div>
+                  <span class="inline-flex items-center rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground">{{ naiDisplayValue || 'NAI' }}</span>
+                </div>
+
+                <p class="text-sm">
+                  {{ tokenDescription || 'Token description will appear here...' }}
+                </p>
+
+                <div class="flex justify-between text-xs text-muted-foreground">
+                  <span>Supply: {{ formatNumber(initialSupply) }}</span>
+                  <span>Precision: {{ precision }}</span>
+                </div>
+
+                <div
+                  v-if="canStake"
+                  class="flex items-center text-xs text-green-600"
+                >
+                  <svg
+                    width="12"
+                    height="12"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="mr-1"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      :d="mdiCheck"
+                    />
+                  </svg>
+                  Staking enabled
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <!-- Disclaimer -->
+          <Alert>
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiAlert"
+              />
+            </svg>
+            <AlertDescription>
+              <div class="space-y-2">
+                <p class="font-semibold">
+                  Important Disclaimer
+                </p>
+                <p class="text-sm">
+                  Tokens are created on the Hive Token Machine. Please verify all details before creation
+                  as they cannot be changed after deployment. Token symbols should be unique to avoid confusion.
+                  <strong>A transaction fee will be required to create the token.</strong>
+                </p>
+
+                <div class="flex items-center space-x-2 mt-3">
+                  <Checkbox
+                    id="disclaimer"
+                    v-model="agreedToDisclaimer"
+                    :disabled="isCreatingToken"
+                  />
+                  <Label
+                    for="disclaimer"
+                    class="text-sm"
+                  >
+                    I understand and agree to this disclaimer
+                  </Label>
+                </div>
+              </div>
+            </AlertDescription>
+          </Alert>
+
+          <!-- Create Button -->
+          <Button
+            class="w-full"
+            size="lg"
+            :disabled="createButtonState.disabled"
+            @click="createToken"
+          >
+            <svg
+              width="20"
+              height="20"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-2"
+              :class="{ 'animate-spin': isCreatingToken }"
+            >
+              <path
+                style="fill: currentColor"
+                :d="isCreatingToken ? mdiLoading : mdiRocket"
+              />
+            </svg>
+            {{ createButtonState.text }}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/pages/finances/token-definitions.vue b/src/pages/finances/token-definitions.vue
new file mode 100644
index 0000000..fa0cd4c
--- /dev/null
+++ b/src/pages/finances/token-definitions.vue
@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import {
+  mdiCurrencyUsd,
+  mdiRefresh,
+  mdiPlus
+} from '@mdi/js';
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import TokenCard from '@/components/TokenCard.vue';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useSettingsStore } from '@/stores/settings.store';
+import { getTokenDefinitions } from '@/utils/nai-tokens';
+import { toastError } from '@/utils/parse-error';
+
+const router = useRouter();
+const settingsStore = useSettingsStore();
+
+interface TokenDefinition {
+  symbol: string;
+  name: string;
+  description: string;
+  nai: string;
+  initial_supply: string;
+  precision: number;
+  can_stake: boolean;
+  creator: string;
+  created_at: string;
+  active: boolean;
+}
+
+// State
+const tokens = ref<TokenDefinition[]>([]);
+const isLoading = ref(true);
+const searchQuery = ref('');
+
+// Computed
+const filteredTokens = computed(() => {
+  if (!searchQuery.value.trim()) return tokens.value;
+
+  const query = searchQuery.value.toLowerCase();
+  return tokens.value.filter(token =>
+    token.name.toLowerCase().includes(query) ||
+    token.symbol.toLowerCase().includes(query) ||
+    token.nai.toLowerCase().includes(query)
+  );
+});
+
+// Load token definitions
+const loadTokenDefinitions = async () => {
+  isLoading.value = true;
+
+  try {
+    tokens.value = await getTokenDefinitions(settingsStore.settings.account);
+  } catch (error) {
+    toastError('Failed to load token definitions', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// Navigate to create token page
+const createNewToken = () => {
+  router.push('/finances/create-token');
+};
+
+// Lifecycle
+onMounted(() => {
+  loadTokenDefinitions();
+});
+</script>
+
+<template>
+  <div class="container mx-auto p-6 max-w-6xl">
+    <div class="space-y-6">
+      <!-- Header -->
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold tracking-tight">
+            My Token Definitions
+          </h1>
+          <p class="text-muted-foreground">
+            Manage and view your custom tokens on Hive Token Machine
+          </p>
+        </div>
+
+        <div class="flex gap-2">
+          <Button
+            variant="outline"
+            :disabled="isLoading"
+            @click="loadTokenDefinitions"
+          >
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              :class="{ 'animate-spin': isLoading }"
+              class="mr-2"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiRefresh"
+              />
+            </svg>
+            Refresh
+          </Button>
+
+          <Button @click="createNewToken">
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-2"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiPlus"
+              />
+            </svg>
+            Create Token
+          </Button>
+        </div>
+      </div>
+
+      <!-- Search -->
+      <div class="max-w-md">
+        <Input
+          v-model="searchQuery"
+          placeholder="Search tokens by name, symbol, or NAI..."
+          class="w-full"
+        />
+      </div>
+
+      <!-- Loading State -->
+      <div
+        v-if="isLoading"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+      >
+        <Card
+          v-for="i in 3"
+          :key="i"
+        >
+          <CardHeader>
+            <div class="flex items-center justify-between">
+              <div class="space-y-2 flex-1">
+                <Skeleton class="h-4 w-[200px]" />
+                <Skeleton class="h-3 w-[100px]" />
+              </div>
+              <Skeleton class="h-6 w-[80px]" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div class="space-y-3">
+              <Skeleton class="h-3 w-full" />
+              <Skeleton class="h-3 w-2/3" />
+              <div class="flex justify-between">
+                <Skeleton class="h-3 w-[80px]" />
+                <Skeleton class="h-3 w-[60px]" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div
+        v-else-if="tokens.length === 0"
+        class="text-center py-12"
+      >
+        <svg
+          width="64"
+          height="64"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="mx-auto text-muted-foreground mb-4"
+        >
+          <path
+            style="fill: currentColor"
+            :d="mdiCurrencyUsd"
+          />
+        </svg>
+        <h3 class="text-lg font-semibold mb-2">
+          No tokens created yet
+        </h3>
+        <p class="text-muted-foreground mb-6">
+          Create your first custom token to get started
+        </p>
+        <Button @click="createNewToken">
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mr-2"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiPlus"
+            />
+          </svg>
+          Create Your First Token
+        </Button>
+      </div>
+
+      <!-- No Search Results -->
+      <div
+        v-else-if="filteredTokens.length === 0"
+        class="text-center py-12"
+      >
+        <h3 class="text-lg font-semibold mb-2">
+          No tokens found
+        </h3>
+        <p class="text-muted-foreground">
+          Try adjusting your search criteria
+        </p>
+      </div>
+
+      <!-- Token Grid -->
+      <div
+        v-else
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+      >
+        <TokenCard
+          v-for="token in filteredTokens"
+          :key="token.nai"
+          :token="token"
+        />
+      </div>
+
+      <!-- Summary Stats -->
+      <div
+        v-if="tokens.length > 0"
+        class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-6 border-t"
+      >
+        <Card>
+          <CardContent class="pt-6">
+            <div class="text-center">
+              <div class="text-2xl font-bold">
+                {{ tokens.length }}
+              </div>
+              <div class="text-sm text-muted-foreground">
+                Total Tokens
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent class="pt-6">
+            <div class="text-center">
+              <div class="text-2xl font-bold text-green-600">
+                {{ tokens.filter(t => t.active).length }}
+              </div>
+              <div class="text-sm text-muted-foreground">
+                Active Tokens
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent class="pt-6">
+            <div class="text-center">
+              <div class="text-2xl font-bold text-blue-600">
+                {{ tokens.filter(t => t.can_stake).length }}
+              </div>
+              <div class="text-sm text-muted-foreground">
+                Stakeable Tokens
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/stores/wax.store.ts b/src/stores/wax.store.ts
index e793e02..b0f7445 100644
--- a/src/stores/wax.store.ts
+++ b/src/stores/wax.store.ts
@@ -44,8 +44,95 @@ export interface WaxApi {
         },
         context: {followed: boolean;}
       };
-    }
-  }
+    };
+    // NAI Token operations
+    create_nai_token: {
+      params: {
+        creator: string;
+        symbol: string;
+        name: string;
+        description: string;
+        nai: string;
+        initial_supply: string;
+        precision: number;
+        can_stake: boolean;
+      };
+      result: {
+        success: boolean;
+        nai: string;
+        transaction_id: string;
+      };
+    };
+    get_nai_tokens: {
+      params: { creator?: string; limit?: number; start?: string };
+      result: {
+        tokens: Array<{
+          symbol: string;
+          name: string;
+          description: string;
+          nai: string;
+          initial_supply: string;
+          current_supply: string;
+          precision: number;
+          can_stake: boolean;
+          creator: string;
+          created_at: string;
+          active: boolean;
+        }>;
+      };
+    };
+    get_account_balances: {
+      params: { account: string };
+      result: {
+        balances: Array<{
+          symbol: string;
+          name: string;
+          nai: string;
+          liquid_balance: string;
+          staked_balance: string;
+          precision: number;
+          can_stake: boolean;
+        }>;
+      };
+    };
+    transfer_nai_token: {
+      params: {
+        from: string;
+        to: string;
+        amount: string;
+        symbol: string;
+        memo?: string;
+      };
+      result: {
+        success: boolean;
+        transaction_id: string;
+      };
+    };
+    stake_nai_token: {
+      params: {
+        account: string;
+        amount: string;
+        symbol: string;
+        direction: 'stake' | 'unstake';
+      };
+      result: {
+        success: boolean;
+        transaction_id: string;
+      };
+    };
+    user_signup: {
+      params: {
+        account: string;
+        email?: string;
+        referrer?: string;
+      };
+      result: {
+        success: boolean;
+        account_exists: boolean;
+        message: string;
+      };
+    };
+  };
 };
 
 let chain: TWaxExtended<WaxApi>;
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
new file mode 100644
index 0000000..bc74533
--- /dev/null
+++ b/src/utils/nai-tokens.ts
@@ -0,0 +1,349 @@
+import { useSettingsStore } from '@/stores/settings.store';
+import { useWalletStore } from '@/stores/wallet.store';
+import { getWax } from '@/stores/wax.store';
+
+export interface TokenCreationParams {
+  symbol: string;
+  name: string;
+  description: string;
+  nai: string;
+  initial_supply: string;
+  precision: number;
+  can_stake: boolean;
+}
+
+export interface TokenTransferParams {
+  to: string;
+  amount: string;
+  symbol: string;
+  memo?: string;
+}
+
+export interface TokenStakeParams {
+  amount: string;
+  symbol: string;
+  direction: 'stake' | 'unstake';
+}
+
+/**
+ * Generate a unique NAI identifier for a token
+ */
+export const generateNAI = (symbol: string): string => {
+  const timestamp = Date.now();
+  const symbolUpper = symbol.trim().toUpperCase();
+
+  // Create a simple hash-like value for uniqueness
+  const hash = (symbolUpper + timestamp).split('').reduce((acc, char) => {
+    return acc + char.charCodeAt(0);
+  }, 0);
+
+  // NAI format: @@[8 digits]
+  const naiNumber = (hash % 100000000).toString().padStart(8, '0');
+
+  const table = [
+    [0, 3, 1, 7, 5, 9, 8, 6, 4, 2],
+    [7, 0, 9, 2, 1, 5, 4, 8, 6, 3],
+    [4, 2, 0, 6, 8, 7, 1, 3, 5, 9],
+    [1, 7, 5, 0, 9, 8, 3, 4, 2, 6],
+    [6, 1, 2, 3, 0, 4, 5, 9, 7, 8],
+    [3, 6, 7, 4, 2, 0, 9, 5, 8, 1],
+    [5, 8, 6, 9, 7, 2, 0, 1, 3, 4],
+    [8, 9, 4, 5, 3, 6, 2, 0, 1, 7],
+    [9, 4, 3, 8, 6, 1, 7, 2, 0, 5],
+    [2, 5, 8, 1, 4, 3, 6, 7, 9, 0]
+  ];
+
+  const dammDigit = (str: string) => {
+    let row = 0;
+
+    for(let i = 0; i < str.length; i++) {
+      const col = str.charAt(i) as unknown as number;
+      row = table[row][col];
+    }
+
+    return row.toString();
+  };
+
+  return `@@${naiNumber}${dammDigit(naiNumber)}`;
+};
+
+/**
+ * Create a new NAI token
+ */
+export const createNAIToken = async (params: TokenCreationParams) => {
+  const wax = await getWax();
+  const settingsStore = useSettingsStore();
+  const walletStore = useWalletStore();
+
+  if (!settingsStore.settings.account)
+    throw new Error('No account connected');
+
+  if (!walletStore.hasWallet)
+    throw new Error('No wallet available');
+
+  const tx = await wax.createTransaction();
+
+  // Create custom JSON operation for token creation
+  const tokenData = {
+    action: 'create_token',
+    data: {
+      ...params,
+      creator: settingsStore.settings.account
+    }
+  };
+
+  tx.pushOperation({
+    custom_json_operation: {
+      required_auths: [],
+      required_posting_auths: [settingsStore.settings.account],
+      id: 'nai_token_create',
+      json: JSON.stringify(tokenData)
+    }
+  });
+
+  await walletStore.wallet!.signTransaction(tx);
+
+  // TODO: Here you would broadcast to the blockchain
+  // For now, return the transaction
+  return tx.toApi();
+};
+
+/**
+ * Transfer NAI tokens
+ */
+export const transferNAIToken = async (params: TokenTransferParams) => {
+  const wax = await getWax();
+  const settingsStore = useSettingsStore();
+  const walletStore = useWalletStore();
+
+  if (!settingsStore.settings.account)
+    throw new Error('No account connected');
+
+
+  if (!walletStore.hasWallet)
+    throw new Error('No wallet available');
+
+
+  const tx = await wax.createTransaction();
+
+  // Create custom JSON operation for token transfer
+  const transferData = {
+    action: 'transfer_token',
+    data: {
+      ...params,
+      from: settingsStore.settings.account
+    }
+  };
+
+  tx.pushOperation({
+    custom_json_operation: {
+      required_auths: [],
+      required_posting_auths: [settingsStore.settings.account],
+      id: 'nai_token_transfer',
+      json: JSON.stringify(transferData)
+    }
+  });
+
+  await walletStore.wallet!.signTransaction(tx);
+
+  return tx.toApi();
+};
+
+/**
+ * Stake/Unstake NAI tokens
+ */
+export const stakeNAIToken = async (params: TokenStakeParams) => {
+  const wax = await getWax();
+  const settingsStore = useSettingsStore();
+  const walletStore = useWalletStore();
+
+  if (!settingsStore.settings.account)
+    throw new Error('No account connected');
+
+
+  if (!walletStore.hasWallet)
+    throw new Error('No wallet available');
+
+
+  const tx = await wax.createTransaction();
+
+  // Create custom JSON operation for token staking
+  const stakeData = {
+    action: 'stake_token',
+    data: {
+      ...params,
+      account: settingsStore.settings.account
+    }
+  };
+
+  tx.pushOperation({
+    custom_json_operation: {
+      required_auths: [],
+      required_posting_auths: [settingsStore.settings.account],
+      id: 'nai_token_stake',
+      json: JSON.stringify(stakeData)
+    }
+  });
+
+  await walletStore.wallet!.signTransaction(tx);
+
+  return tx.toApi();
+};
+
+/**
+ * Get token definitions for an account
+ */
+export const getTokenDefinitions = async (creator?: string) => {
+  try {
+    // In a real implementation, this would call the bridge API
+    // For now, return mock data
+    const mockTokens = [
+      {
+        symbol: 'MAT',
+        name: 'My Awesome Token',
+        description: 'A test token for demonstration purposes',
+        nai: '@@123456789',
+        initial_supply: '1000000',
+        current_supply: '1000000',
+        precision: 3,
+        can_stake: true,
+        creator: creator || 'testaccount',
+        created_at: '2024-01-15T10:30:00Z',
+        active: true
+      }
+    ];
+
+    return mockTokens;
+  } catch (error) {
+    console.error('Failed to get token definitions:', error);
+    throw error;
+  }
+};
+
+/**
+ * Get account balances
+ */
+export const getAccountBalances = async (_account: string) => {
+  try {
+    // In a real implementation, this would call the bridge API
+    // For now, return mock data
+    const mockBalances = [
+      {
+        symbol: 'HIVE',
+        name: 'Hive',
+        nai: '@@000000021',
+        liquid_balance: '150.500',
+        staked_balance: '0.000',
+        precision: 3,
+        can_stake: false
+      },
+      {
+        symbol: 'HP',
+        name: 'Hive Power',
+        nai: '@@000000037',
+        liquid_balance: '0.000',
+        staked_balance: '1250.750',
+        precision: 3,
+        can_stake: true
+      }
+    ];
+
+    return mockBalances;
+  } catch (error) {
+    console.error('Failed to get account balances:', error);
+    throw error;
+  }
+};
+
+/**
+ * User signup with account validation
+ */
+export const userSignup = async (account: string, email?: string, referrer?: string) => {
+  try {
+    const wax = await getWax();
+
+    // Check if account exists first
+    try {
+      const { accounts } = await wax.api.database_api.find_accounts({
+        accounts: [account],
+        delayed_votes_active: false
+      });
+
+      if (accounts.length > 0) {
+        return {
+          success: false,
+          account_exists: true,
+          message: 'Account already exists'
+        };
+      }
+    } catch (_error) {
+      // Account doesn't exist, proceed with signup
+    }
+
+    // In a real implementation, this would call the bridge API for user signup
+    const signupData = {
+      action: 'user_signup',
+      data: {
+        account,
+        email,
+        referrer,
+        timestamp: new Date().toISOString()
+      }
+    };
+
+    // Create transaction for signup
+    const settingsStore = useSettingsStore();
+    const walletStore = useWalletStore();
+
+    if (!settingsStore.settings.account || !walletStore.hasWallet)
+      throw new Error('Wallet not connected');
+
+
+    const tx = await wax.createTransaction();
+
+    tx.pushOperation({
+      custom_json_operation: {
+        required_auths: [],
+        required_posting_auths: [settingsStore.settings.account],
+        id: 'user_signup',
+        json: JSON.stringify(signupData)
+      }
+    });
+
+    await walletStore.wallet!.signTransaction(tx);
+
+    return {
+      success: true,
+      account_exists: false,
+      message: 'User signup completed successfully'
+    };
+
+  } catch (error) {
+    console.error('Failed to signup user:', error);
+    throw error;
+  }
+};
+
+/**
+ * Validate account name format
+ */
+export const validateAccountName = (accountName: string): boolean => {
+  // Hive account name validation rules
+  const regex = /^[a-z][a-z0-9\-.]{2,15}$/;
+  return regex.test(accountName);
+};
+
+/**
+ * Format token amount with precision
+ */
+export const formatTokenAmount = (amount: string | number, precision: number): string => {
+  const num = typeof amount === 'string' ? parseFloat(amount) : amount;
+  return num.toFixed(precision);
+};
+
+/**
+ * Parse token amount to remove precision
+ */
+export const parseTokenAmount = (amount: string, precision: number): number => {
+  return Math.floor(parseFloat(amount) * Math.pow(10, precision));
+};
diff --git a/src/utils/router.ts b/src/utils/router.ts
index f746129..5995bb9 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -2,6 +2,9 @@ import AccountCreate from '@/pages/account/create.vue';
 import RequestCreate from '@/pages/account/request.vue';
 import AccountUpdate from '@/pages/account/update.vue';
 import DappAuthorize from '@/pages/automation/authorize.vue';
+import AccountBalances from '@/pages/finances/account-balances.vue';
+import CreateToken from '@/pages/finances/create-token.vue';
+import TokenDefinitions from '@/pages/finances/token-definitions.vue';
 import Transfer from '@/pages/finances/transfer.vue';
 import Index from '@/pages/index.vue';
 import SignMessage from '@/pages/sign/message.vue';
@@ -15,5 +18,8 @@ export const routes = [
   { path: '/account/request', component: RequestCreate },
   { path: '/account/update', component: AccountUpdate },
   { path: '/finances/transfer', component: Transfer },
+  { path: '/finances/create-token', component: CreateToken },
+  { path: '/finances/token-definitions', component: TokenDefinitions },
+  { path: '/finances/account-balances', component: AccountBalances },
   { path: '/automation/authorize', component: DappAuthorize }
 ];
-- 
GitLab


From 5de58273f88e6e9e2f295c9813e35e1d33713077 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 8 Oct 2025 11:57:00 +0200
Subject: [PATCH 002/102] Integrate custom tokens with real API

---
 .env.example                                  |  10 +
 src/components/navigation/AppSidebar.vue      |   7 +-
 src/components/wallet/TokenBalanceHistory.vue | 268 ++++++++++
 src/pages/finances/account-balances.vue       |  44 +-
 src/pages/finances/token-definitions.vue      |  33 +-
 src/pages/finances/token-holders.vue          | 405 +++++++++++++++
 src/stores/tokens.store.ts                    | 223 +++++++++
 src/utils/ctokens-api.ts                      | 460 ++++++++++++++++++
 src/utils/nai-tokens.ts                       |  89 +++-
 src/utils/router.ts                           |   2 +
 10 files changed, 1463 insertions(+), 78 deletions(-)
 create mode 100644 src/components/wallet/TokenBalanceHistory.vue
 create mode 100644 src/pages/finances/token-holders.vue
 create mode 100644 src/stores/tokens.store.ts
 create mode 100644 src/utils/ctokens-api.ts

diff --git a/.env.example b/.env.example
index 7fb22e9..78f9511 100644
--- a/.env.example
+++ b/.env.example
@@ -2,3 +2,13 @@
 VITE_SNAP_ORIGIN=
 ## Uncomment this if you want to use a specific version of the Snap runtime:
 # VITE_SNAP_VERSION=
+
+# Custom Tokens API Configuration
+# Set this to your ctokens-api server URL
+# Example for local development: http://localhost:3000/ctokens-api
+# Example for remote server: https://api.example.com/ctokens-api
+# Leave empty to use default relative path /ctokens-api
+VITE_CTOKENS_API_URL=
+
+# For development, you can set a mock server URL
+# VITE_CTOKENS_API_URL=http://localhost:8080/mock-ctokens-api
diff --git a/src/components/navigation/AppSidebar.vue b/src/components/navigation/AppSidebar.vue
index 63cce00..95eb685 100644
--- a/src/components/navigation/AppSidebar.vue
+++ b/src/components/navigation/AppSidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { mdiHomeOutline, mdiMessageLockOutline, mdiFileSign, mdiAccountPlusOutline, mdiAccountArrowUpOutline, mdiAccountReactivateOutline, mdiSendOutline, mdiLink, mdiWallet, mdiViewList } from '@mdi/js';
+import { mdiHomeOutline, mdiMessageLockOutline, mdiFileSign, mdiAccountPlusOutline, mdiAccountArrowUpOutline, mdiAccountReactivateOutline, mdiSendOutline, mdiLink, mdiWallet, mdiViewList, mdiAccountGroup } from '@mdi/js';
 import { computed, onMounted, ref, type Ref } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -61,6 +61,11 @@ const groups: { title: string; items: Array<{ title: string; url: string; icon:
       title: 'My Token Definitions',
       url: '/finances/token-definitions',
       icon: mdiViewList
+    },
+    {
+      title: 'Token Holders',
+      url: '/finances/token-holders',
+      icon: mdiAccountGroup
     }
   ]
 }, {
diff --git a/src/components/wallet/TokenBalanceHistory.vue b/src/components/wallet/TokenBalanceHistory.vue
new file mode 100644
index 0000000..b812f9b
--- /dev/null
+++ b/src/components/wallet/TokenBalanceHistory.vue
@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import {
+  mdiHistory,
+  mdiArrowUp,
+  mdiArrowDown,
+  mdiMinus
+} from '@mdi/js';
+import { computed, onMounted, ref } from 'vue';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useTokensStore } from '@/stores/tokens.store';
+import { formatCTokenAmount, type CTokenBalanceHistory, type LegacyTokenBalance } from '@/utils/ctokens-api';
+import { toastError } from '@/utils/parse-error';
+
+interface Props {
+  token: LegacyTokenBalance;
+}
+
+const props = defineProps<Props>();
+const tokensStore = useTokensStore();
+
+// State
+const history = ref<CTokenBalanceHistory[]>([]);
+const isLoading = ref(false);
+const currentPage = ref(1);
+const hasMorePages = ref(true);
+
+// Computed
+const formattedHistory = computed(() => {
+  return history.value.map(entry => {
+    const balanceChange = parseFloat(entry.balance_change);
+    const isPositive = balanceChange > 0;
+    const isNegative = balanceChange < 0;
+
+    return {
+      ...entry,
+      formattedBalance: formatCTokenAmount(entry.balance, props.token.precision),
+      formattedPrevBalance: formatCTokenAmount(entry.prev_balance, props.token.precision),
+      formattedBalanceChange: formatCTokenAmount(Math.abs(balanceChange).toString(), props.token.precision),
+      changeDirection: isPositive ? 'increase' : isNegative ? 'decrease' : 'neutral',
+      changeIcon: isPositive ? mdiArrowUp : isNegative ? mdiArrowDown : mdiMinus,
+      changeColor: isPositive ? 'text-green-600' : isNegative ? 'text-red-600' : 'text-muted-foreground',
+      formattedDate: new Date(entry.timestamp).toLocaleDateString(),
+      formattedTime: new Date(entry.timestamp).toLocaleTimeString()
+    };
+  });
+});
+
+// Methods
+const loadHistory = async (page = 1) => {
+  try {
+    isLoading.value = true;
+
+    const newHistory = await tokensStore.getBalanceHistory(
+      props.token.nai,
+      props.token.precision,
+      page
+    );
+
+    if (page === 1)
+      history.value = newHistory;
+    else
+      history.value.push(...newHistory);
+
+    hasMorePages.value = newHistory.length === 100; // API returns 100 results per page
+    currentPage.value = page;
+  } catch (error) {
+    toastError('Failed to load balance history', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const loadMore = async () => {
+  if (!hasMorePages.value || isLoading.value) return;
+  await loadHistory(currentPage.value + 1);
+};
+
+const refresh = async () => {
+  currentPage.value = 1;
+  hasMorePages.value = true;
+  await loadHistory(1);
+};
+
+// Initialize
+onMounted(() => {
+  loadHistory();
+});
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <div class="flex items-center justify-between">
+        <div>
+          <CardTitle class="flex items-center gap-2">
+            <svg
+              width="20"
+              height="20"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiHistory"
+              />
+            </svg>
+            Balance History
+          </CardTitle>
+          <CardDescription>
+            Transaction history for {{ token.symbol }} ({{ token.nai }})
+          </CardDescription>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          :disabled="isLoading"
+          @click="refresh"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mr-1"
+            :class="{ 'animate-spin': isLoading }"
+          >
+            <path
+              style="fill: currentColor"
+              d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z"
+            />
+          </svg>
+          Refresh
+        </Button>
+      </div>
+    </CardHeader>
+    <CardContent>
+      <!-- Loading State -->
+      <div
+        v-if="isLoading && history.length === 0"
+        class="space-y-3"
+      >
+        <div
+          v-for="i in 5"
+          :key="i"
+          class="flex items-center justify-between p-3 border rounded-lg"
+        >
+          <div class="space-y-2">
+            <Skeleton class="h-4 w-[120px]" />
+            <Skeleton class="h-3 w-[80px]" />
+          </div>
+          <div class="text-right space-y-2">
+            <Skeleton class="h-4 w-[100px]" />
+            <Skeleton class="h-3 w-[60px]" />
+          </div>
+        </div>
+      </div>
+
+      <!-- History Items -->
+      <div
+        v-else-if="formattedHistory.length > 0"
+        class="space-y-3"
+      >
+        <div
+          v-for="entry in formattedHistory"
+          :key="entry.history_seq_no"
+          class="flex items-center justify-between p-3 border rounded-lg hover:bg-muted/50 transition-colors"
+        >
+          <div class="flex items-center gap-3">
+            <div
+              class="p-2 rounded-full"
+              :class="entry.changeDirection === 'increase' ? 'bg-green-100 text-green-600' :
+                entry.changeDirection === 'decrease' ? 'bg-red-100 text-red-600' :
+                'bg-gray-100 text-gray-600'"
+            >
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="entry.changeIcon"
+                />
+              </svg>
+            </div>
+            <div>
+              <div class="font-medium">
+                <span v-if="entry.changeDirection === 'increase'">Received</span>
+                <span v-else-if="entry.changeDirection === 'decrease'">Sent</span>
+                <span v-else>No Change</span>
+                <span
+                  class="ml-1"
+                  :class="entry.changeColor"
+                >
+                  {{ entry.formattedBalanceChange }} {{ token.symbol }}
+                </span>
+              </div>
+              <div class="text-sm text-muted-foreground">
+                {{ entry.formattedDate }} at {{ entry.formattedTime }}
+              </div>
+            </div>
+          </div>
+          <div class="text-right">
+            <div class="font-medium">
+              {{ entry.formattedBalance }} {{ token.symbol }}
+            </div>
+            <div class="text-sm text-muted-foreground">
+              Balance
+            </div>
+          </div>
+        </div>
+
+        <!-- Load More Button -->
+        <div
+          v-if="hasMorePages"
+          class="text-center pt-4"
+        >
+          <Button
+            variant="outline"
+            :disabled="isLoading"
+            @click="loadMore"
+          >
+            <svg
+              v-if="isLoading"
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-2 animate-spin"
+            >
+              <path
+                style="fill: currentColor"
+                d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+              />
+            </svg>
+            {{ isLoading ? 'Loading...' : 'Load More' }}
+          </Button>
+        </div>
+      </div>
+
+      <!-- Empty State -->
+      <div
+        v-else
+        class="text-center py-8"
+      >
+        <svg
+          width="48"
+          height="48"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="mx-auto text-muted-foreground mb-3"
+        >
+          <path
+            style="fill: currentColor"
+            :d="mdiHistory"
+          />
+        </svg>
+        <p class="text-muted-foreground">
+          No transaction history found for this token.
+        </p>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/pages/finances/account-balances.vue b/src/pages/finances/account-balances.vue
index 3c41948..5e7ecba 100644
--- a/src/pages/finances/account-balances.vue
+++ b/src/pages/finances/account-balances.vue
@@ -17,11 +17,11 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useSettingsStore } from '@/stores/settings.store';
-import { getAccountBalances, transferNAIToken, stakeNAIToken, formatTokenAmount } from '@/utils/nai-tokens';
+import { useTokensStore } from '@/stores/tokens.store';
+import { transferNAIToken, stakeNAIToken } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 
-const settingsStore = useSettingsStore();
+const tokensStore = useTokensStore();
 
 interface TokenBalance {
   symbol: string;
@@ -35,7 +35,6 @@ interface TokenBalance {
 }
 
 // State
-const balances = ref<TokenBalance[]>([]);
 const isLoading = ref(false);
 const searchQuery = ref('');
 
@@ -55,9 +54,9 @@ const isTransformLoading = ref(false);
 
 // Computed
 const filteredBalances = computed(() => {
-  if (!searchQuery.value) return balances.value;
+  if (!searchQuery.value) return tokensStore.balances;
 
-  return balances.value.filter(balance =>
+  return tokensStore.balances.filter(balance =>
     balance.symbol.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
     balance.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
     balance.nai.includes(searchQuery.value)
@@ -65,11 +64,7 @@ const filteredBalances = computed(() => {
 });
 
 const totalValue = computed(() => {
-  // Mock calculation - in real app this would use current token prices
-  return balances.value.reduce((sum, balance) => {
-    const totalBalance = parseFloat(balance.total_balance);
-    return sum + (totalBalance * 0.01); // Mock price of $0.01 per token
-  }, 0);
+  return tokensStore.totalValue;
 });
 
 // Methods
@@ -77,24 +72,7 @@ const loadAccountBalances = async () => {
   try {
     isLoading.value = true;
 
-    const account = settingsStore.settings.account;
-    if (!account) {
-      toast.error('No account connected');
-      return;
-    }
-
-    const accountBalances = await getAccountBalances(account);
-
-    // Transform to match our interface
-    balances.value = accountBalances.map(balance => ({
-      ...balance,
-      total_balance: formatTokenAmount(
-        parseFloat(balance.liquid_balance) + parseFloat(balance.staked_balance),
-        balance.precision
-      )
-    }));
-
-    toast.success('Account balances loaded successfully');
+    await tokensStore.loadBalances(true);
   } catch (error) {
     toastError('Failed to load account balances', error);
   } finally {
@@ -274,7 +252,7 @@ onMounted(() => {
         </CardHeader>
         <CardContent>
           <div class="text-2xl font-bold">
-            {{ balances.length }}
+            {{ tokensStore.tokenCount }}
           </div>
           <p class="text-xs text-muted-foreground">
             Different token types
@@ -302,7 +280,7 @@ onMounted(() => {
         </CardHeader>
         <CardContent>
           <div class="text-2xl font-bold">
-            {{ balances.reduce((sum, b) => sum + parseFloat(b.liquid_balance), 0).toFixed(3) }}
+            {{ tokensStore.balances.reduce((sum, b) => sum + parseFloat(b.liquid_balance), 0).toFixed(3) }}
           </div>
           <p class="text-xs text-muted-foreground">
             Available for transfer
@@ -330,7 +308,7 @@ onMounted(() => {
         </CardHeader>
         <CardContent>
           <div class="text-2xl font-bold">
-            {{ balances.reduce((sum, b) => sum + parseFloat(b.staked_balance), 0).toFixed(3) }}
+            {{ tokensStore.balances.reduce((sum, b) => sum + parseFloat(b.staked_balance), 0).toFixed(3) }}
           </div>
           <p class="text-xs text-muted-foreground">
             Earning rewards
@@ -352,7 +330,7 @@ onMounted(() => {
 
     <!-- Loading State -->
     <div
-      v-if="isLoading"
+      v-if="tokensStore.isLoadingBalances"
       class="space-y-4"
     >
       <Card
diff --git a/src/pages/finances/token-definitions.vue b/src/pages/finances/token-definitions.vue
index fa0cd4c..3f4ba86 100644
--- a/src/pages/finances/token-definitions.vue
+++ b/src/pages/finances/token-definitions.vue
@@ -13,36 +13,23 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useSettingsStore } from '@/stores/settings.store';
-import { getTokenDefinitions } from '@/utils/nai-tokens';
+import { useTokensStore } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 
 const router = useRouter();
 const settingsStore = useSettingsStore();
-
-interface TokenDefinition {
-  symbol: string;
-  name: string;
-  description: string;
-  nai: string;
-  initial_supply: string;
-  precision: number;
-  can_stake: boolean;
-  creator: string;
-  created_at: string;
-  active: boolean;
-}
+const tokensStore = useTokensStore();
 
 // State
-const tokens = ref<TokenDefinition[]>([]);
 const isLoading = ref(true);
 const searchQuery = ref('');
 
 // Computed
 const filteredTokens = computed(() => {
-  if (!searchQuery.value.trim()) return tokens.value;
+  if (!searchQuery.value.trim()) return tokensStore.tokenDefinitions;
 
   const query = searchQuery.value.toLowerCase();
-  return tokens.value.filter(token =>
+  return tokensStore.tokenDefinitions.filter(token =>
     token.name.toLowerCase().includes(query) ||
     token.symbol.toLowerCase().includes(query) ||
     token.nai.toLowerCase().includes(query)
@@ -54,7 +41,7 @@ const loadTokenDefinitions = async () => {
   isLoading.value = true;
 
   try {
-    tokens.value = await getTokenDefinitions(settingsStore.settings.account);
+    await tokensStore.loadTokenDefinitions(settingsStore.settings.account, true);
   } catch (error) {
     toastError('Failed to load token definitions', error);
   } finally {
@@ -168,7 +155,7 @@ onMounted(() => {
       </div>
 
       <div
-        v-else-if="tokens.length === 0"
+        v-else-if="tokensStore.tokenDefinitions.length === 0"
         class="text-center py-12"
       >
         <svg
@@ -233,14 +220,14 @@ onMounted(() => {
 
       <!-- Summary Stats -->
       <div
-        v-if="tokens.length > 0"
+        v-if="tokensStore.tokenDefinitions.length > 0"
         class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-6 border-t"
       >
         <Card>
           <CardContent class="pt-6">
             <div class="text-center">
               <div class="text-2xl font-bold">
-                {{ tokens.length }}
+                {{ tokensStore.tokenDefinitions.length }}
               </div>
               <div class="text-sm text-muted-foreground">
                 Total Tokens
@@ -253,7 +240,7 @@ onMounted(() => {
           <CardContent class="pt-6">
             <div class="text-center">
               <div class="text-2xl font-bold text-green-600">
-                {{ tokens.filter(t => t.active).length }}
+                {{ tokensStore.tokenDefinitions.filter(t => t.active).length }}
               </div>
               <div class="text-sm text-muted-foreground">
                 Active Tokens
@@ -266,7 +253,7 @@ onMounted(() => {
           <CardContent class="pt-6">
             <div class="text-center">
               <div class="text-2xl font-bold text-blue-600">
-                {{ tokens.filter(t => t.can_stake).length }}
+                {{ tokensStore.tokenDefinitions.filter(t => t.can_stake).length }}
               </div>
               <div class="text-sm text-muted-foreground">
                 Stakeable Tokens
diff --git a/src/pages/finances/token-holders.vue b/src/pages/finances/token-holders.vue
new file mode 100644
index 0000000..99bf256
--- /dev/null
+++ b/src/pages/finances/token-holders.vue
@@ -0,0 +1,405 @@
+<script setup lang="ts">
+import {
+  mdiAccountGroup,
+  mdiTrophy,
+  mdiCrown
+} from '@mdi/js';
+import { computed, onMounted, ref } from 'vue';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useTokensStore } from '@/stores/tokens.store';
+import { formatCTokenAmount, type CTokenTopHolder } from '@/utils/ctokens-api';
+import { toastError } from '@/utils/parse-error';
+
+const tokensStore = useTokensStore();
+
+// State
+const holders = ref<CTokenTopHolder[]>([]);
+const isLoading = ref(false);
+const selectedToken = ref<string>('');
+const selectedPrecision = ref<number>(3);
+const currentPage = ref(1);
+const hasMorePages = ref(true);
+
+// Computed
+const availableTokens = computed(() => {
+  return tokensStore.tokenDefinitions.map(token => ({
+    value: `${token.nai}:${token.precision}`,
+    label: `${token.symbol} (${token.nai})`,
+    nai: token.nai,
+    precision: token.precision
+  }));
+});
+
+const selectedTokenInfo = computed(() => {
+  if (!selectedToken.value) return null;
+  const [nai] = selectedToken.value.split(':');
+  return tokensStore.tokenDefinitions.find(t => t.nai === nai);
+});
+
+const formattedHolders = computed(() => {
+  return holders.value.map(holder => ({
+    ...holder,
+    formattedAmount: formatCTokenAmount(holder.amount, selectedPrecision.value),
+    percentage: calculatePercentage(holder.amount),
+    displayName: getDisplayName(holder)
+  }));
+});
+
+// Methods
+const calculatePercentage = (amount: string): number => {
+  if (!selectedTokenInfo.value) return 0;
+  const totalSupply = parseFloat(selectedTokenInfo.value.current_supply);
+  const holderAmount = parseFloat(formatCTokenAmount(amount, selectedPrecision.value));
+  return totalSupply > 0 ? (holderAmount / totalSupply) * 100 : 0;
+};
+
+const getDisplayName = (holder: CTokenTopHolder): string => {
+  // Try to get name from metadata, fallback to user key
+  const metadata = holder.metadata as { name?: string; display_name?: string } | undefined;
+  return metadata?.display_name || metadata?.name || holder.user;
+};
+
+const loadTopHolders = async (page = 1) => {
+  if (!selectedToken.value) return;
+
+  try {
+    isLoading.value = true;
+
+    const [nai, precision] = selectedToken.value.split(':');
+    const newHolders = await tokensStore.getTopHolders(nai, parseInt(precision), page);
+
+    if (page === 1)
+      holders.value = newHolders;
+    else
+      holders.value.push(...newHolders);
+
+    hasMorePages.value = newHolders.length === 100; // API returns 100 results per page
+    currentPage.value = page;
+  } catch (error) {
+    toastError('Failed to load top holders', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const loadMore = async () => {
+  if (!hasMorePages.value || isLoading.value) return;
+  await loadTopHolders(currentPage.value + 1);
+};
+
+const refresh = async () => {
+  currentPage.value = 1;
+  hasMorePages.value = true;
+  await loadTopHolders(1);
+};
+
+const onTokenChange = (value: string) => {
+  selectedToken.value = value;
+  const [, precision] = value.split(':');
+  selectedPrecision.value = parseInt(precision);
+  holders.value = [];
+  currentPage.value = 1;
+  hasMorePages.value = true;
+  loadTopHolders(1);
+};
+
+// Initialize
+onMounted(async () => {
+  await tokensStore.loadTokenDefinitions();
+
+  // Auto-select first token if available
+  if (availableTokens.value.length > 0)
+    onTokenChange(availableTokens.value[0].value);
+});
+</script>
+
+<template>
+  <div class="container mx-auto py-6 space-y-6">
+    <!-- Header -->
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold tracking-tight">
+          Top Token Holders
+        </h1>
+        <p class="text-muted-foreground">
+          View the largest holders of custom tokens on Hive Token Machine
+        </p>
+      </div>
+    </div>
+
+    <!-- Token Selection -->
+    <Card>
+      <CardHeader>
+        <CardTitle class="flex items-center gap-2">
+          <svg
+            width="20"
+            height="20"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiTrophy"
+            />
+          </svg>
+          Select Token
+        </CardTitle>
+        <CardDescription>
+          Choose a token to view its top holders
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div class="flex items-center gap-4">
+          <div class="flex-1">
+            <Select
+              :value="selectedToken"
+              @update:value="onTokenChange"
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select a token..." />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem
+                  v-for="token in availableTokens"
+                  :key="token.value"
+                  :value="token.value"
+                >
+                  {{ token.label }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <Button
+            variant="outline"
+            :disabled="!selectedToken || isLoading"
+            @click="refresh"
+          >
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-1"
+              :class="{ 'animate-spin': isLoading }"
+            >
+              <path
+                style="fill: currentColor"
+                d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z"
+              />
+            </svg>
+            Refresh
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+
+    <!-- Token Info -->
+    <Card v-if="selectedTokenInfo">
+      <CardContent class="pt-6">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div class="text-center">
+            <div class="text-2xl font-bold">
+              {{ selectedTokenInfo.symbol }}
+            </div>
+            <div class="text-sm text-muted-foreground">
+              Token Symbol
+            </div>
+          </div>
+          <div class="text-center">
+            <div class="text-2xl font-bold">
+              {{ parseFloat(selectedTokenInfo.current_supply).toLocaleString() }}
+            </div>
+            <div class="text-sm text-muted-foreground">
+              Total Supply
+            </div>
+          </div>
+          <div class="text-center">
+            <div class="text-2xl font-bold">
+              {{ holders.length }}
+            </div>
+            <div class="text-sm text-muted-foreground">
+              Top Holders Shown
+            </div>
+          </div>
+          <div class="text-center">
+            <div class="text-2xl font-bold">
+              {{ selectedTokenInfo.precision }}
+            </div>
+            <div class="text-sm text-muted-foreground">
+              Decimal Places
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+
+    <!-- Loading State -->
+    <div
+      v-if="isLoading && holders.length === 0"
+      class="space-y-3"
+    >
+      <Card
+        v-for="i in 10"
+        :key="i"
+      >
+        <CardContent class="p-4">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <Skeleton class="h-8 w-8 rounded-full" />
+              <div class="space-y-2">
+                <Skeleton class="h-4 w-[150px]" />
+                <Skeleton class="h-3 w-[100px]" />
+              </div>
+            </div>
+            <div class="text-right space-y-2">
+              <Skeleton class="h-4 w-[100px]" />
+              <Skeleton class="h-3 w-[60px]" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- Top Holders List -->
+    <div
+      v-else-if="formattedHolders.length > 0"
+      class="space-y-3"
+    >
+      <Card
+        v-for="holder in formattedHolders"
+        :key="holder.user"
+        class="hover:shadow-md transition-shadow"
+      >
+        <CardContent class="p-4">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-4">
+              <!-- Rank Badge -->
+              <div
+                class="flex items-center justify-center w-10 h-10 rounded-full font-bold text-white"
+                :class="{
+                  'bg-yellow-500': holder.rank === 1,
+                  'bg-gray-400': holder.rank === 2,
+                  'bg-orange-600': holder.rank === 3,
+                  'bg-blue-500': holder.rank > 3
+                }"
+              >
+                <svg
+                  v-if="holder.rank === 1"
+                  width="20"
+                  height="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    style="fill: currentColor"
+                    :d="mdiCrown"
+                  />
+                </svg>
+                <span v-else>{{ holder.rank }}</span>
+              </div>
+
+              <!-- Holder Info -->
+              <div>
+                <div class="font-semibold">
+                  {{ holder.displayName }}
+                </div>
+                <div class="text-sm text-muted-foreground">
+                  Rank #{{ holder.rank }} • {{ holder.percentage.toFixed(2) }}% of supply
+                </div>
+              </div>
+            </div>
+
+            <!-- Amount -->
+            <div class="text-right">
+              <div class="font-bold text-lg">
+                {{ parseFloat(holder.formattedAmount).toLocaleString() }}
+              </div>
+              <div class="text-sm text-muted-foreground">
+                {{ selectedTokenInfo?.symbol }}
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Load More Button -->
+      <div
+        v-if="hasMorePages"
+        class="text-center pt-4"
+      >
+        <Button
+          variant="outline"
+          :disabled="isLoading"
+          @click="loadMore"
+        >
+          <svg
+            v-if="isLoading"
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mr-2 animate-spin"
+          >
+            <path
+              style="fill: currentColor"
+              d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+            />
+          </svg>
+          {{ isLoading ? 'Loading...' : 'Load More' }}
+        </Button>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <Card v-else-if="selectedToken && !isLoading">
+      <CardContent class="text-center py-12">
+        <svg
+          width="64"
+          height="64"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="mx-auto text-muted-foreground mb-4"
+        >
+          <path
+            style="fill: currentColor"
+            :d="mdiAccountGroup"
+          />
+        </svg>
+        <h3 class="text-lg font-semibold mb-2">
+          No Holders Found
+        </h3>
+        <p class="text-muted-foreground mb-4">
+          This token doesn't have any registered holders yet.
+        </p>
+      </CardContent>
+    </Card>
+
+    <!-- No Token Selected -->
+    <Card v-else-if="!selectedToken && !isLoading">
+      <CardContent class="text-center py-12">
+        <svg
+          width="64"
+          height="64"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="mx-auto text-muted-foreground mb-4"
+        >
+          <path
+            style="fill: currentColor"
+            :d="mdiTrophy"
+          />
+        </svg>
+        <h3 class="text-lg font-semibold mb-2">
+          Select a Token
+        </h3>
+        <p class="text-muted-foreground">
+          Choose a token from the dropdown above to view its top holders.
+        </p>
+      </CardContent>
+    </Card>
+  </div>
+</template>
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
new file mode 100644
index 0000000..47bff34
--- /dev/null
+++ b/src/stores/tokens.store.ts
@@ -0,0 +1,223 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+import {
+  cTokensApi,
+  getUserOperationalKey,
+  transformCTokenBalanceToLegacy,
+  transformCTokenToLegacy,
+  type CTokenBalanceHistory,
+  type CTokenTopHolder,
+  type LegacyTokenBalance,
+  type LegacyTokenDefinition
+} from '@/utils/ctokens-api';
+
+export const useTokensStore = defineStore('tokens', () => {
+  // State
+  const balances = ref<LegacyTokenBalance[]>([]);
+  const tokenDefinitions = ref<LegacyTokenDefinition[]>([]);
+  const isLoadingBalances = ref(false);
+  const isLoadingTokens = ref(false);
+  const lastError = ref<string | null>(null);
+
+  // Computed
+  const totalValue = computed(() => {
+    return balances.value.reduce((total, balance) => {
+      // Mock price of $0.01 per token for now
+      const price = 0.01;
+      const amount = parseFloat(balance.total_balance);
+      return total + (amount * price);
+    }, 0);
+  });
+
+  const tokenCount = computed(() => balances.value.length);
+
+  const hasBalances = computed(() => balances.value.length > 0);
+
+  const hasTokenDefinitions = computed(() => tokenDefinitions.value.length > 0);
+
+  // Actions
+  const loadBalances = async (forceRefresh = false) => {
+    const operationalKey = getUserOperationalKey();
+
+    if (!operationalKey) {
+      lastError.value = 'No operational key available';
+      return;
+    }
+
+    if (isLoadingBalances.value && !forceRefresh) return;
+
+    isLoadingBalances.value = true;
+    lastError.value = null;
+
+    try {
+      // Test API connectivity first
+      const isApiAvailable = await cTokensApi.testConnection();
+
+      if (!isApiAvailable)
+        throw new Error('ctokens-api is not available. Using fallback data.');
+
+      // Get balances from ctokens-api
+      const cTokenBalances = await cTokensApi.getAccountBalances(operationalKey);
+
+      // Get all registered tokens to map metadata
+      const tokens = await cTokensApi.getRegisteredTokens();
+
+      // Transform to legacy format
+      const legacyBalances: LegacyTokenBalance[] = [];
+
+      for (const balance of cTokenBalances) {
+        const token = tokens.find(t => t.nai === balance.nai && t.precision === balance.precision);
+        if (token)
+          legacyBalances.push(transformCTokenBalanceToLegacy(balance, token));
+      }
+
+      balances.value = legacyBalances;
+    } catch (error) {
+      console.error('Failed to load balances:', error);
+      lastError.value = error instanceof Error ? error.message : 'Failed to load balances';
+
+      // Fallback to mock data for development
+      console.log('Using fallback mock data for development');
+      balances.value = [
+        {
+          symbol: 'HIVE',
+          name: 'Hive',
+          nai: '@@000000021',
+          liquid_balance: '150.500',
+          staked_balance: '0.000',
+          total_balance: '150.500',
+          precision: 3,
+          logo_url: undefined
+        },
+        {
+          symbol: 'HBD',
+          name: 'Hive Backed Dollar',
+          nai: '@@000000013',
+          liquid_balance: '75.250',
+          staked_balance: '0.000',
+          total_balance: '75.250',
+          precision: 3,
+          logo_url: undefined
+        },
+        {
+          symbol: 'MAT',
+          name: 'My Awesome Token',
+          nai: '@@123456789',
+          liquid_balance: '1000.000',
+          staked_balance: '500.000',
+          total_balance: '1500.000',
+          precision: 3,
+          logo_url: undefined
+        }
+      ];
+    } finally {
+      isLoadingBalances.value = false;
+    }
+  };
+
+  const loadTokenDefinitions = async (creator?: string, forceRefresh = false) => {
+    if (isLoadingTokens.value && !forceRefresh) return;
+
+    isLoadingTokens.value = true;
+    lastError.value = null;
+
+    try {
+      // Test API connectivity first
+      const isApiAvailable = await cTokensApi.testConnection();
+
+      if (!isApiAvailable)
+        throw new Error('ctokens-api is not available. Using fallback data.');
+
+      // Get registered tokens from ctokens-api
+      const tokens = await cTokensApi.getRegisteredTokens();
+
+      // Filter by creator if provided
+      const filteredTokens = creator
+        ? tokens.filter(token => token.owner === creator)
+        : tokens;
+
+      // Transform to legacy format
+      tokenDefinitions.value = filteredTokens.map(token => transformCTokenToLegacy(token));
+    } catch (error) {
+      console.error('Failed to load token definitions:', error);
+      lastError.value = error instanceof Error ? error.message : 'Failed to load token definitions';
+
+      // Fallback to mock data for development
+      console.log('Using fallback mock data for token definitions');
+      tokenDefinitions.value = [
+        {
+          symbol: 'MAT',
+          name: 'My Awesome Token',
+          description: 'A test token for demonstration purposes',
+          nai: '@@123456789',
+          initial_supply: '1000000',
+          current_supply: '1000000',
+          precision: 3,
+          can_stake: true,
+          creator: creator || 'testaccount',
+          created_at: '2024-01-15T10:30:00Z',
+          active: true
+        }
+      ];
+    } finally {
+      isLoadingTokens.value = false;
+    }
+  };
+
+  const getBalanceHistory = async (nai: string, precision: number, page = 1): Promise<CTokenBalanceHistory[]> => {
+    const operationalKey = getUserOperationalKey();
+    if (!operationalKey)
+      throw new Error('No operational key available');
+
+    return cTokensApi.getBalanceHistory(operationalKey, nai, precision, page);
+  };
+
+  const getTopHolders = async (nai: string, precision: number, page = 1): Promise<CTokenTopHolder[]> => {
+    return cTokensApi.getTopHolders(nai, precision, page);
+  };
+
+  const getTokenByNAI = (nai: string): LegacyTokenBalance | undefined => {
+    return balances.value.find(balance => balance.nai === nai);
+  };
+
+  const getTokenDefinitionByNAI = (nai: string): LegacyTokenDefinition | undefined => {
+    return tokenDefinitions.value.find(token => token.nai === nai);
+  };
+
+  const refreshAll = async () => {
+    await Promise.all([
+      loadBalances(true),
+      loadTokenDefinitions(undefined, true)
+    ]);
+  };
+
+  const clearError = () => {
+    lastError.value = null;
+  };
+
+  return {
+    // State
+    balances,
+    tokenDefinitions,
+    isLoadingBalances,
+    isLoadingTokens,
+    lastError,
+
+    // Computed
+    totalValue,
+    tokenCount,
+    hasBalances,
+    hasTokenDefinitions,
+
+    // Actions
+    loadBalances,
+    loadTokenDefinitions,
+    getBalanceHistory,
+    getTopHolders,
+    getTokenByNAI,
+    getTokenDefinitionByNAI,
+    refreshAll,
+    clearError
+  };
+});
diff --git a/src/utils/ctokens-api.ts b/src/utils/ctokens-api.ts
new file mode 100644
index 0000000..133201b
--- /dev/null
+++ b/src/utils/ctokens-api.ts
@@ -0,0 +1,460 @@
+import { useSettingsStore } from '@/stores/settings.store';
+
+// Types based on ctokens-api OpenAPI specification
+
+export interface CTokenBalance {
+  nai: string;
+  amount: string;
+  precision: number;
+  metadata?: Record<string, unknown>;
+}
+
+export interface CToken {
+  nai: string;
+  owner: string;
+  precision: number;
+  total_supply: string;
+  max_supply: string;
+  capped: boolean;
+  others_can_stake: boolean;
+  others_can_unstake: boolean;
+  is_nft: boolean;
+  metadata?: Record<string, unknown>;
+}
+
+export interface CTokenUser {
+  management_key: string;
+  operational_key: string;
+  hive_account?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface CTokenTopHolder {
+  rank: number;
+  user: string;
+  amount: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface CTokenBalanceHistory {
+  history_seq_no: number;
+  balance: string;
+  prev_balance: string;
+  balance_change: string;
+  timestamp: string;
+}
+
+export interface CTokenTransactionStatus {
+  code: string;
+  details: string;
+  hint: string;
+  message: string;
+}
+
+export type TransactionStatus = 'pending' | 'confirmed' | 'failed';
+
+export interface TransactionStatusResult {
+  status: TransactionStatus;
+  httpCode: number;
+  data?: CTokenTransactionStatus;
+  error?: string;
+}
+
+/**
+ * Custom Tokens API Service
+ * Provides methods to interact with the ctokens-api
+ */
+export class CTokensApiService {
+  private baseUrl: string;
+
+  public constructor (baseUrl: string = '/ctokens-api') {
+    this.baseUrl = baseUrl;
+  }
+
+  private async makeRequest<T> (endpoint: string, params?: Record<string, string | number>): Promise<T> {
+    const url = new URL(`${this.baseUrl}${endpoint}`, window.location.origin);
+
+    if (params) {
+      Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null)
+          url.searchParams.append(key, value.toString());
+      });
+    }
+
+    const response = await fetch(url.toString());
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`API request failed: ${response.status} ${response.statusText}. Response: ${errorText.substring(0, 200)}`);
+    }
+
+    const contentType = response.headers.get('content-type');
+    if (!contentType || !contentType.includes('application/json')) {
+      const responseText = await response.text();
+      throw new Error(`Expected JSON response but received ${contentType || 'unknown'}. Response: ${responseText.substring(0, 200)}`);
+    }
+
+    try {
+      return await response.json();
+    } catch (_parseError) {
+      const responseText = await response.text();
+      throw new Error(`Failed to parse JSON response. Content: ${responseText.substring(0, 200)}`);
+    }
+  }
+
+  /**
+   * Test API connectivity
+   */
+  public async testConnection (): Promise<boolean> {
+    try {
+      await this.getLastSyncedBlock();
+      return true;
+    } catch (_error) {
+      return false;
+    }
+  }
+
+  /**
+   * Get API version
+   */
+  public async getVersion (): Promise<string> {
+    return this.makeRequest<string>('/version');
+  }
+
+  /**
+   * Get last synced block number
+   */
+  public async getLastSyncedBlock (): Promise<number> {
+    return this.makeRequest<number>('/last-synced-block');
+  }
+
+  /**
+   * Get account balances for a user
+   */
+  public async getAccountBalances (user: string, page: number = 1): Promise<CTokenBalance[]> {
+    return this.makeRequest<CTokenBalance[]>('/balances', { user, page });
+  }
+
+  /**
+   * Get balance history for a specific token and user
+   */
+  public async getBalanceHistory (
+    user: string,
+    nai: string,
+    precision: number,
+    page: number = 1
+  ): Promise<CTokenBalanceHistory[]> {
+    return this.makeRequest<CTokenBalanceHistory[]>('/balance-history', {
+      user,
+      nai,
+      precision,
+      page
+    });
+  }
+
+  /**
+   * Get list of registered tokens
+   */
+  public async getRegisteredTokens (nai?: string, precision?: number): Promise<CToken[]> {
+    const params: Record<string, string | number> = {};
+    if (nai) params.nai = nai;
+    if (precision !== undefined) params.precision = precision;
+
+    return this.makeRequest<CToken[]>('/registered-tokens', params);
+  }
+
+  /**
+   * Get list of registered users
+   */
+  public async getRegisteredUsers (user?: string): Promise<CTokenUser[]> {
+    const params: Record<string, string | number> = {};
+    if (user) params.user = user;
+
+    return this.makeRequest<CTokenUser[]>('/registered-users', params);
+  }
+
+  /**
+   * Get top holders for a specific token
+   */
+  public async getTopHolders (nai: string, precision: number, page: number = 1): Promise<CTokenTopHolder[]> {
+    return this.makeRequest<CTokenTopHolder[]>('/top-holders', {
+      nai,
+      precision,
+      page
+    });
+  }
+
+  /**
+   * Get transaction status by reference ID
+   * Returns status based on HTTP response codes:
+   * - 404: Transaction pending (not found yet)
+   * - 200: Transaction confirmed
+   * - 400: Transaction failed (with error message)
+   */
+  public async getTransactionStatus (refId: string): Promise<TransactionStatusResult> {
+    const url = new URL(`${this.baseUrl}/status`, window.location.origin);
+    url.searchParams.append('refId', refId);
+
+    try {
+      const response = await fetch(url.toString());
+
+      if (response.status === 404) {
+        // Transaction is still pending
+        return {
+          status: 'pending',
+          httpCode: 404,
+          error: 'Transaction not found - still processing'
+        };
+      }
+
+      if (response.status === 200) {
+        // Transaction confirmed
+        const data = await response.json();
+        return {
+          status: 'confirmed',
+          httpCode: 200,
+          data
+        };
+      }
+
+      if (response.status === 400) {
+        // Transaction failed
+        const data = await response.json();
+        return {
+          status: 'failed',
+          httpCode: 400,
+          data,
+          error: data.message || 'Transaction failed'
+        };
+      }
+
+      // Unexpected status code
+      const errorText = await response.text();
+      return {
+        status: 'failed',
+        httpCode: response.status,
+        error: `Unexpected response: ${response.status} ${response.statusText}. ${errorText.substring(0, 200)}`
+      };
+
+    } catch (networkError) {
+      return {
+        status: 'failed',
+        httpCode: 0,
+        error: `Network error: ${networkError instanceof Error ? networkError.message : 'Unknown error'}`
+      };
+    }
+  }
+}
+
+// Create singleton instance with configurable URL
+const getApiBaseUrl = (): string => {
+  // Check for environment variable or default to local
+  return import.meta.env.VITE_CTOKENS_API_URL || '/ctokens-api';
+};
+
+export const cTokensApi = new CTokensApiService(getApiBaseUrl());
+
+/**
+ * Enhanced token utilities that integrate with ctokens-api
+ */
+
+/**
+ * Format token amount with precision from ctokens-api
+ */
+export const formatCTokenAmount = (amount: string, precision: number): string => {
+  const num = parseFloat(amount);
+  return (num / Math.pow(10, precision)).toFixed(precision);
+};
+
+/**
+ * Parse token amount to API format (with precision)
+ */
+export const parseCTokenAmount = (amount: string, precision: number): string => {
+  const num = parseFloat(amount);
+  return Math.floor(num * Math.pow(10, precision)).toString();
+};
+
+/**
+ * Get token symbol from metadata
+ */
+export const getTokenSymbol = (token: CToken): string => {
+  const metadata = token.metadata as { symbol?: string } | undefined;
+  return metadata?.symbol || token.nai;
+};
+
+/**
+ * Get token name from metadata
+ */
+export const getTokenName = (token: CToken): string => {
+  const metadata = token.metadata as { name?: string } | undefined;
+  return metadata?.name || token.nai;
+};
+
+/**
+ * Get token description from metadata
+ */
+export const getTokenDescription = (token: CToken): string => {
+  const metadata = token.metadata as { description?: string } | undefined;
+  return metadata?.description || '';
+};
+
+/**
+ * Get token logo URL from metadata
+ */
+export const getTokenLogoUrl = (token: CToken): string | undefined => {
+  const metadata = token.metadata as { logo_url?: string } | undefined;
+  return metadata?.logo_url;
+};
+
+/**
+ * Check if token supports staking
+ */
+export const canTokenStake = (token: CToken): boolean => {
+  return token.others_can_stake || token.others_can_unstake;
+};
+
+/**
+ * Get user's operational key (for API calls)
+ */
+export const getUserOperationalKey = (): string => {
+  const settingsStore = useSettingsStore();
+  // For now, use the connected account name as operational key
+  // In a real implementation, this would be derived from user's keys
+  const account = settingsStore.settings.account;
+
+  if (!account) {
+    console.warn('No account connected - using empty operational key');
+    return '';
+  }
+
+  return account;
+};
+
+/**
+ * Transform CTokenBalance to legacy TokenBalance format
+ */
+export interface LegacyTokenBalance {
+  symbol: string;
+  name: string;
+  nai: string;
+  liquid_balance: string;
+  staked_balance: string;
+  total_balance: string;
+  precision: number;
+  logo_url?: string;
+}
+
+export const transformCTokenBalanceToLegacy = (
+  balance: CTokenBalance,
+  token: CToken
+): LegacyTokenBalance => {
+  const formattedAmount = formatCTokenAmount(balance.amount, balance.precision);
+
+  return {
+    symbol: getTokenSymbol(token),
+    name: getTokenName(token),
+    nai: balance.nai,
+    liquid_balance: formattedAmount,
+    staked_balance: '0.000', // ctokens-api doesn't distinguish liquid vs staked in balances endpoint
+    total_balance: formattedAmount,
+    precision: balance.precision,
+    logo_url: getTokenLogoUrl(token)
+  };
+};
+
+/**
+ * Transform CToken to legacy TokenDefinition format
+ */
+export interface LegacyTokenDefinition {
+  symbol: string;
+  name: string;
+  description: string;
+  nai: string;
+  initial_supply: string;
+  current_supply: string;
+  precision: number;
+  can_stake: boolean;
+  creator: string;
+  created_at: string;
+  active: boolean;
+}
+
+export const transformCTokenToLegacy = (token: CToken): LegacyTokenDefinition => {
+  return {
+    symbol: getTokenSymbol(token),
+    name: getTokenName(token),
+    description: getTokenDescription(token),
+    nai: token.nai,
+    initial_supply: formatCTokenAmount(token.total_supply, token.precision),
+    current_supply: formatCTokenAmount(token.total_supply, token.precision),
+    precision: token.precision,
+    can_stake: canTokenStake(token),
+    creator: token.owner,
+    created_at: new Date().toISOString(), // ctokens-api doesn't provide creation date
+    active: true // assume all registered tokens are active
+  };
+};
+
+/**
+ * Poll transaction status until it's no longer pending
+ * @param refId - Transaction reference ID
+ * @param maxAttempts - Maximum number of polling attempts
+ * @param intervalMs - Polling interval in milliseconds
+ * @returns Promise resolving to final transaction status
+ */
+export const pollTransactionStatus = async (
+  refId: string,
+  maxAttempts: number = 30,
+  intervalMs: number = 2000
+): Promise<TransactionStatusResult> => {
+  const apiService = cTokensApi;
+
+  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+    const result = await apiService.getTransactionStatus(refId);
+
+    // If status is not pending, return immediately
+    if (result.status !== 'pending')
+      return result;
+
+    // If this was the last attempt, return the pending status
+    if (attempt === maxAttempts) {
+      return {
+        ...result,
+        error: `Transaction still pending after ${maxAttempts} attempts`
+      };
+    }
+
+    // Wait before next attempt
+    await new Promise(resolve => setTimeout(resolve, intervalMs));
+  }
+
+  // This should never be reached, but TypeScript requires it
+  return {
+    status: 'failed',
+    httpCode: 0,
+    error: 'Polling completed without result'
+  };
+};
+
+/**
+ * Get user-friendly status message
+ */
+export const getTransactionStatusMessage = (result: TransactionStatusResult): string => {
+  switch (result.status) {
+  case 'pending':
+    return 'Transaction is being processed...';
+  case 'confirmed':
+    return 'Transaction confirmed successfully!';
+  case 'failed':
+    return result.error || 'Transaction failed';
+  default:
+    return 'Unknown transaction status';
+  }
+};
+
+/**
+ * Check if transaction status indicates completion (success or failure)
+ */
+export const isTransactionComplete = (result: TransactionStatusResult): boolean => {
+  return result.status === 'confirmed' || result.status === 'failed';
+};
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index bc74533..87e3664 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -2,6 +2,15 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 
+import {
+  cTokensApi,
+  getUserOperationalKey,
+  transformCTokenBalanceToLegacy,
+  transformCTokenToLegacy,
+  type LegacyTokenBalance,
+  type LegacyTokenDefinition
+} from './ctokens-api';
+
 export interface TokenCreationParams {
   symbol: string;
   name: string;
@@ -191,12 +200,23 @@ export const stakeNAIToken = async (params: TokenStakeParams) => {
 };
 
 /**
- * Get token definitions for an account
+ * Get token definitions for an account - now using ctokens-api
  */
-export const getTokenDefinitions = async (creator?: string) => {
+export const getTokenDefinitions = async (creator?: string): Promise<LegacyTokenDefinition[]> => {
   try {
-    // In a real implementation, this would call the bridge API
-    // For now, return mock data
+    // Get registered tokens from ctokens-api
+    const tokens = await cTokensApi.getRegisteredTokens();
+
+    // Filter by creator if provided
+    const filteredTokens = creator
+      ? tokens.filter(token => token.owner === creator)
+      : tokens;
+
+    // Transform to legacy format
+    return filteredTokens.map(token => transformCTokenToLegacy(token));
+  } catch (error) {
+    console.error('Failed to get token definitions:', error);
+    // Fallback to mock data for development
     const mockTokens = [
       {
         symbol: 'MAT',
@@ -214,19 +234,37 @@ export const getTokenDefinitions = async (creator?: string) => {
     ];
 
     return mockTokens;
-  } catch (error) {
-    console.error('Failed to get token definitions:', error);
-    throw error;
   }
 };
 
 /**
- * Get account balances
+ * Get account balances - now using ctokens-api
  */
-export const getAccountBalances = async (_account: string) => {
+export const getAccountBalances = async (_account: string): Promise<LegacyTokenBalance[]> => {
   try {
-    // In a real implementation, this would call the bridge API
-    // For now, return mock data
+    const operationalKey = getUserOperationalKey();
+    if (!operationalKey)
+      throw new Error('No operational key available');
+
+    // Get balances from ctokens-api
+    const balances = await cTokensApi.getAccountBalances(operationalKey);
+
+    // Get all registered tokens to map metadata
+    const tokens = await cTokensApi.getRegisteredTokens();
+
+    // Transform to legacy format
+    const legacyBalances: LegacyTokenBalance[] = [];
+
+    for (const balance of balances) {
+      const token = tokens.find(t => t.nai === balance.nai && t.precision === balance.precision);
+      if (token)
+        legacyBalances.push(transformCTokenBalanceToLegacy(balance, token));
+    }
+
+    return legacyBalances;
+  } catch (error) {
+    console.error('Failed to get account balances:', error);
+    // Fallback to mock data for development
     const mockBalances = [
       {
         symbol: 'HIVE',
@@ -234,24 +272,33 @@ export const getAccountBalances = async (_account: string) => {
         nai: '@@000000021',
         liquid_balance: '150.500',
         staked_balance: '0.000',
+        total_balance: '150.500',
         precision: 3,
-        can_stake: false
+        logo_url: undefined
       },
       {
-        symbol: 'HP',
-        name: 'Hive Power',
-        nai: '@@000000037',
-        liquid_balance: '0.000',
-        staked_balance: '1250.750',
+        symbol: 'HBD',
+        name: 'Hive Backed Dollar',
+        nai: '@@000000013',
+        liquid_balance: '75.250',
+        staked_balance: '0.000',
+        total_balance: '75.250',
         precision: 3,
-        can_stake: true
+        logo_url: undefined
+      },
+      {
+        symbol: 'MAT',
+        name: 'My Awesome Token',
+        nai: '@@123456789',
+        liquid_balance: '1000.000',
+        staked_balance: '500.000',
+        total_balance: '1500.000',
+        precision: 3,
+        logo_url: undefined
       }
     ];
 
     return mockBalances;
-  } catch (error) {
-    console.error('Failed to get account balances:', error);
-    throw error;
   }
 };
 
diff --git a/src/utils/router.ts b/src/utils/router.ts
index 5995bb9..028b54f 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -5,6 +5,7 @@ import DappAuthorize from '@/pages/automation/authorize.vue';
 import AccountBalances from '@/pages/finances/account-balances.vue';
 import CreateToken from '@/pages/finances/create-token.vue';
 import TokenDefinitions from '@/pages/finances/token-definitions.vue';
+import TokenHolders from '@/pages/finances/token-holders.vue';
 import Transfer from '@/pages/finances/transfer.vue';
 import Index from '@/pages/index.vue';
 import SignMessage from '@/pages/sign/message.vue';
@@ -20,6 +21,7 @@ export const routes = [
   { path: '/finances/transfer', component: Transfer },
   { path: '/finances/create-token', component: CreateToken },
   { path: '/finances/token-definitions', component: TokenDefinitions },
+  { path: '/finances/token-holders', component: TokenHolders },
   { path: '/finances/account-balances', component: AccountBalances },
   { path: '/automation/authorize', component: DappAuthorize }
 ];
-- 
GitLab


From 8aa43d374d3d4e53d1539e6d9162600b567bc61c Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 8 Oct 2025 13:12:20 +0200
Subject: [PATCH 003/102] Add htm package

---
 .npmrc         |  13 ++++-
 package.json   |   9 ++--
 pnpm-lock.yaml | 137 ++++++++++++++++++++++++++++++++++++++++---------
 3 files changed, 131 insertions(+), 28 deletions(-)
 mode change 120000 => 100644 .npmrc

diff --git a/.npmrc b/.npmrc
deleted file mode 120000
index f054463..0000000
--- a/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-./npm-common-config/pnpm-config/.npmrc
\ No newline at end of file
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..6580633
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,12 @@
+# https://gitlab.syncad.com/hive group specification, offering aggregated package view: https://gitlab.syncad.com/groups/hive/-/packages
+@hiveio:registry=https://gitlab.syncad.com/api/v4/groups/136/-/packages/npm/
+@mtyszczak-cargo:registry=https://gitlab.syncad.com/api/v4/projects/541/packages/npm/
+
+# Enforce strict engine-versions from package.json
+engine-strict=true
+
+# Always install/remove dependencies from the pnpm workspace root
+ignore-workspace-root-check=true
+
+#When executing commands recursively in a workspace, execute them on the root workspace project as well
+include-workspace-root=true
diff --git a/package.json b/package.json
index 21e1eba..1d7f8dd 100644
--- a/package.json
+++ b/package.json
@@ -27,12 +27,13 @@
     "@eslint/compat": "^1.3.1",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.32.0",
-    "@hiveio/wax": "1.27.6-rc13",
-    "@hiveio/wax-signers-keychain": "1.27.6-rc13",
-    "@hiveio/wax-signers-metamask": "1.27.6-rc13",
-    "@hiveio/wax-signers-peakvault": "1.27.6-rc13",
+    "@hiveio/wax": "1.27.12-rc1-251007115925",
+    "@hiveio/wax-signers-keychain": "1.27.12-rc1-251007115925",
+    "@hiveio/wax-signers-metamask": "1.27.12-rc1-251007115925",
+    "@hiveio/wax-signers-peakvault": "1.27.12-rc1-251007115925",
     "@mdi/js": "^7.4.47",
     "@metamask/providers": "^16.0.0",
+    "@mtyszczak-cargo/htm": "^1.0.0",
     "@nabla/vite-plugin-eslint": "^2.0.6",
     "@stylistic/eslint-plugin": "^5.2.2",
     "@tanstack/vue-table": "^8.21.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e46f79f..e940d8f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,23 +18,26 @@ importers:
         specifier: ^9.32.0
         version: 9.32.0
       '@hiveio/wax':
-        specifier: 1.27.6-rc13
-        version: 1.27.6-rc13
+        specifier: 1.27.12-rc1-251007115925
+        version: 1.27.12-rc1-251007115925
       '@hiveio/wax-signers-keychain':
-        specifier: 1.27.6-rc13
-        version: 1.27.6-rc13
+        specifier: 1.27.12-rc1-251007115925
+        version: 1.27.12-rc1-251007115925
       '@hiveio/wax-signers-metamask':
-        specifier: 1.27.6-rc13
-        version: 1.27.6-rc13(webextension-polyfill@0.12.0)
+        specifier: 1.27.12-rc1-251007115925
+        version: 1.27.12-rc1-251007115925(webextension-polyfill@0.12.0)
       '@hiveio/wax-signers-peakvault':
-        specifier: 1.27.6-rc13
-        version: 1.27.6-rc13
+        specifier: 1.27.12-rc1-251007115925
+        version: 1.27.12-rc1-251007115925
       '@mdi/js':
         specifier: ^7.4.47
         version: 7.4.47
       '@metamask/providers':
         specifier: ^16.0.0
         version: 16.1.0
+      '@mtyszczak-cargo/htm':
+        specifier: ^1.0.0
+        version: 1.0.0(@hiveio/wax@1.27.12-rc1-251007115925)
       '@nabla/vite-plugin-eslint':
         specifier: ^2.0.6
         version: 2.0.6(eslint@9.32.0(jiti@1.21.7))(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0))
@@ -378,17 +381,17 @@ packages:
   '@floating-ui/vue@1.1.6':
     resolution: {integrity: sha512-XFlUzGHGv12zbgHNk5FN2mUB7ROul3oG2ENdTpWdE+qMFxyNxWSRmsoyhiEnpmabNm6WnUvR1OvJfUfN4ojC1A==}
 
-  '@hiveio/wax-signers-keychain@1.27.6-rc13':
-    resolution: {integrity: sha1-bEHQx/aq+l8Ipogjz2C5Twp4HT8=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-keychain/-/@hiveio/wax-signers-keychain-1.27.6-rc13.tgz}
+  '@hiveio/wax-signers-keychain@1.27.12-rc1-251007115925':
+    resolution: {integrity: sha1-PPpAvrHqXEB05xZhFJY/B+68Irc=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-keychain/-/@hiveio/wax-signers-keychain-1.27.12-rc1-251007115925.tgz}
 
-  '@hiveio/wax-signers-metamask@1.27.6-rc13':
-    resolution: {integrity: sha1-cwSSOarRnRQm1P2V7NT/uAb8Nfk=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-metamask/-/@hiveio/wax-signers-metamask-1.27.6-rc13.tgz}
+  '@hiveio/wax-signers-metamask@1.27.12-rc1-251007115925':
+    resolution: {integrity: sha1-Klg4Ulj7IRE6lHOEiqG7UgmZqbA=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-metamask/-/@hiveio/wax-signers-metamask-1.27.12-rc1-251007115925.tgz}
 
-  '@hiveio/wax-signers-peakvault@1.27.6-rc13':
-    resolution: {integrity: sha1-B67jTmEOVH2AHZ3dDNf4nxj/vuM=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-peakvault/-/@hiveio/wax-signers-peakvault-1.27.6-rc13.tgz}
+  '@hiveio/wax-signers-peakvault@1.27.12-rc1-251007115925':
+    resolution: {integrity: sha1-eCHCv29oVNNRF2WzLiAdxtiqkcI=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-peakvault/-/@hiveio/wax-signers-peakvault-1.27.12-rc1-251007115925.tgz}
 
-  '@hiveio/wax@1.27.6-rc13':
-    resolution: {integrity: sha1-kD2djpJaBk5Xzf9JY3jPXoi9ko4=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax/-/@hiveio/wax-1.27.6-rc13.tgz}
+  '@hiveio/wax@1.27.12-rc1-251007115925':
+    resolution: {integrity: sha1-AaYvRBWGrvY0PTd3e0eE4p0ujjI=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax/-/@hiveio/wax-1.27.12-rc1-251007115925.tgz}
     engines: {node: ^20.11 || >= 21.2}
 
   '@humanfs/core@0.19.1':
@@ -506,6 +509,12 @@ packages:
     resolution: {integrity: sha512-w8CVbdkDrVXFJbfBSlDfafDR6BAkpDmv1bC1UJVCoVny5tW2RKAdn9i68Xf7asYT4TnUhl/hN4zfUiKQq9II4g==}
     engines: {node: '>=16.0.0'}
 
+  '@mtyszczak-cargo/htm@1.0.0':
+    resolution: {integrity: sha1-uE1bZ+x6nb7j8hpb/AvpQUZUbFA=, tarball: https://gitlab.syncad.com/api/v4/projects/541/packages/npm/@mtyszczak-cargo/htm/-/@mtyszczak-cargo/htm-1.0.0.tgz}
+    engines: {node: ^20.11 || >= 21.2}
+    peerDependencies:
+      '@hiveio/wax': '>=1.27.12-rc1-251007115925'
+
   '@nabla/vite-plugin-eslint@2.0.6':
     resolution: {integrity: sha512-QQZwq7aTx2WtG2/c2ASF+amNAytbLY8LYYc71bECIMzRr7Y7Cx3o6oAQrcb1qQbq2+z2S2rq7i7o5LTskQi8sA==}
     peerDependencies:
@@ -539,6 +548,36 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@protobufjs/aspromise@1.1.2':
+    resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
+
+  '@protobufjs/base64@1.1.2':
+    resolution: {integrity: sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==}
+
+  '@protobufjs/codegen@2.0.4':
+    resolution: {integrity: sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==}
+
+  '@protobufjs/eventemitter@1.1.0':
+    resolution: {integrity: sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==}
+
+  '@protobufjs/fetch@1.1.0':
+    resolution: {integrity: sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==}
+
+  '@protobufjs/float@1.0.2':
+    resolution: {integrity: sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==}
+
+  '@protobufjs/inquire@1.1.0':
+    resolution: {integrity: sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==}
+
+  '@protobufjs/path@1.1.2':
+    resolution: {integrity: sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==}
+
+  '@protobufjs/pool@1.1.0':
+    resolution: {integrity: sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==}
+
+  '@protobufjs/utf8@1.1.0':
+    resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
+
   '@rollup/rollup-android-arm-eabi@4.34.9':
     resolution: {integrity: sha512-qZdlImWXur0CFakn2BJ2znJOdqYZKiedEPEVNTBrpfPjc/YuTGcaYZcdmNFTkUj3DU0ZM/AElcM8Ybww3xVLzA==}
     cpu: [arm]
@@ -1726,6 +1765,9 @@ packages:
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  long@5.3.2:
+    resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -1970,6 +2012,10 @@ packages:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
 
+  protobufjs@7.2.5:
+    resolution: {integrity: sha512-gGXRSXvxQ7UiPgfw8gevrfRWcTlSbOFg+p/N+JVJEK5VhueL2miT6qTymqAmjr1Q5WbOCyJbyrk6JfWKwlFn6A==}
+    engines: {node: '>=12.0.0'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -2618,23 +2664,23 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@hiveio/wax-signers-keychain@1.27.6-rc13':
+  '@hiveio/wax-signers-keychain@1.27.12-rc1-251007115925':
     dependencies:
-      '@hiveio/wax': 1.27.6-rc13
+      '@hiveio/wax': 1.27.12-rc1-251007115925
 
-  '@hiveio/wax-signers-metamask@1.27.6-rc13(webextension-polyfill@0.12.0)':
+  '@hiveio/wax-signers-metamask@1.27.12-rc1-251007115925(webextension-polyfill@0.12.0)':
     dependencies:
-      '@hiveio/wax': 1.27.6-rc13
+      '@hiveio/wax': 1.27.12-rc1-251007115925
       '@metamask/providers': 21.0.0(webextension-polyfill@0.12.0)
     transitivePeerDependencies:
       - supports-color
       - webextension-polyfill
 
-  '@hiveio/wax-signers-peakvault@1.27.6-rc13':
+  '@hiveio/wax-signers-peakvault@1.27.12-rc1-251007115925':
     dependencies:
-      '@hiveio/wax': 1.27.6-rc13
+      '@hiveio/wax': 1.27.12-rc1-251007115925
 
-  '@hiveio/wax@1.27.6-rc13':
+  '@hiveio/wax@1.27.12-rc1-251007115925':
     dependencies:
       events: 3.3.0
 
@@ -2832,6 +2878,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@mtyszczak-cargo/htm@1.0.0(@hiveio/wax@1.27.12-rc1-251007115925)':
+    dependencies:
+      '@hiveio/wax': 1.27.12-rc1-251007115925
+      protobufjs: 7.2.5
+
   '@nabla/vite-plugin-eslint@2.0.6(eslint@9.32.0(jiti@1.21.7))(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0))':
     dependencies:
       '@types/eslint': 9.6.1
@@ -2865,6 +2916,29 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@protobufjs/aspromise@1.1.2': {}
+
+  '@protobufjs/base64@1.1.2': {}
+
+  '@protobufjs/codegen@2.0.4': {}
+
+  '@protobufjs/eventemitter@1.1.0': {}
+
+  '@protobufjs/fetch@1.1.0':
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/inquire': 1.1.0
+
+  '@protobufjs/float@1.0.2': {}
+
+  '@protobufjs/inquire@1.1.0': {}
+
+  '@protobufjs/path@1.1.2': {}
+
+  '@protobufjs/pool@1.1.0': {}
+
+  '@protobufjs/utf8@1.1.0': {}
+
   '@rollup/rollup-android-arm-eabi@4.34.9':
     optional: true
 
@@ -4192,6 +4266,8 @@ snapshots:
 
   lodash.merge@4.6.2: {}
 
+  long@5.3.2: {}
+
   lru-cache@10.4.3: {}
 
   lucide-vue-next@0.477.0(vue@3.5.13(typescript@5.7.3)):
@@ -4404,6 +4480,21 @@ snapshots:
 
   process@0.11.10: {}
 
+  protobufjs@7.2.5:
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/base64': 1.1.2
+      '@protobufjs/codegen': 2.0.4
+      '@protobufjs/eventemitter': 1.1.0
+      '@protobufjs/fetch': 1.1.0
+      '@protobufjs/float': 1.0.2
+      '@protobufjs/inquire': 1.1.0
+      '@protobufjs/path': 1.1.2
+      '@protobufjs/pool': 1.1.0
+      '@protobufjs/utf8': 1.1.0
+      '@types/node': 22.13.9
+      long: 5.3.2
+
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}
-- 
GitLab


From db1984fc8d88f7789f48b3de3f3ae0840a9acb81 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 8 Oct 2025 13:28:46 +0200
Subject: [PATCH 004/102] Improve manabar display

---
 src/components/utilcards/AccountDetailsCard.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/utilcards/AccountDetailsCard.vue b/src/components/utilcards/AccountDetailsCard.vue
index 18dfc5d..0cf8418 100644
--- a/src/components/utilcards/AccountDetailsCard.vue
+++ b/src/components/utilcards/AccountDetailsCard.vue
@@ -136,7 +136,7 @@ const rcPercentage = computed(() => {
               <div class="flex flex-col items-center">
                 <Progress
                   :value="upvotePercentage"
-                  class="h-[100px] text-[18px]"
+                  class="h-[100px] text-[16px]"
                   gauge-primary-color="oklch(0.6 0.15 140)"
                   gauge-secondary-color="oklch(0.6 0.15 140 / 0.2)"
                 />
@@ -147,7 +147,7 @@ const rcPercentage = computed(() => {
               <div class="flex flex-col items-center">
                 <Progress
                   :value="downvotePercentage"
-                  class="h-[100px] text-[18px]"
+                  class="h-[100px] text-[16px]"
                   gauge-primary-color="oklch(0.6 0.15 25)"
                   gauge-secondary-color="oklch(0.6 0.15 25 / 0.2)"
                 />
@@ -159,7 +159,7 @@ const rcPercentage = computed(() => {
             <div class="flex flex-col items-center">
               <Progress
                 :value="rcPercentage"
-                class="h-[100px] text-[18px]"
+                class="h-[100px] text-[16px]"
                 gauge-primary-color="oklch(0.6 0.15 260)"
                 gauge-secondary-color="oklch(0.6 0.15 260 / 0.2)"
               />
-- 
GitLab


From 328c40951cd4685656f0b0c490143a63d2c2068d Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Wed, 8 Oct 2025 16:43:52 +0200
Subject: [PATCH 005/102] Add HTM login

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   9 +
 src/App.vue                                   |  35 ++--
 src/assets/icons/wallets/ctokens.svg          |   9 +
 .../onboarding/OnboardingWalletButton.vue     |   3 +-
 src/components/onboarding/SelectWallet.vue    |   7 +
 src/components/onboarding/ThankYou.vue        |  10 +-
 .../onboarding/WalletOnboarding.vue           |   6 +
 .../onboarding/wallets/htm/HTMConnect.vue     | 150 +++++++++++++++
 .../utilcards/AccountDetailsCard.vue          |   4 +-
 src/components/wallet/HTMProvidePassword.vue  | 128 +++++++++++++
 src/stores/settings.store.ts                  |   8 +-
 src/stores/user.store.ts                      | 104 ++++++++--
 src/stores/wallet.store.ts                    |  33 +++-
 src/stores/wax.store.ts                       |  15 +-
 src/utils/wallet/abstraction.ts               |   7 -
 src/utils/wallet/ctokens/api/index.d.ts       | 181 ++++++++++++++++++
 src/utils/wallet/ctokens/api/index.js         |  37 ++++
 src/utils/wallet/ctokens/signer.ts            | 176 +++++++++++++++++
 19 files changed, 878 insertions(+), 45 deletions(-)
 create mode 100644 src/assets/icons/wallets/ctokens.svg
 create mode 100644 src/components/onboarding/wallets/htm/HTMConnect.vue
 create mode 100644 src/components/wallet/HTMProvidePassword.vue
 delete mode 100644 src/utils/wallet/abstraction.ts
 create mode 100644 src/utils/wallet/ctokens/api/index.d.ts
 create mode 100644 src/utils/wallet/ctokens/api/index.js
 create mode 100644 src/utils/wallet/ctokens/signer.ts

diff --git a/package.json b/package.json
index 1d7f8dd..1f8aed3 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@eslint/compat": "^1.3.1",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.32.0",
+    "@hiveio/beekeeper": "1.27.12-rc4",
     "@hiveio/wax": "1.27.12-rc1-251007115925",
     "@hiveio/wax-signers-keychain": "1.27.12-rc1-251007115925",
     "@hiveio/wax-signers-metamask": "1.27.12-rc1-251007115925",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e940d8f..9b32868 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@eslint/js':
         specifier: ^9.32.0
         version: 9.32.0
+      '@hiveio/beekeeper':
+        specifier: 1.27.12-rc4
+        version: 1.27.12-rc4
       '@hiveio/wax':
         specifier: 1.27.12-rc1-251007115925
         version: 1.27.12-rc1-251007115925
@@ -381,6 +384,10 @@ packages:
   '@floating-ui/vue@1.1.6':
     resolution: {integrity: sha512-XFlUzGHGv12zbgHNk5FN2mUB7ROul3oG2ENdTpWdE+qMFxyNxWSRmsoyhiEnpmabNm6WnUvR1OvJfUfN4ojC1A==}
 
+  '@hiveio/beekeeper@1.27.12-rc4':
+    resolution: {integrity: sha1-YtBmd/+XM2ymPmOdG77DXGMYsyM=, tarball: https://gitlab.syncad.com/api/v4/projects/198/packages/npm/@hiveio/beekeeper/-/@hiveio/beekeeper-1.27.12-rc4.tgz}
+    engines: {node: ^20.11 || >= 21.2}
+
   '@hiveio/wax-signers-keychain@1.27.12-rc1-251007115925':
     resolution: {integrity: sha1-PPpAvrHqXEB05xZhFJY/B+68Irc=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-keychain/-/@hiveio/wax-signers-keychain-1.27.12-rc1-251007115925.tgz}
 
@@ -2664,6 +2671,8 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@hiveio/beekeeper@1.27.12-rc4': {}
+
   '@hiveio/wax-signers-keychain@1.27.12-rc1-251007115925':
     dependencies:
       '@hiveio/wax': 1.27.12-rc1-251007115925
diff --git a/src/App.vue b/src/App.vue
index 50585c8..fa7c2a1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted, defineAsyncComponent } from 'vue';
-import { Toaster } from 'vue-sonner';
+import { Toaster , toast } from 'vue-sonner';
 
 import AppSidebar from '@/components/navigation';
 import AppHeader from '@/components/navigation/AppHeader.vue';
 import { SidebarProvider } from '@/components/ui/sidebar';
-import type { UsedWallet } from '@/stores/settings.store';
-import { useSettingsStore } from '@/stores/settings.store';
+import HTMProvidePassword from '@/components/wallet/HTMProvidePassword.vue';
+import { UsedWallet , useSettingsStore } from '@/stores/settings.store';
 import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
-import { getWax } from '@/stores/wax.store';
 
 import ErrorDialog from './components/ErrorDialog.vue';
+import { toastError } from './utils/parse-error';
 
 const WalletOnboarding = defineAsyncComponent(() => import('@/components/onboarding/index'));
 
@@ -23,10 +23,11 @@ onMounted(async () => {
   settingsStore.loadSettings();
   hasUser.value = settingsStore.settings.account !== undefined;
   if (hasUser.value) {
-    void walletStore.createWalletFor(settingsStore.settings);
-    const wax = await getWax();
-    const { accounts: [ account ] } = await wax.api.database_api.find_accounts({ accounts: [ settingsStore.settings.account! ], delayed_votes_active: false });
-    void userStore.setUserData(account);
+    walletStore.createWalletFor(settingsStore.settings, 'posting').then(() => {
+      userStore.parseUserData(settingsStore.settings.account!).catch(error => {
+        toast.error(`Failed to load user data: ${(error as Error).message}`);
+      });
+    });
   }
 });
 const complete = async (data: { account: string; wallet: UsedWallet }) => {
@@ -37,10 +38,14 @@ const complete = async (data: { account: string; wallet: UsedWallet }) => {
   };
   walletStore.closeWalletSelectModal();
   settingsStore.setSettings(settings);
-  void walletStore.createWalletFor(settings);
-  const wax = await getWax();
-  const { accounts: [ account ] } = await wax.api.database_api.find_accounts({ accounts: [ settingsStore.settings.account! ], delayed_votes_active: false });
-  void userStore.setUserData(account);
+
+  try {
+    await walletStore.createWalletFor(settings, 'posting');
+
+    await userStore.parseUserData(settingsStore.settings.account!);
+  } catch (error) {
+    toastError('Failed to create wallet', error);
+  }
 };
 </script>
 
@@ -64,6 +69,12 @@ const complete = async (data: { account: string; wallet: UsedWallet }) => {
             @complete="complete"
           />
         </aside>
+        <aside
+          v-if="walletStore.isProvideWalletPasswordModalOpen"
+          class="fixed inset-0 flex items-center justify-center z-20"
+        >
+          <HTMProvidePassword v-if="settingsStore.settings.wallet === UsedWallet.CTOKENS_IMPLEMENTATION" />
+        </aside>
       </SidebarProvider>
       <Toaster
         theme="dark"
diff --git a/src/assets/icons/wallets/ctokens.svg b/src/assets/icons/wallets/ctokens.svg
new file mode 100644
index 0000000..f8037e0
--- /dev/null
+++ b/src/assets/icons/wallets/ctokens.svg
@@ -0,0 +1,9 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg" width="750" height="750" viewBox="0 0 7500 7500">
+  <g fill="rgb(251,165,16)">
+    <g>
+      <path d="M3605 7281 c-45 -7 -82 -18 -140 -40 -11 -5 -54 -25 -95 -46 -41 -21 -85 -43 -97 -49 -13 -6 -23 -14 -23 -18 0 -5 -7 -8 -15 -8 -8 0 -15 -3 -15 -8 0 -4 -17 -15 -37 -25 -21 -10 -58 -31 -83 -46 -25 -16 -51 -30 -57 -30 -7 -1 -13 -5 -13 -11 0 -5 -9 -10 -19 -10 -11 0 -21 -3 -23 -7 -4 -9 -71 -52 -113 -73 -16 -8 -53 -29 -82 -47 -29 -18 -57 -33 -63 -33 -5 0 -10 -4 -10 -8 0 -5 -16 -14 -35 -22 -19 -8 -35 -17 -35 -22 0 -4 -9 -8 -20 -8 -11 0 -20 -3 -20 -7 0 -8 -31 -28 -116 -73 -29 -15 -69 -39 -90 -54 -21 -14 -44 -26 -51 -26 -7 0 -13 -4 -13 -10 0 -5 -9 -10 -20 -10 -11 0 -20 -4 -20 -10 0 -5 -5 -10 -11 -10 -6 0 -23 -8 -37 -19 -15 -10 -48 -30 -73 -43 -77 -43 -94 -53 -99 -58 -4 -4 -39 -24 -95 -54 -11 -6 -22 -13 -25 -16 -3 -3 -18 -12 -35 -20 -16 -8 -53 -29 -82 -47 -29 -18 -57 -33 -63 -33 -5 0 -10 -4 -10 -10 0 -5 -9 -10 -20 -10 -11 0 -20 -4 -20 -10 0 -5 -5 -10 -12 -10 -6 0 -25 -10 -42 -23 -17 -12 -44 -29 -61 -37 -16 -8 -53 -29 -82 -47 -29 -18 -57 -33 -63 -33 -5 0 -10 -4 -10 -8 0 -5 -16 -14 -35 -22 -19 -8 -35 -17 -35 -22 0 -4 -9 -8 -20 -8 -11 0 -20 -4 -20 -8 0 -5 -10 -14 -22 -20 -13 -6 -59 -32 -103 -57 -44 -25 -95 -53 -113 -62 -17 -9 -32 -20 -32 -25 0 -4 -9 -8 -20 -8 -11 0 -20 -4 -20 -9 0 -5 -8 -11 -17 -14 -10 -4 -36 -17 -58 -31 -22 -14 -51 -31 -65 -39 -47 -25 -75 -42 -80 -47 -3 -3 -18 -14 -33 -23 -53 -34 -144 -118 -191 -177 -29 -37 -86 -148 -86 -170 0 -10 -4 -21 -9 -24 -5 -3 -12 -32 -16 -63 -11 -75 -11 -3018 0 -3101 4 -34 11 -65 16 -68 5 -3 9 -16 9 -29 0 -13 5 -27 10 -30 6 -3 10 -13 10 -21 0 -27 85 -147 149 -211 34 -35 65 -63 67 -63 3 0 33 -19 67 -42 34 -24 71 -48 82 -54 77 -42 121 -68 130 -74 10 -8 39 -25 135 -78 25 -14 57 -33 72 -43 14 -11 31 -19 37 -19 6 0 11 -4 11 -10 0 -5 7 -10 15 -10 8 0 39 -16 69 -35 30 -19 60 -35 66 -35 5 0 10 -4 10 -9 0 -5 8 -11 17 -14 10 -4 45 -22 78 -42 33 -20 68 -39 77 -42 10 -3 18 -9 18 -13 0 -4 8 -10 17 -13 10 -4 36 -17 58 -31 22 -14 51 -31 65 -39 100 -56 129 -72 160 -90 19 -12 37 -24 40 -27 3 -3 21 -14 40 -23 19 -10 53 -28 75 -42 22 -13 51 -30 65 -38 55 -31 101 -57 139 -81 22 -15 45 -26 51 -26 5 0 10 -3 10 -8 0 -4 15 -14 33 -21 38 -17 111 -63 115 -73 2 -5 12 -8 23 -8 10 0 19 -4 19 -8 0 -5 16 -14 35 -22 19 -8 35 -17 35 -22 0 -4 5 -8 10 -8 6 0 36 -16 66 -35 30 -19 57 -35 60 -35 3 0 30 -16 60 -35 30 -19 59 -35 64 -35 6 0 10 -3 10 -8 0 -4 15 -14 33 -21 38 -17 111 -63 115 -73 2 -5 12 -8 23 -8 10 0 19 -4 19 -9 0 -5 8 -11 18 -14 9 -4 35 -18 57 -31 22 -14 55 -33 73 -43 17 -9 32 -20 32 -25 0 -4 6 -8 14 -8 8 0 31 -9 53 -20 83 -42 147 -70 163 -70 9 0 20 -4 25 -9 12 -11 92 -22 170 -23 54 -1 116 8 198 28 41 10 255 121 319 165 14 11 31 19 37 19 6 0 11 5 11 10 0 6 9 10 19 10 11 0 21 3 23 8 4 10 86 62 98 62 5 0 10 5 10 10 0 6 9 10 20 10 11 0 20 5 20 10 0 6 7 10 15 10 8 0 15 4 15 9 0 5 8 11 18 14 9 3 40 19 67 35 28 16 61 35 75 43 14 8 27 16 30 19 3 3 25 18 50 32 62 36 120 69 150 85 14 8 43 25 65 39 22 14 48 27 58 31 9 3 17 9 17 14 0 5 9 9 19 9 11 0 21 4 23 8 3 8 124 82 134 82 3 0 30 16 60 35 30 19 59 35 64 35 6 0 10 5 10 10 0 6 9 10 20 10 11 0 20 4 20 8 0 5 18 18 41 30 73 39 104 57 109 63 3 3 20 12 38 20 17 8 32 17 32 20 0 4 8 9 18 13 9 3 33 15 52 27 19 12 64 38 100 57 36 19 77 43 92 53 14 11 31 19 37 19 6 0 11 5 11 10 0 6 9 10 19 10 11 0 21 3 23 8 5 12 128 82 144 82 8 0 14 5 14 10 0 6 5 10 11 10 6 0 23 8 37 19 15 10 48 30 73 43 80 45 94 53 99 59 3 3 12 9 20 12 8 4 33 18 55 32 22 14 47 28 55 32 80 36 310 212 310 238 0 6 51 86 60 95 13 13 30 52 30 70 0 11 4 20 9 20 5 0 12 19 16 43 10 56 11 3194 1 3232 -7 28 -14 45 -40 105 -41 94 -116 185 -211 255 -22 17 -41 33 -43 38 -2 4 -8 7 -12 7 -13 0 -134 72 -138 82 -2 4 -12 8 -23 8 -10 0 -19 5 -19 10 0 6 -7 10 -15 10 -8 0 -15 5 -15 10 0 6 -9 10 -20 10 -11 0 -20 4 -20 9 0 5 -8 11 -17 14 -18 6 -94 48 -103 57 -3 3 -18 12 -35 20 -16 8 -54 29 -83 47 -29 18 -57 33 -62 33 -6 0 -10 3 -10 8 0 4 -15 14 -32 21 -18 8 -62 33 -98 55 -36 23 -91 55 -122 71 -32 16 -58 32 -58 35 0 4 -16 12 -35 20 -19 8 -35 16 -35 19 0 4 -15 13 -32 20 -32 14 -91 51 -115 71 -7 5 -17 10 -22 10 -10 0 -132 69 -141 80 -3 3 -21 14 -40 23 -19 10 -53 28 -75 42 -22 14 -48 28 -57 31 -10 4 -18 10 -18 15 0 5 -9 9 -20 9 -11 0 -20 5 -20 10 0 6 -4 10 -10 10 -5 0 -40 19 -77 43 -38 23 -81 49 -98 57 -16 8 -53 29 -82 47 -29 18 -57 33 -63 33 -5 0 -10 3 -10 8 0 4 -10 12 -23 18 -38 18 -121 66 -149 85 -14 11 -31 19 -37 19 -6 0 -11 5 -11 10 0 6 -5 10 -10 10 -6 0 -34 15 -63 33 -29 18 -65 39 -82 47 -33 16 -107 62 -115 70 -3 4 -21 14 -40 23 -19 10 -53 28 -75 42 -22 13 -55 32 -72 41 -18 9 -33 20 -33 25 0 5 -8 9 -18 9 -10 0 -22 4 -27 9 -6 5 -44 20 -85 34 -83 28 -198 39 -275 28z m220 -511 c3 -5 14 -10 24 -10 21 0 78 -27 86 -41 4 -5 15 -9 26 -9 10 0 19 -4 19 -9 0 -5 8 -11 18 -14 9 -4 40 -20 67 -37 28 -17 60 -36 73 -42 12 -6 22 -15 22 -20 0 -4 9 -8 20 -8 11 0 20 -4 20 -10 0 -5 5 -10 10 -10 10 0 90 -48 100 -61 3 -3 20 -12 38 -20 17 -8 32 -17 32 -21 0 -5 4 -8 9 -8 13 0 135 -73 139 -82 2 -5 10 -8 19 -8 8 0 33 -13 56 -29 23 -15 65 -41 92 -56 28 -15 70 -39 95 -53 25 -14 57 -33 72 -43 14 -11 31 -19 37 -19 6 0 11 -4 11 -10 0 -5 6 -10 13 -11 6 0 32 -14 57 -30 25 -15 62 -36 83 -46 20 -10 37 -21 37 -25 0 -5 4 -8 10 -8 5 0 41 -20 80 -45 39 -25 72 -45 74 -45 9 0 131 -75 134 -82 2 -5 12 -8 23 -8 10 0 19 -4 19 -9 0 -5 8 -11 18 -14 9 -4 35 -18 57 -32 22 -14 48 -28 58 -31 9 -4 17 -9 17 -13 0 -4 16 -13 35 -21 19 -8 35 -16 35 -19 0 -3 18 -15 40 -25 22 -10 48 -27 59 -37 11 -11 25 -19 30 -19 12 0 75 -34 116 -64 16 -11 48 -30 70 -42 70 -37 88 -48 165 -100 126 -86 250 -221 250 -273 0 -11 5 -23 10 -26 7 -4 10 -492 10 -1430 l0 -1424 -26 -48 c-25 -47 -150 -182 -168 -183 -6 0 -19 -9 -30 -19 -12 -10 -50 -34 -86 -53 -36 -19 -83 -46 -105 -59 -22 -14 -56 -33 -75 -42 -19 -10 -53 -28 -75 -42 -22 -14 -48 -28 -57 -31 -10 -4 -18 -9 -18 -13 0 -4 -16 -13 -35 -21 -19 -8 -35 -17 -35 -22 0 -4 -9 -8 -19 -8 -11 0 -21 -4 -23 -8 -3 -8 -124 -82 -133 -82 -3 0 -29 -16 -59 -35 -30 -19 -60 -35 -66 -35 -5 0 -10 -4 -10 -10 0 -5 -9 -10 -20 -10 -11 0 -20 -4 -20 -10 0 -5 -5 -10 -11 -10 -6 0 -23 -8 -37 -19 -15 -10 -47 -29 -72 -43 -90 -50 -124 -70 -174 -101 -28 -18 -64 -39 -81 -47 -16 -8 -53 -29 -82 -47 -29 -18 -57 -33 -63 -33 -5 0 -10 -4 -10 -10 0 -5 -9 -10 -20 -10 -11 0 -20 -4 -20 -10 0 -5 -4 -10 -10 -10 -5 0 -34 -16 -64 -35 -30 -19 -62 -35 -71 -35 -8 0 -15 -4 -15 -8 0 -5 -17 -17 -37 -28 -34 -18 -86 -47 -154 -85 -13 -8 -26 -16 -29 -19 -6 -6 -50 -31 -111 -62 -24 -13 -45 -26 -47 -30 -2 -5 -12 -8 -22 -8 -10 0 -20 -3 -22 -7 -4 -9 -70 -52 -113 -73 -16 -8 -32 -17 -35 -20 -8 -8 -69 -41 -135 -73 -33 -16 -68 -33 -77 -38 -10 -5 -26 -9 -36 -9 -10 0 -24 -6 -30 -13 -9 -8 -45 -12 -110 -12 -80 1 -105 5 -141 23 -25 12 -48 22 -53 22 -4 0 -42 20 -84 45 -41 25 -80 45 -85 45 -5 0 -9 5 -9 10 0 6 -7 10 -15 10 -8 0 -15 5 -15 10 0 6 -9 10 -20 10 -11 0 -20 5 -20 10 0 6 -5 10 -12 10 -6 0 -19 6 -27 14 -9 7 -47 30 -86 51 -38 21 -82 46 -97 56 -14 11 -31 19 -37 19 -6 0 -11 5 -11 10 0 6 -9 10 -20 10 -11 0 -20 4 -20 9 0 5 -8 11 -17 14 -10 4 -36 17 -58 31 -22 14 -58 35 -80 46 -22 11 -58 31 -80 45 -22 14 -48 28 -57 31 -10 4 -18 9 -18 13 0 4 -16 13 -35 21 -19 8 -35 17 -35 22 0 4 -9 8 -20 8 -11 0 -20 4 -20 9 0 5 -8 11 -17 15 -10 3 -34 15 -53 27 -19 12 -57 34 -85 49 -87 47 -115 65 -115 73 0 4 -9 7 -20 7 -11 0 -20 3 -20 8 0 4 -15 13 -32 21 -18 8 -44 22 -58 31 -14 10 -54 33 -90 52 -36 19 -84 47 -107 61 -24 15 -47 27 -53 27 -5 0 -10 3 -10 8 0 4 -15 13 -32 21 -18 8 -35 17 -38 20 -3 3 -21 14 -40 25 -19 10 -51 28 -70 39 -19 11 -55 31 -80 45 -25 14 -56 32 -70 41 -14 9 -38 23 -55 31 -16 8 -54 29 -83 47 -29 18 -57 33 -62 33 -6 0 -10 5 -10 10 0 6 -9 10 -20 10 -11 0 -20 5 -20 10 0 6 -5 10 -10 10 -10 0 -71 37 -115 70 -11 8 -46 41 -77 73 -53 53 -64 71 -97 150 -8 20 -11 403 -11 1429 l0 1402 21 60 c12 34 28 68 35 77 8 8 14 20 14 25 0 25 151 154 179 154 6 0 11 5 11 10 0 6 7 10 15 10 8 0 15 4 15 9 0 5 8 11 18 14 9 3 40 19 67 35 28 16 73 42 100 57 28 16 68 39 90 52 22 13 48 26 57 30 10 3 18 9 18 14 0 5 5 9 10 9 6 0 36 16 66 35 30 19 56 35 59 35 2 0 39 20 81 45 41 25 80 45 85 45 5 0 9 4 9 8 0 5 16 14 35 22 19 8 35 17 35 22 0 4 4 8 9 8 5 0 44 20 85 45 42 25 79 45 82 45 3 0 20 11 37 24 18 13 47 29 65 37 17 8 32 17 32 21 0 5 7 8 15 8 9 0 24 8 35 18 10 9 45 31 77 47 32 17 60 33 61 38 2 4 8 7 13 7 5 0 32 15 61 33 29 19 68 40 86 48 17 8 32 17 32 20 0 4 8 9 18 12 9 3 44 22 77 42 33 20 68 38 78 42 9 3 17 9 17 14 0 5 4 9 10 9 5 0 33 15 62 33 87 53 112 67 131 73 9 4 17 9 17 13 0 4 26 20 58 36 31 17 59 33 60 38 2 4 7 7 12 7 12 0 134 73 138 82 2 5 12 8 23 8 10 0 19 4 19 9 0 5 8 11 18 14 9 3 41 20 70 36 29 17 62 31 72 31 11 0 20 5 20 10 0 6 51 10 134 10 79 0 137 -4 141 -10z"></path>
+      <path d="M2115 5268 c-38 -11 -82 -22 -97 -25 -16 -3 -28 -9 -28 -14 0 -5 -8 -9 -18 -9 -28 0 -179 -120 -222 -177 -50 -67 -90 -139 -90 -163 0 -10 -4 -21 -9 -24 -24 -15 -38 -244 -21 -326 7 -30 16 -64 20 -75 19 -50 57 -123 80 -155 37 -51 140 -150 156 -150 8 0 14 -4 14 -8 0 -5 26 -21 58 -37 31 -15 65 -32 74 -36 10 -5 29 -9 42 -9 14 0 28 -4 31 -10 4 -6 67 -10 156 -10 141 0 149 -1 149 -19 0 -11 5 -23 10 -26 6 -3 10 -15 10 -26 0 -10 3 -19 8 -19 4 0 16 -20 27 -45 11 -25 23 -45 27 -45 5 0 8 -9 8 -20 0 -11 5 -20 10 -20 6 0 10 -7 10 -15 0 -9 16 -41 35 -71 19 -30 35 -59 35 -64 0 -6 5 -10 10 -10 6 0 10 -9 10 -20 0 -11 5 -20 10 -20 6 0 10 -5 10 -11 0 -6 8 -23 19 -37 10 -15 29 -47 43 -72 14 -25 35 -63 48 -85 12 -22 37 -67 55 -100 18 -33 42 -78 55 -100 29 -52 90 -164 104 -192 6 -13 14 -23 17 -23 3 0 14 -20 25 -45 10 -25 22 -45 26 -45 4 0 8 -4 8 -10 0 -5 17 -35 38 -66 20 -31 45 -70 55 -87 10 -16 24 -36 33 -44 31 -32 36 -52 17 -83 -9 -17 -21 -30 -25 -30 -4 0 -8 -9 -8 -20 0 -11 -3 -20 -8 -20 -9 0 -37 -64 -64 -143 -30 -93 -18 -332 21 -405 6 -9 16 -32 23 -49 7 -18 16 -33 20 -33 5 0 8 -7 8 -15 0 -8 5 -15 10 -15 6 0 10 -6 10 -12 0 -11 82 -99 130 -140 45 -38 168 -98 235 -114 53 -12 247 -16 258 -5 6 6 24 11 40 11 25 0 173 63 187 79 3 3 23 19 45 35 22 17 51 43 65 60 14 16 34 39 45 51 23 24 40 52 68 110 10 22 25 53 33 68 8 16 14 41 14 57 0 16 4 32 10 35 6 4 10 55 10 120 0 65 -4 116 -10 120 -5 3 -10 19 -10 34 0 15 -8 45 -19 67 -10 21 -27 57 -37 79 -10 22 -26 49 -36 59 -24 26 -23 67 2 94 11 12 20 24 20 28 0 3 15 27 34 53 19 25 43 62 54 82 42 75 47 84 58 99 7 8 21 32 33 53 12 20 29 52 39 70 58 101 78 138 108 195 46 85 58 106 64 112 3 3 19 32 36 65 17 33 51 98 76 145 25 47 58 110 74 140 16 30 32 57 36 58 5 2 8 12 8 23 0 10 5 19 10 19 6 0 10 6 10 13 0 6 15 44 34 82 19 39 37 78 40 88 5 15 21 17 155 17 89 0 152 4 156 10 3 6 17 10 31 10 13 0 64 21 112 46 120 63 230 177 281 289 7 17 17 38 22 47 5 10 9 28 9 41 0 13 5 28 11 34 11 11 7 256 -5 308 -14 56 -62 159 -83 176 -7 6 -13 17 -13 24 0 13 -108 125 -121 125 -4 0 -14 7 -23 15 -20 20 -124 75 -142 75 -8 0 -22 4 -32 9 -29 16 -149 41 -194 41 -24 0 -77 -10 -118 -21 -41 -12 -87 -24 -102 -26 -16 -3 -28 -9 -28 -14 0 -5 -7 -9 -15 -9 -14 0 -54 -18 -65 -30 -3 -3 -29 -23 -57 -44 -65 -47 -173 -184 -173 -221 0 -8 -4 -15 -10 -15 -5 0 -10 -9 -10 -19 0 -11 -4 -22 -9 -25 -15 -10 -23 -85 -23 -211 -1 -123 7 -191 23 -201 5 -3 9 -13 9 -22 0 -24 48 -115 82 -154 35 -42 35 -75 0 -113 -15 -16 -37 -45 -47 -62 -11 -18 -23 -33 -27 -33 -4 0 -8 -5 -8 -11 0 -5 -19 -38 -42 -72 -52 -76 -77 -117 -84 -139 -4 -10 -10 -18 -14 -18 -4 0 -10 -8 -14 -17 -3 -10 -15 -34 -27 -53 -12 -19 -34 -57 -49 -85 -47 -87 -65 -115 -72 -115 -5 0 -8 -9 -8 -20 0 -11 -4 -20 -10 -20 -5 0 -10 -9 -10 -20 0 -11 -3 -20 -7 -20 -5 0 -13 -10 -19 -23 -28 -58 -70 -132 -76 -135 -5 -2 -8 -12 -8 -23 0 -10 -3 -19 -7 -19 -5 0 -17 -19 -28 -43 -11 -23 -22 -44 -25 -47 -3 -3 -14 -23 -24 -45 -42 -93 -82 -170 -88 -173 -5 -2 -8 -12 -8 -22 0 -10 -4 -22 -10 -25 -5 -3 -10 -17 -10 -30 0 -13 -8 -28 -17 -34 -17 -8 -97 -1 -141 13 -9 3 -58 -1 -107 -9 -117 -19 -134 -19 -141 3 -4 9 -15 37 -26 62 -11 25 -27 61 -35 80 -27 61 -82 173 -113 228 -17 29 -30 60 -30 67 0 8 -4 15 -10 15 -5 0 -10 5 -10 11 0 6 -8 23 -19 37 -10 15 -34 56 -53 92 -19 36 -45 81 -56 100 -12 19 -30 52 -39 73 -10 20 -21 37 -25 37 -5 0 -8 7 -8 15 0 8 -4 15 -10 15 -5 0 -10 9 -10 19 0 11 -3 21 -7 23 -9 4 -52 70 -73 113 -8 17 -18 32 -21 35 -12 10 -79 121 -79 130 0 6 -4 10 -10 10 -5 0 -10 5 -10 12 0 11 -39 67 -87 126 -28 34 -29 56 -2 93 28 40 89 158 89 173 0 6 6 24 13 39 l12 27 305 0 c168 0 488 2 712 3 l408 2 25 27 c33 36 34 108 3 169 -23 42 -88 119 -101 119 -4 0 -24 11 -45 24 -20 12 -53 27 -72 31 -19 5 -310 10 -646 12 l-612 3 -17 33 c-29 57 -41 76 -58 95 -10 10 -17 22 -17 25 0 14 -56 70 -105 105 -27 20 -51 40 -53 44 -2 5 -12 8 -23 8 -10 0 -19 5 -19 10 0 6 -9 10 -19 10 -11 0 -22 4 -25 9 -3 5 -16 11 -28 14 -13 3 -60 15 -106 26 -99 25 -144 25 -237 -1z"></path>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/onboarding/OnboardingWalletButton.vue b/src/components/onboarding/OnboardingWalletButton.vue
index 8015b6a..87a1a34 100644
--- a/src/components/onboarding/OnboardingWalletButton.vue
+++ b/src/components/onboarding/OnboardingWalletButton.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   name: string;
   description: string;
   disabled?: boolean;
-  downloadUrl: string;
+  downloadUrl?: string;
   downloadUrlTriggersClick?: boolean;
 }>();
 
@@ -37,6 +37,7 @@ const emit = defineEmits(['click']);
       </div>
     </Button>
     <TooltipProvider
+      v-if="props.downloadUrl"
       :delay-duration="200"
       disable-hoverable-content
     >
diff --git a/src/components/onboarding/SelectWallet.vue b/src/components/onboarding/SelectWallet.vue
index 1c4f637..60d59a5 100644
--- a/src/components/onboarding/SelectWallet.vue
+++ b/src/components/onboarding/SelectWallet.vue
@@ -59,6 +59,13 @@ const close = () => {
         description="Use your derived keys"
         @click="useWallet(UsedWallet.METAMASK)"
       />
+      <OnboardingButton
+        :disabled="!walletsStatus.ctokens"
+        :logo-url="getWalletIcon(UsedWallet.CTOKENS_IMPLEMENTATION)"
+        name="Hive Token Machine"
+        description="Use your HTM wallet"
+        @click="useWallet(UsedWallet.CTOKENS_IMPLEMENTATION)"
+      />
       <OnboardingButton
         download-url="https://hive-keychain.com/"
         :disabled="!walletsStatus.keychain"
diff --git a/src/components/onboarding/ThankYou.vue b/src/components/onboarding/ThankYou.vue
index 77bc925..d5a115b 100644
--- a/src/components/onboarding/ThankYou.vue
+++ b/src/components/onboarding/ThankYou.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import { mdiClose } from '@mdi/js';
+import { computed } from 'vue';
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import type { UsedWallet } from '@/stores/settings.store';
 import { getWalletIcon, stringifyWalletName } from '@/stores/settings.store';
+import { useUserStore } from '@/stores/user.store';
+
+const userStore = useUserStore();
 
 const emit = defineEmits(['close']);
 
@@ -13,6 +17,10 @@ const props = defineProps<{
   wallet: UsedWallet;
 }>();
 
+const account = computed(() => {
+  return userStore.transformUserName(props.account);
+});
+
 const stringifiedWallet = stringifyWalletName(props.wallet);
 
 const close = () => {
@@ -44,7 +52,7 @@ const close = () => {
           style="fill: hsl(var(--foreground))"
           :d="mdiClose"
         /></svg>
-        <span class="text-lg font-bold">@{{ props.account }}</span>
+        <span class="text-lg font-bold">{{ account }}</span>
       </div>
     </CardContent>
     <CardFooter class="flex justify-center">
diff --git a/src/components/onboarding/WalletOnboarding.vue b/src/components/onboarding/WalletOnboarding.vue
index 1759f6f..a0086b5 100644
--- a/src/components/onboarding/WalletOnboarding.vue
+++ b/src/components/onboarding/WalletOnboarding.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 
 import SelectWallet from '@/components/onboarding/SelectWallet.vue';
 import ThankYou from '@/components/onboarding/ThankYou.vue';
+import HTMConnect from '@/components/onboarding/wallets/htm/HTMConnect.vue';
 import KeychainConnect from '@/components/onboarding/wallets/keychain/KeychainConnect.vue';
 import MetamaskConnect from '@/components/onboarding/wallets/metamask/MetamaskConnect.vue';
 import PeakVaultConnect from '@/components/onboarding/wallets/peakvault/PeakVaultConnect.vue';
@@ -71,6 +72,11 @@ const backToStage1 = () => {
           @close="backToStage1"
           @setaccount="setAccount"
         />
+        <HTMConnect
+          v-if="selectedWallet === UsedWallet.CTOKENS_IMPLEMENTATION"
+          @close="backToStage1"
+          @setaccount="setAccount"
+        />
       </div>
       <ThankYou
         v-if="stage_3_thank_you"
diff --git a/src/components/onboarding/wallets/htm/HTMConnect.vue b/src/components/onboarding/wallets/htm/HTMConnect.vue
new file mode 100644
index 0000000..47349ce
--- /dev/null
+++ b/src/components/onboarding/wallets/htm/HTMConnect.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { mdiClose } from '@mdi/js';
+import { ref } from 'vue';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { UsedWallet, getWalletIcon } from '@/stores/settings.store';
+import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+const emit = defineEmits(['setaccount', 'close']);
+
+const close = () => {
+  emit('close');
+};
+
+const isLoading = ref(false);
+
+const managementKey = ref('');
+const operationalKey = ref('');
+const password = ref('');
+const repeatPassword = ref('');
+
+const connect = async () => {
+  try {
+    if (password.value !== repeatPassword.value) {
+      toastError('Failed to connect to HTM', 'The provided passwords do not match');
+
+      return;
+    }
+
+    isLoading.value = true;
+
+    const { operational } = await CTokensProvider.createWallet(password.value, operationalKey.value, managementKey.value.length === 0 ? undefined : managementKey.value);
+
+    const wax = await getWax();
+
+    const users = await wax.restApi.ctokensApi.registeredUsers({ user: operational });
+    if (users.length === 0) {
+      toastError('Failed to connect to HTM', 'The provided operational key is not registered in HTM');
+
+      return;
+    }
+
+    await CTokensProvider.login(password.value);
+
+    emit('setaccount', operational);
+  } catch (error) {
+    toastError('Failed to connect to HTM', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+</script>
+
+<template>
+  <Card class="w-[350px]">
+    <CardHeader>
+      <CardTitle>
+        <div class="inline-flex justify-between w-full">
+          <div class="inline-flex items-center">
+            <img
+              :src="getWalletIcon(UsedWallet.CTOKENS_IMPLEMENTATION)"
+              class="w-[20px] mr-2"
+            >
+            <span class="mt-[2px]">HTM Connector</span>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            class="px-2"
+            @click="close"
+          >
+            <svg
+              width="24"
+              height="24"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            ><path
+              style="fill: hsl(var(--foreground))"
+              :d="mdiClose"
+            /></svg>
+          </Button>
+        </div>
+      </CardTitle>
+      <CardDescription>Follow these instructions to connect to Hive Token Machine</CardDescription>
+    </CardHeader>
+    <CardContent class="text-sm space-y-4">
+      <div class="space-y-4">
+        <p>Step 1: Provide your login credentials:</p>
+
+        <div class="space-y-2">
+          <div class="space-y-1">
+            <Label for="operationalKey">Operational Private Key</Label>
+            <Input
+              id="operationalKey"
+              v-model="operationalKey"
+              type="text"
+              placeholder="Enter your operational key"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="managementKey">Management Private Key (optional)</Label>
+            <Input
+              id="managementKey"
+              v-model="managementKey"
+              type="text"
+              placeholder="Enter your management key"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="password">Password</Label>
+            <Input
+              id="password"
+              v-model="password"
+              type="password"
+              placeholder="Enter a password to encrypt the wallet"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="repeatPassword">Repeat Password</Label>
+            <Input
+              id="repeatPassword"
+              v-model="repeatPassword"
+              type="password"
+              placeholder="Repeat the password"
+            />
+          </div>
+        </div>
+
+        <p>Step 2: Click this button to verify your configuration and connect to the wallet:</p>
+        <div class="flex justify-center">
+          <Button
+            :disabled="isLoading"
+            variant="outline"
+            size="lg"
+            class="px-8 py-4 border-[#FBA510] border-[2px]"
+            @click="connect"
+          >
+            <span class="text-md font-bold">Connect</span>
+          </Button>
+        </div>
+      </div>
+    </CardContent>
+    <CardFooter />
+  </Card>
+</template>
diff --git a/src/components/utilcards/AccountDetailsCard.vue b/src/components/utilcards/AccountDetailsCard.vue
index 0cf8418..dc0e669 100644
--- a/src/components/utilcards/AccountDetailsCard.vue
+++ b/src/components/utilcards/AccountDetailsCard.vue
@@ -62,7 +62,7 @@ const rcPercentage = computed(() => {
                 v-if="userStore.profileImage"
                 :src="userStore.profileImage"
               />
-              <AvatarFallback>{{ settingsStore.settings.account?.slice(0, 12) }}</AvatarFallback>
+              <AvatarFallback>{{ userStore.userDisplayName }}</AvatarFallback>
             </Avatar>
             <Skeleton
               v-else
@@ -74,7 +74,7 @@ const rcPercentage = computed(() => {
               v-if="userStore.isReady"
               class="inline-flex items-center text-lg/3 font-bold"
             >
-              <span>{{ userStore.name }}</span>
+              <span>{{ userStore.userDisplayName }}</span>
               <a
                 v-if="userStore.website"
                 :href="userStore.website"
diff --git a/src/components/wallet/HTMProvidePassword.vue b/src/components/wallet/HTMProvidePassword.vue
new file mode 100644
index 0000000..d4e55d8
--- /dev/null
+++ b/src/components/wallet/HTMProvidePassword.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { mdiClose } from '@mdi/js';
+import { ref } from 'vue';
+import { toast } from 'vue-sonner';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { UsedWallet, getWalletIcon, useSettingsStore } from '@/stores/settings.store';
+import { useUserStore } from '@/stores/user.store';
+import { useWalletStore } from '@/stores/wallet.store';
+import { toastError } from '@/utils/parse-error';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+const walletStore = useWalletStore();
+const userStore = useUserStore();
+const settingsStore = useSettingsStore();
+
+const isLoading = ref(false);
+
+const close = () => {
+  walletStore.isProvideWalletPasswordModalOpen = false;
+};
+
+const password = ref('');
+
+const connect = async () => {
+  try {
+    isLoading.value = true;
+
+    await CTokensProvider.login(password.value);
+
+    try {
+      await walletStore.createWalletFor(settingsStore.settings, 'posting');
+
+      await userStore.parseUserData(settingsStore.settings.account!);
+    } catch (error) {
+      toastError('Failed to create wallet', error);
+    }
+
+    toast.success('Logged in successfully!');
+
+    close();
+  } catch (error) {
+    toastError('Failed to connect to HTM', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="bg-black/30 backdrop-blur-sm h-full w-full z-50 flex items-center justify-center">
+    <div class="onboarding-container">
+      <Card class="w-[350px]">
+        <CardHeader>
+          <CardTitle>
+            <div class="inline-flex justify-between w-full">
+              <div class="inline-flex items-center">
+                <img
+                  :src="getWalletIcon(UsedWallet.CTOKENS_IMPLEMENTATION)"
+                  class="w-[20px] mr-2"
+                >
+                <span class="mt-[2px]">HTM Connector</span>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                class="px-2"
+                @click="close"
+              >
+                <svg
+                  width="24"
+                  height="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                ><path
+                  style="fill: hsl(var(--foreground))"
+                  :d="mdiClose"
+                /></svg>
+              </Button>
+            </div>
+          </CardTitle>
+          <CardDescription>Follow these instructions to log into Hive Token Machine wallet</CardDescription>
+        </CardHeader>
+        <CardContent class="text-sm space-y-4">
+          <div class="space-y-4">
+            <p>Provide your HTM wallet password:</p>
+
+            <div class="space-y-2">
+              <div class="space-y-1">
+                <Label for="password">Password</Label>
+                <Input
+                  id="password"
+                  v-model="password"
+                  type="password"
+                  placeholder="Enter a password to encrypt the wallet"
+                />
+              </div>
+            </div>
+
+            <div class="flex justify-center">
+              <Button
+                :disabled="isLoading"
+                variant="outline"
+                size="lg"
+                class="px-8 py-4 border-[#FBA510] border-[2px]"
+                @click="connect"
+              >
+                <span class="text-md font-bold">Connect</span>
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter />
+      </Card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.onboarding-container {
+  max-height: 90vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+</style>
diff --git a/src/stores/settings.store.ts b/src/stores/settings.store.ts
index 62fab80..890db6a 100644
--- a/src/stores/settings.store.ts
+++ b/src/stores/settings.store.ts
@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 
+import cTokensLogoUrl from '@/assets/icons/wallets/ctokens.svg';
 import keychainLogoUrl from '@/assets/icons/wallets/keychain.svg';
 import metamaskLogoUrl from '@/assets/icons/wallets/metamask.svg';
 import peakVaultLogoUrl from '@/assets/icons/wallets/peakvault.svg';
@@ -7,7 +8,8 @@ import peakVaultLogoUrl from '@/assets/icons/wallets/peakvault.svg';
 export enum UsedWallet {
   METAMASK,
   KEYCHAIN,
-  PEAKVAULT
+  PEAKVAULT,
+  CTOKENS_IMPLEMENTATION
 }
 
 export const stringifyWalletName = (wallet: UsedWallet) => {
@@ -18,6 +20,8 @@ export const stringifyWalletName = (wallet: UsedWallet) => {
     return 'Keychain';
   case UsedWallet.PEAKVAULT:
     return 'PeakVault';
+  case UsedWallet.CTOKENS_IMPLEMENTATION:
+    return 'cTokens';
   }
 };
 
@@ -29,6 +33,8 @@ export const getWalletIcon = (wallet: UsedWallet) => {
     return keychainLogoUrl;
   case UsedWallet.PEAKVAULT:
     return peakVaultLogoUrl;
+  case UsedWallet.CTOKENS_IMPLEMENTATION:
+    return cTokensLogoUrl;
   }
 };
 
diff --git a/src/stores/user.store.ts b/src/stores/user.store.ts
index 4d49a07..3235ee5 100644
--- a/src/stores/user.store.ts
+++ b/src/stores/user.store.ts
@@ -82,12 +82,12 @@ export const useUserStore = defineStore('user', {
     parsedPostingJsonMetadata: undefined as undefined | JsonMetadata,
     parsedJsonMetadata: undefined as undefined | JsonMetadata,
     balances: undefined as undefined | AssetBalances,
-    userData: undefined as undefined | ApiAccount,
-    manabars: undefined as undefined | Manabars
+    manabars: undefined as undefined | Manabars,
+    userDisplayName: undefined as undefined | string
   }),
   getters: {
     profileImage: (ctx): undefined | string => ctx.isReady ? ctx.parsedPostingJsonMetadata?.profile?.profile_image || ctx.parsedJsonMetadata?.profile?.profile_image : undefined,
-    name: (ctx): undefined | string => ctx.isReady ? ctx.parsedPostingJsonMetadata?.profile?.name || ctx.parsedJsonMetadata?.profile?.name || ctx.userData?.name : undefined,
+    name: (ctx): undefined | string => ctx.isReady ? ctx.parsedPostingJsonMetadata?.profile?.name || ctx.parsedJsonMetadata?.profile?.name || ctx.userDisplayName : undefined,
     about: (ctx): undefined | string => ctx.isReady ? ctx.parsedPostingJsonMetadata?.profile?.about || ctx.parsedJsonMetadata?.profile?.about : undefined,
     website: (ctx): undefined | string => ctx.isReady ? ctx.parsedPostingJsonMetadata?.profile?.website || ctx.parsedJsonMetadata?.profile?.website : undefined
   },
@@ -96,17 +96,24 @@ export const useUserStore = defineStore('user', {
     resetSettings () {
       this.isReady = false;
       this.parsedPostingJsonMetadata = undefined;
-      this.userData = undefined;
       this.balances = undefined;
       this.manabars = undefined;
+      this.userDisplayName = undefined;
+    },
+    async getHivePrice () {
+      const wax = await getWax();
+
+      const { base, quote } = await wax.api.database_api.get_current_price_feed({});
+      const hivePrice = Number(base.amount) / Number(quote.amount);
+
+      return hivePrice;
     },
     async parseUserBalances (data: ApiAccount) {
       try {
         const wax = await getWax();
         const { total_vesting_fund_hive, total_vesting_shares, downvote_pool_percent, time } = await wax.api.database_api.get_dynamic_global_properties({});
-        const { base, quote } = await wax.api.database_api.get_current_price_feed({});
-        const hivePrice = Number(base.amount) / Number(quote.amount);
         const vestsToHp = (data: bigint) => BigInt(wax.vestsToHp(data, total_vesting_fund_hive, total_vesting_shares).amount);
+        const hivePrice = await this.getHivePrice();
         this.balances = {
           HP: {
             owned: new BalanceData(vestsToHp(BigInt(data.vesting_shares.amount) - BigInt(data.delegated_vesting_shares.amount)), data.balance.precision, hivePrice),
@@ -147,17 +154,92 @@ export const useUserStore = defineStore('user', {
         console.error('Error fetching prices:', error);
       }
     },
-    setUserData (data: ApiAccount) {
-      this.userData = data;
+    transformUserName (name: string): string {
+      if (name.startsWith('STM'))
+        return name.slice(0, 15) + '...';
+
+
+      if (name.length > 15)
+        return `@${name.slice(0, 15)}...`;
+
+
+      return `@${name}`;
+    },
+    async parseCTokenData (accountName: string) {
+      const wax = await getWax();
+
+      const [ user ] = await wax.restApi.ctokensApi.registeredUsers({ user: accountName });
+
+      if (!user)
+        throw new Error('CTokens user not found');
+
+
+      const hivePrice = await this.getHivePrice();
+
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+      const metadata = user.metadata as Record<string, any>;
+
+      this.parsedJsonMetadata = {
+        profile: {
+          about: metadata?.about,
+          name: metadata?.name,
+          profile_image: metadata?.profile_image,
+          website: metadata?.website
+        }
+      };
+      this.balances = {
+        HBD: {
+          liquid: new BalanceData(0n, wax.ASSETS.HBD.precision, 1),
+          savings: new BalanceData(0n, wax.ASSETS.HBD.precision, 1),
+          unclaimed: new BalanceData(0n, wax.ASSETS.HBD.precision, 1)
+        },
+        HIVE: {
+          liquid: new BalanceData(0n, wax.ASSETS.HIVE.precision, hivePrice),
+          savings: new BalanceData(0n, wax.ASSETS.HIVE.precision, hivePrice),
+          unclaimed: new BalanceData(0n, wax.ASSETS.HIVE.precision, hivePrice)
+        },
+        HP: {
+          poweringDown: new BalanceData(0n, wax.ASSETS.HIVE.precision, hivePrice),
+          unclaimed: new BalanceData(0n, wax.ASSETS.HIVE.precision, hivePrice),
+          owned: new BalanceData(0n, wax.ASSETS.HIVE.precision, hivePrice),
+          received: new BalanceData(0n, wax.ASSETS.HIVE.precision, hivePrice),
+          delegated: new BalanceData(0n, wax.ASSETS.HIVE.precision, hivePrice)
+        }
+      };
+      this.manabars = {
+        downvote: {
+          current: 0n, max: 0n, percent: 0
+        },
+        rc: {
+          current: 0n, max: 0n, percent: 0
+        },
+        upvote: {
+          current: 0n, max: 0n, percent: 0
+        }
+      };
+    },
+    async parseUserData (accountName: string) {
+      this.userDisplayName = this.transformUserName(accountName);
+
+      if (accountName.startsWith('STM'))
+        await this.parseCTokenData(accountName);
+      else
+        await this.parseOnChainUserData(accountName);
+
+      this.isReady = true;
+    },
+    async parseOnChainUserData (accountName: string) {
+      const wax = await getWax();
+
+      const { accounts: [ data ] } = await wax.api.database_api.find_accounts({ accounts: [ accountName ], delayed_votes_active: false });
       try {
         this.parsedJsonMetadata = JSON.parse(data.json_metadata);
       } catch {}
       try {
         this.parsedPostingJsonMetadata = JSON.parse(data.posting_json_metadata);
       } catch {}
-      this.parseUserBalances(data).finally(() => {
-        this.isReady = true;
-      });
+
+      await this.parseUserBalances(data);
     },
     async getAccountMetadata (accountName: string) {
       const wax = await getWax();
diff --git a/src/stores/wallet.store.ts b/src/stores/wallet.store.ts
index 2de3a9e..9534725 100644
--- a/src/stores/wallet.store.ts
+++ b/src/stores/wallet.store.ts
@@ -1,14 +1,17 @@
-import type { TRole } from '@hiveio/wax/vite';
+import type { AEncryptionProvider, TRole } from '@hiveio/wax/vite';
 import KeychainProvider from '@hiveio/wax-signers-keychain';
 import MetaMaskProvider from '@hiveio/wax-signers-metamask';
 import PeakVaultProvider from '@hiveio/wax-signers-peakvault';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 
-import type { Wallet } from '@/utils/wallet/abstraction';
+import { getWax } from '@/stores/wax.store';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 import { useMetamaskStore } from './metamask.store';
 import { type Settings, UsedWallet } from './settings.store';
 
+
 let walletRetrievalIntervalId: NodeJS.Timeout | undefined;
 
 const intervalIds = new Set<NodeJS.Timeout>();
@@ -18,10 +21,12 @@ export const useWalletStore = defineStore('wallet', {
     _walletsStatus: {
       metamask: false,
       keychain: false,
-      peakvault: false
+      peakvault: false,
+      ctokens: true
     },
-    wallet: undefined as undefined | Wallet,
-    isWalletSelectModalOpen: false
+    wallet: undefined as undefined | AEncryptionProvider,
+    isWalletSelectModalOpen: false,
+    isProvideWalletPasswordModalOpen: false
   }),
   getters: {
     hasWallet: state => !!state.wallet,
@@ -69,7 +74,7 @@ export const useWalletStore = defineStore('wallet', {
     closeWalletSelectModal () {
       this.isWalletSelectModalOpen = false;
     },
-    async createWalletFor (settings: Settings, role: TRole = 'posting') {
+    async createWalletFor (settings: Settings, role: TRole) {
       switch(settings.wallet) {
       case UsedWallet.METAMASK: {
         const metamaskStore = useMetamaskStore();
@@ -90,11 +95,27 @@ export const useWalletStore = defineStore('wallet', {
 
         break;
       }
+      case UsedWallet.CTOKENS_IMPLEMENTATION: {
+        if (!CTokensProvider.isLoggedIn()) {
+          toast.warning('Please provide the password to unlock your wallet', { duration: 5000 });
+
+          this.isProvideWalletPasswordModalOpen = true;
+
+          return;
+        }
+
+        const wax = await getWax();
+
+        this.wallet = await CTokensProvider.for(wax, role);
+
+        break;
+      }
       default:
         throw new Error('Unsupported wallet');
       }
     },
     resetWallet () {
+      (this.wallet as AEncryptionProvider & { destroy?: () => void })?.destroy?.();
       this.wallet = undefined;
     }
   }
diff --git a/src/stores/wax.store.ts b/src/stores/wax.store.ts
index b0f7445..c5bf84c 100644
--- a/src/stores/wax.store.ts
+++ b/src/stores/wax.store.ts
@@ -1,4 +1,7 @@
-import type { NaiAsset, TWaxExtended, asset } from '@hiveio/wax/vite';
+import type { NaiAsset, TWaxRestExtended, TWaxExtended, asset } from '@hiveio/wax/vite';
+
+import CTokensApi from '@/utils/wallet/ctokens/api';
+import { DEFAULT_CTOKENS_API_URL } from '@/utils/wallet/ctokens/signer';
 
 export interface WaxApi {
   database_api: {
@@ -135,11 +138,15 @@ export interface WaxApi {
   };
 };
 
-let chain: TWaxExtended<WaxApi>;
+let chain: TWaxRestExtended<typeof CTokensApi, TWaxExtended<WaxApi>>;
 
 export const getWax = async () => {
-  if (!chain)
-    chain = (await (await import('@hiveio/wax/vite')).createHiveChain()).extend<WaxApi>();
+  if (!chain) {
+    chain = (await (await import('@hiveio/wax/vite')).createHiveChain()).extend<WaxApi>().extendRest(CTokensApi);
+
+    // These steps are repeated in the CtokensProvider constructor, but we need them here too as for now - maybe find a better way of handling this?
+    chain.restApi.ctokensApi.endpointUrl = DEFAULT_CTOKENS_API_URL;
+  }
 
   return chain;
 };
diff --git a/src/utils/wallet/abstraction.ts b/src/utils/wallet/abstraction.ts
deleted file mode 100644
index fe09fe2..0000000
--- a/src/utils/wallet/abstraction.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { ITransaction, TPublicKey } from '@hiveio/wax';
-
-export type Wallet = {
-  signTransaction(tranasction: ITransaction): Promise<void>;
-  encryptData(data: string, recipient: TPublicKey): Promise<string>;
-  decryptData(data: string): Promise<string>;
-};
diff --git a/src/utils/wallet/ctokens/api/index.d.ts b/src/utils/wallet/ctokens/api/index.d.ts
new file mode 100644
index 0000000..6c0381a
--- /dev/null
+++ b/src/utils/wallet/ctokens/api/index.d.ts
@@ -0,0 +1,181 @@
+type TEmptyReq = {}
+export interface CtokensAppBalance {
+  /** balance type (currency) */
+  nai?: string;
+  /** Balance value (amount of held tokens) */
+  amount?: string;
+  precision?: number;
+  /** Key-value pairs with additional token metadata. */
+  metadata?: object;
+}
+
+export type CtokensAppArrayOfBalances = CtokensAppBalance[];
+
+export interface CtokensAppToken {
+  /** Currency NAI */
+  nai?: string;
+  /** token owner */
+  owner?: string;
+  /** Number of decimal places */
+  precision?: number;
+  /** Total supply of the token */
+  total_supply?: string;
+  /** Maximum supply of the token. 0 means there is no max supply configured */
+  max_supply?: string;
+  /** True if coins can be regenerated to the pool. Their total number can not extend max_supply if set. */
+  capped?: boolean;
+  /** Determines if other users than token owner can stake given asset. */
+  others_can_stake?: boolean;
+  /** Determines if other users than token owner can unstake given asset. */
+  others_can_unstake?: boolean;
+  /** Marks given asset as a NFT. */
+  is_nft?: boolean;
+  /** Key-value pairs with additional token metadata. */
+  metadata?: object;
+}
+
+export type CtokensAppArrayOfTokens = CtokensAppToken[];
+
+export interface CtokensAppUser {
+  management_key?: string;
+  operational_key?: string;
+  /** connected hive account */
+  hive_account?: string | null;
+  /** Key-value pairs with additional user metadata. */
+  metadata?: object;
+}
+
+export type CtokensAppArrayOfUsers = CtokensAppUser[];
+
+export interface CtokensAppTransactionStatusResponse {
+  code?: string;
+  details?: string;
+  hint?: string;
+  message?: string;
+}
+
+export interface CtokensAppTopHolder {
+  /** Rank of the holder (1 = highest) */
+  rank?: number;
+  /** Operational key of the holder */
+  user?: string;
+  /** Amount of held tokens */
+  amount?: string;
+  /** Key-value pairs with additional user metadata. */
+  metadata?: object;
+}
+
+export type CtokensAppArrayOfTopHolders = CtokensAppTopHolder[];
+
+export interface CtokensAppBalanceHistory {
+  /** Sequence number of the history entry */
+  history_seq_no?: number;
+  /** The closing balance */
+  balance?: string;
+  /** previous balance */
+  prev_balance?: string;
+  /** Diffrence between balance and prev_balance */
+  balance_change?: string;
+  /**
+   * Creation date
+   * @format date-time
+   */
+  timestamp?: string;
+}
+
+export type CtokensAppArrayOfBalanceHistory = CtokensAppBalanceHistory[];
+
+export interface CtokensEndpointsGetTopHoldersParams {
+  nai: string;
+  precision: number;
+  /**
+   * 100 results per page (default `1`).
+   * @min 1
+   * @default 1
+   */
+  page?: number;
+}
+
+export interface CtokensEndpointsGetAccountBalancesParams {
+  user: string;
+  /**
+   * 100 results per page (default `1`).
+   * @min 1
+   * @default 1
+   */
+  page?: number;
+}
+
+export interface CtokensEndpointsGetBalanceHistoryParams {
+  user: string;
+  nai: string;
+  precision: number;
+  /**
+   * 100 results per page (default `1`).
+   * @min 1
+   * @default 1
+   */
+  page?: number;
+}
+
+export interface CtokensEndpointsGetRegisteredTokensParams {
+  /** @default null */
+  nai?: string;
+  /** @default null */
+  precision?: number;
+}
+
+export interface CtokensEndpointsGetRegisteredUsersParams {
+  /** @default null */
+  user?: string;
+}
+
+export interface CtokensEndpointsGetStatusParams {
+  /* eslint-disable-next-line @typescript-eslint/naming-convention */
+  'ref-id': string;
+}
+
+type TWaxExtended = {
+  ctokensApi: {
+    version: {
+      result: string,
+      params: undefined
+    },
+    lastSyncedBlock: {
+      result: number,
+      params: undefined
+    },
+    topHolders: {
+      result: CtokensAppArrayOfTopHolders,
+      params: CtokensEndpointsGetTopHoldersParams & TEmptyReq & {
+      }
+    },
+    balances: {
+      result: CtokensAppArrayOfBalances,
+      params: CtokensEndpointsGetAccountBalancesParams & TEmptyReq & {
+      }
+    },
+    balanceHistory: {
+      result: CtokensAppArrayOfBalanceHistory,
+      params: CtokensEndpointsGetBalanceHistoryParams & TEmptyReq & {
+      }
+    },
+    registeredTokens: {
+      result: CtokensAppArrayOfTokens,
+      params: CtokensEndpointsGetRegisteredTokensParams & TEmptyReq & {
+      }
+    },
+    registeredUsers: {
+      result: CtokensAppArrayOfUsers,
+      params: CtokensEndpointsGetRegisteredUsersParams & TEmptyReq & {
+      }
+    },
+    status: {
+      result: CtokensAppTransactionStatusResponse,
+      params: CtokensEndpointsGetStatusParams & TEmptyReq & {
+      }
+    }
+  }
+}
+declare let WaxExtendedData: TWaxExtended;
+export default WaxExtendedData;
diff --git a/src/utils/wallet/ctokens/api/index.js b/src/utils/wallet/ctokens/api/index.js
new file mode 100644
index 0000000..72845ed
--- /dev/null
+++ b/src/utils/wallet/ctokens/api/index.js
@@ -0,0 +1,37 @@
+export default {
+  ctokensApi: {
+    urlPath: 'ctokens-api',
+    version: {
+      urlPath: 'version',
+      method: 'GET'
+    },
+    lastSyncedBlock: {
+      urlPath: 'last-synced-block',
+      method: 'GET'
+    },
+    topHolders: {
+      urlPath: 'top-holders',
+      method: 'GET'
+    },
+    balances: {
+      urlPath: 'balances',
+      method: 'GET'
+    },
+    balanceHistory: {
+      urlPath: 'balance-history',
+      method: 'GET'
+    },
+    registeredTokens: {
+      urlPath: 'registered-tokens',
+      method: 'GET'
+    },
+    registeredUsers: {
+      urlPath: 'registered-users',
+      method: 'GET'
+    },
+    status: {
+      urlPath: 'status',
+      method: 'GET'
+    }
+  }
+};
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
new file mode 100644
index 0000000..0e0ae26
--- /dev/null
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -0,0 +1,176 @@
+import { type IBeekeeperInstance, type IBeekeeperOptions, type IBeekeeperUnlockedWallet } from '@hiveio/beekeeper/vite';
+import type { IHiveChainInterface, ISignatureTransaction, TPublicKey, TRole, TSignature, TWaxRestExtended } from '@hiveio/wax/vite';
+import { AEncryptionProvider } from '@hiveio/wax/vite';
+
+import RestApi from './api';
+
+export class WaxCTokensEncryptionProviderError extends Error {
+  public constructor (message: string, cause?: Error) {
+    // @ts-expect-error - TODO: cause not working for some reason - maybe update tsconfig
+    super(message, { cause });
+  }
+}
+
+const OPERATIONAL_WALLET_NAME_SUFFIX = 'operational';
+const MANAGEMENT_WALLET_NAME_SUFFIX = 'management';
+
+const LOCAL_STORAGE_WALLET_INDEX_KEY = 'ctokens_wallet_index';
+const LOCAL_STORAGE_WALLET_INDEX_DEFAULT = 0;
+
+export const DEFAULT_CTOKENS_API_URL = 'http://192.168.6.7';
+
+export class CTokensProvider extends AEncryptionProvider {
+  static #beekeeper: IBeekeeperInstance | undefined;
+
+  static #operationalWallet: IBeekeeperUnlockedWallet | undefined;
+  static #managementWallet: IBeekeeperUnlockedWallet | undefined;
+
+  public readonly publicKey: TPublicKey;
+
+  public readonly extendedChain: TWaxRestExtended<typeof RestApi, IHiveChainInterface>;
+
+  public static isLoggedIn (): boolean {
+    return !!CTokensProvider.#operationalWallet;
+  }
+
+  private constructor (
+    chain: IHiveChainInterface,
+    public readonly role: TRole,
+    endpointUrl: string
+  ) {
+    super();
+
+    this.extendedChain = chain.extendRest(RestApi);
+    this.extendedChain.restApi.ctokensApi.endpointUrl = endpointUrl;
+
+    const publicKey = role === 'owner' ? CTokensProvider.#managementWallet?.getPublicKeys()[0] : CTokensProvider.#operationalWallet?.getPublicKeys()[0];
+
+    if (!publicKey)
+      throw new WaxCTokensEncryptionProviderError('The requested wallet does not have a public key.');
+
+
+    this.publicKey = publicKey;
+  }
+
+  private async publicKeyHasAccount (): Promise<boolean> {
+    const response = await this.extendedChain.restApi.ctokensApi.registeredUsers({ user: this.publicKey });
+
+    return response.length > 0;
+  }
+
+  public async destroy () {
+    await CTokensProvider.#beekeeper?.delete();
+    CTokensProvider.#beekeeper = undefined;
+  }
+
+  private static async prepareBeekeeper () {
+    if (!CTokensProvider.#beekeeper) {
+      // XXX: Fix dynamic beekeeeper import
+      CTokensProvider.#beekeeper = await (import('@hiveio/beekeeper/vite') as unknown as Promise<{ createBeekeeper: (options: Partial<IBeekeeperOptions>) => Promise<IBeekeeperInstance> }>).then(async bk => {
+        return await bk.createBeekeeper({ inMemory: false, enableLogs: false, unlockTimeout: /* 1 day: */ 1440 });
+      });
+    }
+  }
+
+  private static get walletIndex (): number {
+    let ctokens_wallet_index = localStorage.getItem(LOCAL_STORAGE_WALLET_INDEX_KEY);
+    if (!ctokens_wallet_index)
+      localStorage.setItem(LOCAL_STORAGE_WALLET_INDEX_KEY, ctokens_wallet_index = LOCAL_STORAGE_WALLET_INDEX_DEFAULT.toString());
+
+
+    const num = parseInt(ctokens_wallet_index);
+    if (isNaN(num) || num < 0)
+      throw new WaxCTokensEncryptionProviderError('Invalid ctokens wallet index stored in local storage');
+
+
+    return num;
+  }
+
+  public static get currentOperationalWalletName (): string {
+    const walletIndex = CTokensProvider.walletIndex;
+    return `CTOKENS_WALLET_${walletIndex}_${OPERATIONAL_WALLET_NAME_SUFFIX}`;
+  }
+
+  public static get currentManagementWalletName (): string {
+    const walletIndex = CTokensProvider.walletIndex;
+    return `CTOKENS_WALLET_${walletIndex}_${MANAGEMENT_WALLET_NAME_SUFFIX}`;
+  }
+
+  public static async login (password: string) {
+    await CTokensProvider.prepareBeekeeper();
+
+    const session = CTokensProvider.#beekeeper!.createSession(Math.random().toString());
+
+    try {
+      CTokensProvider.#operationalWallet = session.openWallet(CTokensProvider.currentOperationalWalletName).unlock(password);
+    } catch (error) {
+      throw new WaxCTokensEncryptionProviderError('Failed to unlock operational wallet. Make sure the password is correct.', error as Error);
+    }
+
+    try {
+      CTokensProvider.#managementWallet = session.openWallet(CTokensProvider.currentManagementWalletName).unlock(password);
+    } catch {
+      // Owner wallet is optional
+      CTokensProvider.#managementWallet = undefined;
+    }
+  }
+
+  public static async createWallet (userNewWalletPassword: string, operationalPrivateKey: TPublicKey, managementPrivateKey?: TPublicKey): Promise<{ management?: TPublicKey; operational: TPublicKey; }> {
+    await CTokensProvider.prepareBeekeeper();
+
+    const session = CTokensProvider.#beekeeper!.createSession(Math.random().toString());
+
+    // Increment wallet index for the wallet creation
+    localStorage.setItem(LOCAL_STORAGE_WALLET_INDEX_KEY, (CTokensProvider.walletIndex + 1).toString());
+
+    const { wallet } = await session.createWallet(CTokensProvider.currentOperationalWalletName, userNewWalletPassword);
+
+    const operational = await wallet.importKey(operationalPrivateKey);
+    wallet.lock();
+
+    let management: TPublicKey | undefined;
+
+    if (managementPrivateKey) {
+      const { wallet: managementWallet } = await session.createWallet(CTokensProvider.currentManagementWalletName, userNewWalletPassword);
+      management = await managementWallet.importKey(managementPrivateKey);
+      managementWallet.lock();
+    }
+
+    return { management, operational };
+  }
+
+  public static async for (chain: IHiveChainInterface, role: TRole, ctokensUrl: string = DEFAULT_CTOKENS_API_URL): Promise<CTokensProvider> {
+    if (role === 'owner') {
+      if (!CTokensProvider.#managementWallet)
+        throw new WaxCTokensEncryptionProviderError('Owner wallet is not available. Make sure to login with the correct password and import the required key.');
+    } else {
+      if (!CTokensProvider.#operationalWallet)
+        throw new WaxCTokensEncryptionProviderError('Management wallet is not available. Make sure to login with the correct password and import the required key.');
+    }
+
+    const instance = new CTokensProvider(chain, role, ctokensUrl);
+
+    if (!(await instance.publicKeyHasAccount()))
+      throw new WaxCTokensEncryptionProviderError(`The provided ${role} key is not registered in the ctokens system. Please use a different key.`);
+
+    return instance;
+  }
+
+  public async encryptData (content: string, recipient: TPublicKey): Promise<string> {
+    return this.extendedChain.encrypt(CTokensProvider.#operationalWallet!, content, this.publicKey, recipient);
+  }
+
+  public async decryptData (content: string): Promise<string> {
+    return this.extendedChain.decrypt(CTokensProvider.#operationalWallet!, content);
+  }
+
+  protected async generateSignatures (transaction: ISignatureTransaction): Promise<TSignature[]> {
+    const wallet = this.role === 'owner' ? CTokensProvider.#managementWallet! : CTokensProvider.#operationalWallet!;
+
+    const signature = wallet.signDigest(this.publicKey, transaction.sigDigest);
+
+    return [signature];
+  }
+}
+
+export default CTokensProvider;
-- 
GitLab


From e542e5e0bb3e3560c48209951328657afcc67ba1 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Thu, 9 Oct 2025 14:00:25 +0200
Subject: [PATCH 006/102] Replace direct api calls with extended chain

---
 src/utils/ctokens-api.ts | 201 +++++++++------------------------------
 1 file changed, 47 insertions(+), 154 deletions(-)

diff --git a/src/utils/ctokens-api.ts b/src/utils/ctokens-api.ts
index 133201b..99362ab 100644
--- a/src/utils/ctokens-api.ts
+++ b/src/utils/ctokens-api.ts
@@ -1,4 +1,19 @@
+import type { TWaxRestExtended, IHiveChainInterface } from '@hiveio/wax';
+
 import { useSettingsStore } from '@/stores/settings.store';
+import { getWax } from '@/stores/wax.store';
+import type {
+  CtokensAppBalance,
+  CtokensAppBalanceHistory,
+  CtokensAppTransactionStatusResponse,
+  CtokensAppArrayOfTokens,
+  CtokensAppArrayOfUsers,
+  CtokensAppArrayOfTopHolders,
+  CtokensAppToken
+} from '@/utils/wallet/ctokens/api';
+
+import type RestApi from '../utils/wallet/ctokens/api';
+
 
 // Types based on ctokens-api OpenAPI specification
 
@@ -62,44 +77,13 @@ export interface TransactionStatusResult {
 
 /**
  * Custom Tokens API Service
- * Provides methods to interact with the ctokens-api
+ * Provides methods to interact with the ctokens-api through wax extension
  */
 export class CTokensApiService {
-  private baseUrl: string;
-
-  public constructor (baseUrl: string = '/ctokens-api') {
-    this.baseUrl = baseUrl;
-  }
-
-  private async makeRequest<T> (endpoint: string, params?: Record<string, string | number>): Promise<T> {
-    const url = new URL(`${this.baseUrl}${endpoint}`, window.location.origin);
-
-    if (params) {
-      Object.entries(params).forEach(([key, value]) => {
-        if (value !== undefined && value !== null)
-          url.searchParams.append(key, value.toString());
-      });
-    }
+  private readonly extendedChain: TWaxRestExtended<typeof RestApi, IHiveChainInterface>;
 
-    const response = await fetch(url.toString());
-
-    if (!response.ok) {
-      const errorText = await response.text();
-      throw new Error(`API request failed: ${response.status} ${response.statusText}. Response: ${errorText.substring(0, 200)}`);
-    }
-
-    const contentType = response.headers.get('content-type');
-    if (!contentType || !contentType.includes('application/json')) {
-      const responseText = await response.text();
-      throw new Error(`Expected JSON response but received ${contentType || 'unknown'}. Response: ${responseText.substring(0, 200)}`);
-    }
-
-    try {
-      return await response.json();
-    } catch (_parseError) {
-      const responseText = await response.text();
-      throw new Error(`Failed to parse JSON response. Content: ${responseText.substring(0, 200)}`);
-    }
+  public constructor (extendedChain: TWaxRestExtended<typeof RestApi, IHiveChainInterface>) {
+    this.extendedChain = extendedChain;
   }
 
   /**
@@ -107,7 +91,7 @@ export class CTokensApiService {
    */
   public async testConnection (): Promise<boolean> {
     try {
-      await this.getLastSyncedBlock();
+      await this.extendedChain.restApi.ctokensApi.lastSyncedBlock();
       return true;
     } catch (_error) {
       return false;
@@ -118,21 +102,21 @@ export class CTokensApiService {
    * Get API version
    */
   public async getVersion (): Promise<string> {
-    return this.makeRequest<string>('/version');
+    return await this.extendedChain.restApi.ctokensApi.version();
   }
 
   /**
    * Get last synced block number
    */
   public async getLastSyncedBlock (): Promise<number> {
-    return this.makeRequest<number>('/last-synced-block');
+    return await this.extendedChain.restApi.ctokensApi.lastSyncedBlock();
   }
 
   /**
    * Get account balances for a user
    */
-  public async getAccountBalances (user: string, page: number = 1): Promise<CTokenBalance[]> {
-    return this.makeRequest<CTokenBalance[]>('/balances', { user, page });
+  public async getAccountBalances (user: string, page: number = 1): Promise<CtokensAppBalance[]> {
+    return await this.extendedChain.restApi.ctokensApi.balances({ user, page });
   }
 
   /**
@@ -143,8 +127,8 @@ export class CTokensApiService {
     nai: string,
     precision: number,
     page: number = 1
-  ): Promise<CTokenBalanceHistory[]> {
-    return this.makeRequest<CTokenBalanceHistory[]>('/balance-history', {
+  ): Promise<CtokensAppBalanceHistory[]> {
+    return await this.extendedChain.restApi.ctokensApi.balanceHistory({
       user,
       nai,
       precision,
@@ -155,29 +139,29 @@ export class CTokensApiService {
   /**
    * Get list of registered tokens
    */
-  public async getRegisteredTokens (nai?: string, precision?: number): Promise<CToken[]> {
+  public async getRegisteredTokens (nai?: string, precision?: number): Promise<CtokensAppArrayOfTokens> {
     const params: Record<string, string | number> = {};
     if (nai) params.nai = nai;
     if (precision !== undefined) params.precision = precision;
 
-    return this.makeRequest<CToken[]>('/registered-tokens', params);
+    return await this.extendedChain.restApi.ctokensApi.registeredTokens(params);;
   }
 
   /**
    * Get list of registered users
    */
-  public async getRegisteredUsers (user?: string): Promise<CTokenUser[]> {
-    const params: Record<string, string | number> = {};
+  public async getRegisteredUsers (user?: string): Promise<CtokensAppArrayOfUsers> {
+    const params: Record<string, string> = {};
     if (user) params.user = user;
 
-    return this.makeRequest<CTokenUser[]>('/registered-users', params);
+    return await this.extendedChain.restApi.ctokensApi.registeredUsers(params);
   }
 
   /**
    * Get top holders for a specific token
    */
-  public async getTopHolders (nai: string, precision: number, page: number = 1): Promise<CTokenTopHolder[]> {
-    return this.makeRequest<CTokenTopHolder[]>('/top-holders', {
+  public async getTopHolders (nai: string, precision: number, page: number = 1): Promise<CtokensAppArrayOfTopHolders> {
+    return await this.extendedChain.restApi.ctokensApi.topHolders({
       nai,
       precision,
       page
@@ -186,73 +170,23 @@ export class CTokensApiService {
 
   /**
    * Get transaction status by reference ID
-   * Returns status based on HTTP response codes:
-   * - 404: Transaction pending (not found yet)
-   * - 200: Transaction confirmed
-   * - 400: Transaction failed (with error message)
+   * Returns status based on API response:
+   * - API returns result: Transaction confirmed
+   * - API throws error: Transaction failed or pending
    */
-  public async getTransactionStatus (refId: string): Promise<TransactionStatusResult> {
-    const url = new URL(`${this.baseUrl}/status`, window.location.origin);
-    url.searchParams.append('refId', refId);
-
-    try {
-      const response = await fetch(url.toString());
-
-      if (response.status === 404) {
-        // Transaction is still pending
-        return {
-          status: 'pending',
-          httpCode: 404,
-          error: 'Transaction not found - still processing'
-        };
-      }
-
-      if (response.status === 200) {
-        // Transaction confirmed
-        const data = await response.json();
-        return {
-          status: 'confirmed',
-          httpCode: 200,
-          data
-        };
-      }
-
-      if (response.status === 400) {
-        // Transaction failed
-        const data = await response.json();
-        return {
-          status: 'failed',
-          httpCode: 400,
-          data,
-          error: data.message || 'Transaction failed'
-        };
-      }
-
-      // Unexpected status code
-      const errorText = await response.text();
-      return {
-        status: 'failed',
-        httpCode: response.status,
-        error: `Unexpected response: ${response.status} ${response.statusText}. ${errorText.substring(0, 200)}`
-      };
-
-    } catch (networkError) {
-      return {
-        status: 'failed',
-        httpCode: 0,
-        error: `Network error: ${networkError instanceof Error ? networkError.message : 'Unknown error'}`
-      };
-    }
+  public async getTransactionStatus (refId: string): Promise<CtokensAppTransactionStatusResponse> {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    return await this.extendedChain.restApi.ctokensApi.status({ 'ref-id': refId });
   }
 }
 
-// Create singleton instance with configurable URL
-const getApiBaseUrl = (): string => {
-  // Check for environment variable or default to local
-  return import.meta.env.VITE_CTOKENS_API_URL || '/ctokens-api';
-};
+// Create singleton instance
+export const cTokensApi = new CTokensApiService(await getWax());
 
-export const cTokensApi = new CTokensApiService(getApiBaseUrl());
+// Factory function to create instance with specific wax instance
+export const createCTokensApiService = (waxInstance: Awaited<ReturnType<typeof getWax>>): CTokensApiService => {
+  return new CTokensApiService(waxInstance);
+};
 
 /**
  * Enhanced token utilities that integrate with ctokens-api
@@ -345,8 +279,8 @@ export interface LegacyTokenBalance {
 }
 
 export const transformCTokenBalanceToLegacy = (
-  balance: CTokenBalance,
-  token: CToken
+  balance: CtokensAppBalance,
+  token: CtokensAppToken
 ): LegacyTokenBalance => {
   const formattedAmount = formatCTokenAmount(balance.amount, balance.precision);
 
@@ -395,47 +329,6 @@ export const transformCTokenToLegacy = (token: CToken): LegacyTokenDefinition =>
   };
 };
 
-/**
- * Poll transaction status until it's no longer pending
- * @param refId - Transaction reference ID
- * @param maxAttempts - Maximum number of polling attempts
- * @param intervalMs - Polling interval in milliseconds
- * @returns Promise resolving to final transaction status
- */
-export const pollTransactionStatus = async (
-  refId: string,
-  maxAttempts: number = 30,
-  intervalMs: number = 2000
-): Promise<TransactionStatusResult> => {
-  const apiService = cTokensApi;
-
-  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-    const result = await apiService.getTransactionStatus(refId);
-
-    // If status is not pending, return immediately
-    if (result.status !== 'pending')
-      return result;
-
-    // If this was the last attempt, return the pending status
-    if (attempt === maxAttempts) {
-      return {
-        ...result,
-        error: `Transaction still pending after ${maxAttempts} attempts`
-      };
-    }
-
-    // Wait before next attempt
-    await new Promise(resolve => setTimeout(resolve, intervalMs));
-  }
-
-  // This should never be reached, but TypeScript requires it
-  return {
-    status: 'failed',
-    httpCode: 0,
-    error: 'Polling completed without result'
-  };
-};
-
 /**
  * Get user-friendly status message
  */
-- 
GitLab


From eff80dea30a921c819d4e5fd5e693e82195a2feb Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 9 Oct 2025 14:15:08 +0200
Subject: [PATCH 007/102] Add L2 wallet definition

---
 src/components/navigation/AppHeader.vue       |   4 +-
 .../onboarding/OnboardingWalletButton.vue     |   3 +
 src/components/onboarding/SelectWallet.vue    |   2 +-
 src/components/onboarding/ThankYou.vue        |   6 +-
 .../utilcards/AccountDetailsCard.vue          |   5 +-
 src/stores/tokens.store.ts                    | 365 ++++++++----------
 src/stores/user.store.ts                      |  28 +-
 src/stores/wallet.store.ts                    |  11 +-
 8 files changed, 200 insertions(+), 224 deletions(-)

diff --git a/src/components/navigation/AppHeader.vue b/src/components/navigation/AppHeader.vue
index 4d681a6..9eb07f4 100644
--- a/src/components/navigation/AppHeader.vue
+++ b/src/components/navigation/AppHeader.vue
@@ -36,13 +36,13 @@ const logout = () => {
             :src="userStore.profileImage"
           />
           <AvatarFallback v-if="settingsStore.isLoaded && hasUser">
-            {{ settingsStore.settings.account?.slice(0, 2) }}
+            {{ userStore.name?.slice(1, 3) }}
           </AvatarFallback>
         </Avatar>
         <span
           v-if="settingsStore.isLoaded && hasUser"
           class="font-bold max-w-[150px] md:max-w-full truncate"
-        >@{{ settingsStore.settings.account }}</span>
+        >{{ userStore.name }}</span>
       </div>
       <div class="ml-auto inline-flex items-center space-x-4 md:space-x-6">
         <ThemeSwitch class="w-6 h-6" />
diff --git a/src/components/onboarding/OnboardingWalletButton.vue b/src/components/onboarding/OnboardingWalletButton.vue
index 87a1a34..2843567 100644
--- a/src/components/onboarding/OnboardingWalletButton.vue
+++ b/src/components/onboarding/OnboardingWalletButton.vue
@@ -75,6 +75,9 @@ const emit = defineEmits(['click']);
 
 <style scoped>
 .text-description {
+  word-break: break-word;
+  display: inline-block;
+  white-space: pre-line;
   color: hsla(var(--foreground) / .5);
 }
 </style>
diff --git a/src/components/onboarding/SelectWallet.vue b/src/components/onboarding/SelectWallet.vue
index 60d59a5..7cd945e 100644
--- a/src/components/onboarding/SelectWallet.vue
+++ b/src/components/onboarding/SelectWallet.vue
@@ -63,7 +63,7 @@ const close = () => {
         :disabled="!walletsStatus.ctokens"
         :logo-url="getWalletIcon(UsedWallet.CTOKENS_IMPLEMENTATION)"
         name="Hive Token Machine"
-        description="Use your HTM wallet"
+        description="Choose this option if you do not own a Hive account"
         @click="useWallet(UsedWallet.CTOKENS_IMPLEMENTATION)"
       />
       <OnboardingButton
diff --git a/src/components/onboarding/ThankYou.vue b/src/components/onboarding/ThankYou.vue
index d5a115b..14a1200 100644
--- a/src/components/onboarding/ThankYou.vue
+++ b/src/components/onboarding/ThankYou.vue
@@ -6,9 +6,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import type { UsedWallet } from '@/stores/settings.store';
 import { getWalletIcon, stringifyWalletName } from '@/stores/settings.store';
-import { useUserStore } from '@/stores/user.store';
-
-const userStore = useUserStore();
+import { transformUserName } from '@/stores/user.store';
 
 const emit = defineEmits(['close']);
 
@@ -18,7 +16,7 @@ const props = defineProps<{
 }>();
 
 const account = computed(() => {
-  return userStore.transformUserName(props.account);
+  return transformUserName(props.account);
 });
 
 const stringifiedWallet = stringifyWalletName(props.wallet);
diff --git a/src/components/utilcards/AccountDetailsCard.vue b/src/components/utilcards/AccountDetailsCard.vue
index dc0e669..f38ab52 100644
--- a/src/components/utilcards/AccountDetailsCard.vue
+++ b/src/components/utilcards/AccountDetailsCard.vue
@@ -7,11 +7,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Progress } from '@/components/ui/round-progress';
 import { Separator } from '@/components/ui/separator';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useSettingsStore } from '@/stores/settings.store';
 import { useUserStore } from '@/stores/user.store';
 
-const settingsStore = useSettingsStore();
-
 const userStore = useUserStore();
 
 const upvotePercentage = computed(() => {
@@ -100,7 +97,7 @@ const rcPercentage = computed(() => {
             <span
               v-if="userStore.isReady"
               class="text-xs font-bold top-[-5px]"
-            >@{{ settingsStore.settings.account }}</span>
+            >{{ userStore.name }}</span>
             <Skeleton
               v-else
               class="w-40 h-6"
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 47bff34..dd49887 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -1,5 +1,4 @@
 import { defineStore } from 'pinia';
-import { ref, computed } from 'vue';
 
 import {
   cTokensApi,
@@ -11,213 +10,181 @@ import {
   type LegacyTokenBalance,
   type LegacyTokenDefinition
 } from '@/utils/ctokens-api';
+import type CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+export const useTokensStore = defineStore('tokens', {
+  state: () => ({
+    balances: [] as LegacyTokenBalance[],
+    tokenDefinitions: [] as LegacyTokenDefinition[],
+    isLoadingBalances: false,
+    isLoadingTokens: false,
+    lastError: null as string | null,
+    wallet: undefined as CTokensProvider | undefined
+  }),
+  getters: {
+    totalValue: (state) => {
+      return state.balances.reduce((total, balance) => {
+        // Mock price of $0.01 per token for now
+        const price = 0.01;
+        const amount = parseFloat(balance.total_balance);
+        return total + (amount * price);
+      }, 0);
+    },
+    tokenCount: (state) => state.balances.length,
+    hasBalances: (state) => state.balances.length > 0,
+    hasTokenDefinitions: (state) => state.tokenDefinitions.length > 0
+  },
+  actions: {
+    async loadBalances(forceRefresh = false) {
+      const operationalKey = getUserOperationalKey();
+
+      if (!operationalKey) {
+        this.lastError = 'No operational key available';
+        return;
+      }
 
-export const useTokensStore = defineStore('tokens', () => {
-  // State
-  const balances = ref<LegacyTokenBalance[]>([]);
-  const tokenDefinitions = ref<LegacyTokenDefinition[]>([]);
-  const isLoadingBalances = ref(false);
-  const isLoadingTokens = ref(false);
-  const lastError = ref<string | null>(null);
-
-  // Computed
-  const totalValue = computed(() => {
-    return balances.value.reduce((total, balance) => {
-      // Mock price of $0.01 per token for now
-      const price = 0.01;
-      const amount = parseFloat(balance.total_balance);
-      return total + (amount * price);
-    }, 0);
-  });
-
-  const tokenCount = computed(() => balances.value.length);
-
-  const hasBalances = computed(() => balances.value.length > 0);
-
-  const hasTokenDefinitions = computed(() => tokenDefinitions.value.length > 0);
-
-  // Actions
-  const loadBalances = async (forceRefresh = false) => {
-    const operationalKey = getUserOperationalKey();
-
-    if (!operationalKey) {
-      lastError.value = 'No operational key available';
-      return;
-    }
+      if (this.isLoadingBalances && !forceRefresh) return;
 
-    if (isLoadingBalances.value && !forceRefresh) return;
+      this.isLoadingBalances = true;
+      this.lastError = null;
 
-    isLoadingBalances.value = true;
-    lastError.value = null;
+      try {
+        // Test API connectivity first
+        const isApiAvailable = await cTokensApi.testConnection();
 
-    try {
-      // Test API connectivity first
-      const isApiAvailable = await cTokensApi.testConnection();
+        if (!isApiAvailable)
+          throw new Error('ctokens-api is not available. Using fallback data.');
 
-      if (!isApiAvailable)
-        throw new Error('ctokens-api is not available. Using fallback data.');
+        // Get balances from ctokens-api
+        const cTokenBalances = await cTokensApi.getAccountBalances(operationalKey);
 
-      // Get balances from ctokens-api
-      const cTokenBalances = await cTokensApi.getAccountBalances(operationalKey);
+        // Get all registered tokens to map metadata
+        const tokens = await cTokensApi.getRegisteredTokens();
 
-      // Get all registered tokens to map metadata
-      const tokens = await cTokensApi.getRegisteredTokens();
+        // Transform to legacy format
+        const legacyBalances: LegacyTokenBalance[] = [];
 
-      // Transform to legacy format
-      const legacyBalances: LegacyTokenBalance[] = [];
+        for (const balance of cTokenBalances) {
+          const token = tokens.find(t => t.nai === balance.nai && t.precision === balance.precision);
+          if (token)
+            legacyBalances.push(transformCTokenBalanceToLegacy(balance, token));
+        }
 
-      for (const balance of cTokenBalances) {
-        const token = tokens.find(t => t.nai === balance.nai && t.precision === balance.precision);
-        if (token)
-          legacyBalances.push(transformCTokenBalanceToLegacy(balance, token));
+        this.balances = legacyBalances;
+      } catch (error) {
+        console.error('Failed to load balances:', error);
+        this.lastError = error instanceof Error ? error.message : 'Failed to load balances';
+
+        // Fallback to mock data for development
+        console.log('Using fallback mock data for development');
+        this.balances = [
+          {
+            symbol: 'HIVE',
+            name: 'Hive',
+            nai: '@@000000021',
+            liquid_balance: '150.500',
+            staked_balance: '0.000',
+            total_balance: '150.500',
+            precision: 3,
+            logo_url: undefined
+          },
+          {
+            symbol: 'HBD',
+            name: 'Hive Backed Dollar',
+            nai: '@@000000013',
+            liquid_balance: '75.250',
+            staked_balance: '0.000',
+            total_balance: '75.250',
+            precision: 3,
+            logo_url: undefined
+          },
+          {
+            symbol: 'MAT',
+            name: 'My Awesome Token',
+            nai: '@@123456789',
+            liquid_balance: '1000.000',
+            staked_balance: '500.000',
+            total_balance: '1500.000',
+            precision: 3,
+            logo_url: undefined
+          }
+        ];
+      } finally {
+        this.isLoadingBalances = false;
       }
-
-      balances.value = legacyBalances;
-    } catch (error) {
-      console.error('Failed to load balances:', error);
-      lastError.value = error instanceof Error ? error.message : 'Failed to load balances';
-
-      // Fallback to mock data for development
-      console.log('Using fallback mock data for development');
-      balances.value = [
-        {
-          symbol: 'HIVE',
-          name: 'Hive',
-          nai: '@@000000021',
-          liquid_balance: '150.500',
-          staked_balance: '0.000',
-          total_balance: '150.500',
-          precision: 3,
-          logo_url: undefined
-        },
-        {
-          symbol: 'HBD',
-          name: 'Hive Backed Dollar',
-          nai: '@@000000013',
-          liquid_balance: '75.250',
-          staked_balance: '0.000',
-          total_balance: '75.250',
-          precision: 3,
-          logo_url: undefined
-        },
-        {
-          symbol: 'MAT',
-          name: 'My Awesome Token',
-          nai: '@@123456789',
-          liquid_balance: '1000.000',
-          staked_balance: '500.000',
-          total_balance: '1500.000',
-          precision: 3,
-          logo_url: undefined
-        }
-      ];
-    } finally {
-      isLoadingBalances.value = false;
-    }
-  };
-
-  const loadTokenDefinitions = async (creator?: string, forceRefresh = false) => {
-    if (isLoadingTokens.value && !forceRefresh) return;
-
-    isLoadingTokens.value = true;
-    lastError.value = null;
-
-    try {
-      // Test API connectivity first
-      const isApiAvailable = await cTokensApi.testConnection();
-
-      if (!isApiAvailable)
-        throw new Error('ctokens-api is not available. Using fallback data.');
-
-      // Get registered tokens from ctokens-api
-      const tokens = await cTokensApi.getRegisteredTokens();
-
-      // Filter by creator if provided
-      const filteredTokens = creator
-        ? tokens.filter(token => token.owner === creator)
-        : tokens;
-
-      // Transform to legacy format
-      tokenDefinitions.value = filteredTokens.map(token => transformCTokenToLegacy(token));
-    } catch (error) {
-      console.error('Failed to load token definitions:', error);
-      lastError.value = error instanceof Error ? error.message : 'Failed to load token definitions';
-
-      // Fallback to mock data for development
-      console.log('Using fallback mock data for token definitions');
-      tokenDefinitions.value = [
-        {
-          symbol: 'MAT',
-          name: 'My Awesome Token',
-          description: 'A test token for demonstration purposes',
-          nai: '@@123456789',
-          initial_supply: '1000000',
-          current_supply: '1000000',
-          precision: 3,
-          can_stake: true,
-          creator: creator || 'testaccount',
-          created_at: '2024-01-15T10:30:00Z',
-          active: true
-        }
-      ];
-    } finally {
-      isLoadingTokens.value = false;
+    },
+    async loadTokenDefinitions(creator?: string, forceRefresh = false) {
+      if (this.isLoadingTokens && !forceRefresh) return;
+
+      this.isLoadingTokens = true;
+      this.lastError = null;
+
+      try {
+        // Test API connectivity first
+        const isApiAvailable = await cTokensApi.testConnection();
+
+        if (!isApiAvailable)
+          throw new Error('ctokens-api is not available. Using fallback data.');
+
+        // Get registered tokens from ctokens-api
+        const tokens = await cTokensApi.getRegisteredTokens();
+
+        // Filter by creator if provided
+        const filteredTokens = creator
+          ? tokens.filter(token => token.owner === creator)
+          : tokens;
+
+        // Transform to legacy format
+        this.tokenDefinitions = filteredTokens.map(token => transformCTokenToLegacy(token));
+      } catch (error) {
+        console.error('Failed to load token definitions:', error);
+        this.lastError = error instanceof Error ? error.message : 'Failed to load token definitions';
+
+        // Fallback to mock data for development
+        console.log('Using fallback mock data for token definitions');
+        this.tokenDefinitions = [
+          {
+            symbol: 'MAT',
+            name: 'My Awesome Token',
+            description: 'A test token for demonstration purposes',
+            nai: '@@123456789',
+            initial_supply: '1000000',
+            current_supply: '1000000',
+            precision: 3,
+            can_stake: true,
+            creator: creator || 'testaccount',
+            created_at: '2024-01-15T10:30:00Z',
+            active: true
+          }
+        ];
+      } finally {
+        this.isLoadingTokens = false;
+      }
+    },
+    async getBalanceHistory(nai: string, precision: number, page = 1): Promise<CTokenBalanceHistory[]> {
+      const operationalKey = getUserOperationalKey();
+      if (!operationalKey)
+        throw new Error('No operational key available');
+
+      return cTokensApi.getBalanceHistory(operationalKey, nai, precision, page);
+    },
+    async getTopHolders(nai: string, precision: number, page = 1): Promise<CTokenTopHolder[]> {
+      return cTokensApi.getTopHolders(nai, precision, page);
+    },
+    getTokenByNAI(nai: string): LegacyTokenBalance | undefined {
+      return this.balances.find(balance => balance.nai === nai);
+    },
+    getTokenDefinitionByNAI(nai: string): LegacyTokenDefinition | undefined {
+      return this.tokenDefinitions.find(token => token.nai === nai);
+    },
+    async refreshAll() {
+      await Promise.all([
+        this.loadBalances(true),
+        this.loadTokenDefinitions(undefined, true)
+      ]);
+    },
+    clearError() {
+      this.lastError = null;
     }
-  };
-
-  const getBalanceHistory = async (nai: string, precision: number, page = 1): Promise<CTokenBalanceHistory[]> => {
-    const operationalKey = getUserOperationalKey();
-    if (!operationalKey)
-      throw new Error('No operational key available');
-
-    return cTokensApi.getBalanceHistory(operationalKey, nai, precision, page);
-  };
-
-  const getTopHolders = async (nai: string, precision: number, page = 1): Promise<CTokenTopHolder[]> => {
-    return cTokensApi.getTopHolders(nai, precision, page);
-  };
-
-  const getTokenByNAI = (nai: string): LegacyTokenBalance | undefined => {
-    return balances.value.find(balance => balance.nai === nai);
-  };
-
-  const getTokenDefinitionByNAI = (nai: string): LegacyTokenDefinition | undefined => {
-    return tokenDefinitions.value.find(token => token.nai === nai);
-  };
-
-  const refreshAll = async () => {
-    await Promise.all([
-      loadBalances(true),
-      loadTokenDefinitions(undefined, true)
-    ]);
-  };
-
-  const clearError = () => {
-    lastError.value = null;
-  };
-
-  return {
-    // State
-    balances,
-    tokenDefinitions,
-    isLoadingBalances,
-    isLoadingTokens,
-    lastError,
-
-    // Computed
-    totalValue,
-    tokenCount,
-    hasBalances,
-    hasTokenDefinitions,
-
-    // Actions
-    loadBalances,
-    loadTokenDefinitions,
-    getBalanceHistory,
-    getTopHolders,
-    getTokenByNAI,
-    getTokenDefinitionByNAI,
-    refreshAll,
-    clearError
-  };
+  }
 });
diff --git a/src/stores/user.store.ts b/src/stores/user.store.ts
index 3235ee5..507f9bd 100644
--- a/src/stores/user.store.ts
+++ b/src/stores/user.store.ts
@@ -8,6 +8,19 @@ import { parseReputation } from '@/utils/parse-reputation';
 const PERCENT_VALUE_DOUBLE_PRECISION = 100;
 const ONE_HUNDRED_PERCENT = BigInt(100) * BigInt(PERCENT_VALUE_DOUBLE_PRECISION);
 
+export const transformUserName = (name: string): string => {
+  if (name.startsWith('STM'))
+    return name.slice(0, 15) + '...';
+
+  if (name.startsWith('@'))
+    name = name.slice(1);
+
+  if (name.length > 15)
+    return `@${name.slice(0, 15)}...`;
+
+  return `@${name}`;
+};
+
 export class BalanceData {
   public readonly usdValue: number;
   public readonly usdString: string;
@@ -87,7 +100,7 @@ export const useUserStore = defineStore('user', {
   }),
   getters: {
     profileImage: (ctx): undefined | string => ctx.isReady ? ctx.parsedPostingJsonMetadata?.profile?.profile_image || ctx.parsedJsonMetadata?.profile?.profile_image : undefined,
-    name: (ctx): undefined | string => ctx.isReady ? ctx.parsedPostingJsonMetadata?.profile?.name || ctx.parsedJsonMetadata?.profile?.name || ctx.userDisplayName : undefined,
+    name: (ctx): undefined | string => ctx.isReady ? transformUserName(ctx.parsedPostingJsonMetadata?.profile?.name || ctx.parsedJsonMetadata?.profile?.name || ctx.userDisplayName as string) : undefined,
     about: (ctx): undefined | string => ctx.isReady ? ctx.parsedPostingJsonMetadata?.profile?.about || ctx.parsedJsonMetadata?.profile?.about : undefined,
     website: (ctx): undefined | string => ctx.isReady ? ctx.parsedPostingJsonMetadata?.profile?.website || ctx.parsedJsonMetadata?.profile?.website : undefined
   },
@@ -154,17 +167,6 @@ export const useUserStore = defineStore('user', {
         console.error('Error fetching prices:', error);
       }
     },
-    transformUserName (name: string): string {
-      if (name.startsWith('STM'))
-        return name.slice(0, 15) + '...';
-
-
-      if (name.length > 15)
-        return `@${name.slice(0, 15)}...`;
-
-
-      return `@${name}`;
-    },
     async parseCTokenData (accountName: string) {
       const wax = await getWax();
 
@@ -219,7 +221,7 @@ export const useUserStore = defineStore('user', {
       };
     },
     async parseUserData (accountName: string) {
-      this.userDisplayName = this.transformUserName(accountName);
+      this.userDisplayName = transformUserName(accountName);
 
       if (accountName.startsWith('STM'))
         await this.parseCTokenData(accountName);
diff --git a/src/stores/wallet.store.ts b/src/stores/wallet.store.ts
index 9534725..72db51f 100644
--- a/src/stores/wallet.store.ts
+++ b/src/stores/wallet.store.ts
@@ -10,7 +10,7 @@ import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 import { useMetamaskStore } from './metamask.store';
 import { type Settings, UsedWallet } from './settings.store';
-
+import { useTokensStore } from './tokens.store';
 
 let walletRetrievalIntervalId: NodeJS.Timeout | undefined;
 
@@ -24,6 +24,7 @@ export const useWalletStore = defineStore('wallet', {
       peakvault: false,
       ctokens: true
     },
+    isL2Wallet: false,
     wallet: undefined as undefined | AEncryptionProvider,
     isWalletSelectModalOpen: false,
     isProvideWalletPasswordModalOpen: false
@@ -82,16 +83,19 @@ export const useWalletStore = defineStore('wallet', {
         await metamaskStore.connect(0, role);
 
         this.wallet = metamaskStore.metamask;
+        this.isL2Wallet = false;
 
         break;
       }
       case UsedWallet.KEYCHAIN: {
         this.wallet = KeychainProvider.for(settings.account!, role);
+        this.isL2Wallet = false;
 
         break;
       }
       case UsedWallet.PEAKVAULT: {
         this.wallet = PeakVaultProvider.for(settings.account!, role);
+        this.isL2Wallet = false;
 
         break;
       }
@@ -108,6 +112,11 @@ export const useWalletStore = defineStore('wallet', {
 
         this.wallet = await CTokensProvider.for(wax, role);
 
+        const tokensStore = useTokensStore();
+
+        tokensStore.wallet = this.wallet as CTokensProvider;
+        this.isL2Wallet = true;
+
         break;
       }
       default:
-- 
GitLab


From a42068d82317a4c4293244be4d07d8c1ed68df50 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 9 Oct 2025 16:06:26 +0200
Subject: [PATCH 008/102] Fix calling methods from inside the wallet

---
 src/components/navigation/AppSidebar.vue      |  25 +--
 .../utilcards/AuthorizeDappCard.vue           |   3 +-
 src/components/utilcards/MemoEncryptCard.vue  |  16 +-
 src/components/utilcards/TransferCard.vue     | 207 ------------------
 src/pages/finances/transfer.vue               |   9 -
 .../create-token.vue => tokens/create.vue}    |   0
 .../token-holders.vue => tokens/holders.vue}  |   0
 .../my-balance.vue}                           |   0
 .../my-tokens.vue}                            |   0
 src/stores/metamask.store.ts                  |  12 +-
 src/stores/tokens.store.ts                    |  16 +-
 src/stores/wallet.store.ts                    |  20 +-
 src/utils/router.ts                           |  18 +-
 13 files changed, 60 insertions(+), 266 deletions(-)
 delete mode 100644 src/components/utilcards/TransferCard.vue
 delete mode 100644 src/pages/finances/transfer.vue
 rename src/pages/{finances/create-token.vue => tokens/create.vue} (100%)
 rename src/pages/{finances/token-holders.vue => tokens/holders.vue} (100%)
 rename src/pages/{finances/account-balances.vue => tokens/my-balance.vue} (100%)
 rename src/pages/{finances/token-definitions.vue => tokens/my-tokens.vue} (100%)

diff --git a/src/components/navigation/AppSidebar.vue b/src/components/navigation/AppSidebar.vue
index 95eb685..712b7a0 100644
--- a/src/components/navigation/AppSidebar.vue
+++ b/src/components/navigation/AppSidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { mdiHomeOutline, mdiMessageLockOutline, mdiFileSign, mdiAccountPlusOutline, mdiAccountArrowUpOutline, mdiAccountReactivateOutline, mdiSendOutline, mdiLink, mdiWallet, mdiViewList, mdiAccountGroup } from '@mdi/js';
+import { mdiHomeOutline, mdiMessageLockOutline, mdiFileSign, mdiAccountPlusOutline, mdiAccountArrowUpOutline, mdiAccountReactivateOutline, mdiLink, mdiWallet, mdiViewList, mdiAccountGroup } from '@mdi/js';
 import { computed, onMounted, ref, type Ref } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -16,10 +16,10 @@ const { toggleSidebar, isMobile } = useSidebar();
 
 const walletStore = useWalletStore();
 
-const isLoggedIn = computed(() => walletStore.hasWallet);
+const isL1BasedView = computed(() => walletStore.hasWallet && !walletStore.isL2Wallet);
 
 const groups: { title: string; items: Array<{ title: string; url: string; icon: string; badge?: string; visible?: Ref<boolean>; disabled?: Ref<boolean> }> }[] = [{
-  title: 'Account management',
+  title: 'Hive Account Management',
   items: [
     {
       title: 'Home',
@@ -35,36 +35,31 @@ const groups: { title: string; items: Array<{ title: string; url: string; icon:
       title: 'Process Account Creation',
       url: '/account/create',
       icon: mdiAccountReactivateOutline,
-      visible: isLoggedIn
+      visible: isL1BasedView
     },
     {
       title: 'Process Authority Update',
       url: '/account/update',
       icon: mdiAccountArrowUpOutline,
-      visible: isLoggedIn
+      visible: isL1BasedView
     }
   ]
 }, {
-  title: 'Finances',
+  title: 'Tokens',
   items: [
     {
-      title: 'Account Balances',
-      url: '/finances/account-balances',
+      title: 'Token Balances',
+      url: '/tokens/my-balance',
       icon: mdiWallet
     },
-    {
-      title: 'Send transfer',
-      url: '/finances/transfer',
-      icon: mdiSendOutline
-    },
     {
       title: 'My Token Definitions',
-      url: '/finances/token-definitions',
+      url: '/tokens/my-tokens',
       icon: mdiViewList
     },
     {
       title: 'Token Holders',
-      url: '/finances/token-holders',
+      url: '/tokens/holders',
       icon: mdiAccountGroup
     }
   ]
diff --git a/src/components/utilcards/AuthorizeDappCard.vue b/src/components/utilcards/AuthorizeDappCard.vue
index 0732845..67811a1 100644
--- a/src/components/utilcards/AuthorizeDappCard.vue
+++ b/src/components/utilcards/AuthorizeDappCard.vue
@@ -69,7 +69,8 @@ const authorize = async () => {
         id: 'dappauth',
         json: JSON.stringify({
           dapp: props.app,
-          code: props.code
+          code: props.code,
+          layer: walletStore.isL2Wallet ? '2' : '1'
         })
       }
     });
diff --git a/src/components/utilcards/MemoEncryptCard.vue b/src/components/utilcards/MemoEncryptCard.vue
index 6ea6c3b..17563cd 100644
--- a/src/components/utilcards/MemoEncryptCard.vue
+++ b/src/components/utilcards/MemoEncryptCard.vue
@@ -11,6 +11,7 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
+import type CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 const walletStore = useWalletStore();
 const settingsStore = useSettingsStore();
@@ -45,9 +46,16 @@ const useMyMemoKey = async () => {
     if (!hasWallet.value)
       await walletStore.openWalletSelectModal();
 
-    const key = await getMemoKeyForUser(settingsStore.account!);
-    if (key)
-      encryptForKey.value = key;
+    if(walletStore.isL2Wallet) {
+      // XXX: Maybe handle this in a better way in the future - maybe a common interface for L2 wallets?
+      const key = (wallet.value as CTokensProvider)!.publicKey;
+      if (key)
+        encryptForKey.value = key;
+    } else {
+      const key = await getMemoKeyForUser(settingsStore.account!);
+      if (key)
+        encryptForKey.value = key;
+    }
   } finally {
     isLoading.value = false;
   }
@@ -104,7 +112,7 @@ const encryptOrDecrypt = async () => {
     <CardContent>
       <Tabs
         default-value="decrypt"
-        @update:model-value="value => isEncrypt = value === 'encrypt'"
+        @update:model-value="(value: string) => isEncrypt = value === 'encrypt'"
       >
         <TabsList>
           <TabsTrigger value="decrypt">
diff --git a/src/components/utilcards/TransferCard.vue b/src/components/utilcards/TransferCard.vue
deleted file mode 100644
index a79d925..0000000
--- a/src/components/utilcards/TransferCard.vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<script setup lang="ts">
-import type { NaiAsset } from '@hiveio/wax';
-import { mdiSendOutline } from '@mdi/js';
-import { ref, computed } from 'vue';
-
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle
-} from '@/components/ui/card';
-import AccountNameInput from '@/components/ui/hive/AccountNameInput.vue';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select';
-import { stringifyWalletName, useSettingsStore } from '@/stores/settings.store';
-import { useUserStore } from '@/stores/user.store';
-import { useWalletStore } from '@/stores/wallet.store';
-import { getWax } from '@/stores/wax.store';
-import { toastError } from '@/utils/parse-error';
-
-const settingsStore = useSettingsStore();
-const userStore = useUserStore();
-
-const isLoading = ref(false);
-const isValidAccountName = ref(false);
-const to = ref('');
-const amount = ref('');
-const memo = ref('');
-const currency = ref<'HIVE' | 'HBD'>('HIVE');
-const walletStore = useWalletStore();
-
-const hasWallet = computed(() => walletStore.hasWallet);
-const wallet = computed(() => walletStore.wallet);
-
-const availableBalance = computed(() => {
-  if (currency.value === 'HIVE')
-    return userStore.balances?.HIVE.liquid.stringValue || '0.000';
-  else
-    return userStore.balances?.HBD.liquid.stringValue || '0.000';
-
-});
-
-const errorMessage = ref('');
-
-const parseBalances = async (isDirectCall: boolean) => {
-  errorMessage.value = '';
-
-  if (amount.value === '')
-    return null;
-
-  const wax = await getWax();
-
-  const asset = wax.ASSETS[currency.value];
-  const amountRaw = BigInt(Math.floor(parseFloat(amount.value) * (10 ** asset.precision)));
-  const availableRaw = userStore.balances?.[currency.value].liquid.amount || 0n;
-  if (amountRaw > availableRaw) {
-    const errorData = `Insufficient balance. Requested: ${amountRaw} satoshis, Available: ${availableRaw} satoshis`;
-
-    if (isDirectCall)
-      throw new Error(errorData);
-    else
-      return errorMessage.value = errorData;
-  }
-
-  return {
-    amount: String(amountRaw),
-    precision: asset.precision,
-    nai: asset.nai
-  } as NaiAsset;
-};
-
-const handleTransfer = async () => {
-  try {
-    isLoading.value = true;
-
-    if (!hasWallet.value)
-      await walletStore.openWalletSelectModal();
-
-    const wax = await getWax();
-
-    const amount = await parseBalances(true);
-
-    const tx = await wax.createTransaction();
-    tx.pushOperation({
-      transfer_operation: {
-        from: settingsStore.settings.account!,
-        to: to.value,
-        amount: amount as NaiAsset,
-        memo: memo.value || ''
-      }
-    });
-
-    try {
-      await walletStore.createWalletFor(settingsStore.settings, 'active');
-    } catch (error) {
-      toastError(`Could not create a wallet using ${stringifyWalletName(settingsStore.settings.wallet!)} - role active`, error);
-      return;
-    }
-
-    await wallet.value!.signTransaction(tx);
-
-    await wax.broadcast(tx);
-  } catch (error) {
-    toastError('Error signing transaction', error);
-  } finally {
-    isLoading.value = false;
-  }
-};
-</script>
-
-<template>
-  <Card class="w-full max-w-md">
-    <CardHeader>
-      <CardTitle class="inline-flex items-center justify-between">
-        <span>Transfer funds</span>
-        <svg
-          width="20"
-          height="20"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-        ><path
-          style="fill: hsla(var(--foreground) / 80%)"
-          :d="mdiSendOutline"
-        /></svg>
-      </CardTitle>
-      <CardDescription>Send HIVE or HBD to another user.</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <form @submit.prevent="handleTransfer">
-        <div class="grid w-full items-center gap-4">
-          <div class="flex flex-col space-y-1.5">
-            <Label for="to">Recipient</Label>
-            <AccountNameInput
-              id="to"
-              v-model="to"
-              label=""
-              placeholder="Enter recipient's username"
-              require-exists
-              @validation-change="value => { isValidAccountName = value; }"
-            />
-          </div>
-          <div class="flex flex-col space-y-1.5">
-            <Label for="amount">Amount</Label>
-            <div class="flex gap-2">
-              <Input
-                id="amount"
-                v-model="amount"
-                type="number"
-                placeholder="0.000"
-                class="flex-grow"
-                @update:model-value="parseBalances(false)"
-              />
-              <Select v-model="currency">
-                <SelectTrigger class="w-[100px]">
-                  <SelectValue placeholder="Currency" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="HIVE">
-                    HIVE
-                  </SelectItem>
-                  <SelectItem value="HBD">
-                    HBD
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <p class="text-sm text-muted-foreground">
-              Available: {{ availableBalance }} {{ currency }}
-            </p>
-            <span
-              v-if="errorMessage"
-              class="text-red-500 text-sm"
-            >{{ errorMessage }}</span>
-          </div>
-          <div class="flex flex-col space-y-1.5">
-            <Label for="memo">Memo (Optional)</Label>
-            <Input
-              id="memo"
-              v-model="memo"
-              placeholder="Enter a memo"
-            />
-          </div>
-        </div>
-      </form>
-    </CardContent>
-    <CardFooter>
-      <Button
-        :disabled="!to || !amount || !isValidAccountName || isLoading"
-        :loading="isLoading"
-        class="w-full"
-        @click="handleTransfer"
-      >
-        Transfer
-      </Button>
-    </CardFooter>
-  </Card>
-</template>
diff --git a/src/pages/finances/transfer.vue b/src/pages/finances/transfer.vue
deleted file mode 100644
index 9ea5dd4..0000000
--- a/src/pages/finances/transfer.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import TransferCard from '@/components/utilcards/TransferCard.vue';
-</script>
-
-<template>
-  <div class="flex p-8">
-    <TransferCard />
-  </div>
-</template>
diff --git a/src/pages/finances/create-token.vue b/src/pages/tokens/create.vue
similarity index 100%
rename from src/pages/finances/create-token.vue
rename to src/pages/tokens/create.vue
diff --git a/src/pages/finances/token-holders.vue b/src/pages/tokens/holders.vue
similarity index 100%
rename from src/pages/finances/token-holders.vue
rename to src/pages/tokens/holders.vue
diff --git a/src/pages/finances/account-balances.vue b/src/pages/tokens/my-balance.vue
similarity index 100%
rename from src/pages/finances/account-balances.vue
rename to src/pages/tokens/my-balance.vue
diff --git a/src/pages/finances/token-definitions.vue b/src/pages/tokens/my-tokens.vue
similarity index 100%
rename from src/pages/finances/token-definitions.vue
rename to src/pages/tokens/my-tokens.vue
diff --git a/src/stores/metamask.store.ts b/src/stores/metamask.store.ts
index bc48f0e..49ca9ed 100644
--- a/src/stores/metamask.store.ts
+++ b/src/stores/metamask.store.ts
@@ -1,17 +1,21 @@
 import type { TRole } from '@hiveio/wax';
 import MetamaskProvider from '@hiveio/wax-signers-metamask';
 import { defineStore } from 'pinia';
+import { shallowRef } from 'vue';
 
 import { defaultSnapOrigin, defaultSnapVersion } from '@/utils/wallet/metamask/snap';
 
+// Do not watch for changes inside the metamask wallet - its only a tool we call functions from
+const metamaskWallet = shallowRef<MetamaskProvider | undefined>(undefined);
+
 export const useMetamaskStore = defineStore('metamask', {
   state: () => ({
-    metamask: undefined as undefined | MetamaskProvider,
     performingOperation: false
   }),
   getters: {
-    isConnected: state => !!state.metamask,
-    isFlask: state => state.metamask?.isFlaskDetected
+    metamask: () => metamaskWallet.value,
+    isConnected: () => !!metamaskWallet.value,
+    isFlask: () => metamaskWallet.value?.isFlaskDetected
   },
   actions: {
     async call (method: string, params: unknown[] | Record<string, unknown> | undefined) {
@@ -31,7 +35,7 @@ export const useMetamaskStore = defineStore('metamask', {
         this.performingOperation = true;
 
         console.log('Connecting to Metamask with account index:', accountIndex, 'and role:', role);
-        this.metamask = await MetamaskProvider.for(accountIndex, role, defaultSnapOrigin);
+        metamaskWallet.value = await MetamaskProvider.for(accountIndex, role, defaultSnapOrigin);
       } finally {
         this.performingOperation = false;
       }
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index dd49887..44413bc 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -35,7 +35,7 @@ export const useTokensStore = defineStore('tokens', {
     hasTokenDefinitions: (state) => state.tokenDefinitions.length > 0
   },
   actions: {
-    async loadBalances(forceRefresh = false) {
+    async loadBalances (forceRefresh = false) {
       const operationalKey = getUserOperationalKey();
 
       if (!operationalKey) {
@@ -113,7 +113,7 @@ export const useTokensStore = defineStore('tokens', {
         this.isLoadingBalances = false;
       }
     },
-    async loadTokenDefinitions(creator?: string, forceRefresh = false) {
+    async loadTokenDefinitions (creator?: string, forceRefresh = false) {
       if (this.isLoadingTokens && !forceRefresh) return;
 
       this.isLoadingTokens = true;
@@ -161,29 +161,29 @@ export const useTokensStore = defineStore('tokens', {
         this.isLoadingTokens = false;
       }
     },
-    async getBalanceHistory(nai: string, precision: number, page = 1): Promise<CTokenBalanceHistory[]> {
+    async getBalanceHistory (nai: string, precision: number, page = 1): Promise<CTokenBalanceHistory[]> {
       const operationalKey = getUserOperationalKey();
       if (!operationalKey)
         throw new Error('No operational key available');
 
       return cTokensApi.getBalanceHistory(operationalKey, nai, precision, page);
     },
-    async getTopHolders(nai: string, precision: number, page = 1): Promise<CTokenTopHolder[]> {
+    async getTopHolders (nai: string, precision: number, page = 1): Promise<CTokenTopHolder[]> {
       return cTokensApi.getTopHolders(nai, precision, page);
     },
-    getTokenByNAI(nai: string): LegacyTokenBalance | undefined {
+    getTokenByNAI (nai: string): LegacyTokenBalance | undefined {
       return this.balances.find(balance => balance.nai === nai);
     },
-    getTokenDefinitionByNAI(nai: string): LegacyTokenDefinition | undefined {
+    getTokenDefinitionByNAI (nai: string): LegacyTokenDefinition | undefined {
       return this.tokenDefinitions.find(token => token.nai === nai);
     },
-    async refreshAll() {
+    async refreshAll () {
       await Promise.all([
         this.loadBalances(true),
         this.loadTokenDefinitions(undefined, true)
       ]);
     },
-    clearError() {
+    clearError () {
       this.lastError = null;
     }
   }
diff --git a/src/stores/wallet.store.ts b/src/stores/wallet.store.ts
index 72db51f..4f1e0b2 100644
--- a/src/stores/wallet.store.ts
+++ b/src/stores/wallet.store.ts
@@ -3,6 +3,7 @@ import KeychainProvider from '@hiveio/wax-signers-keychain';
 import MetaMaskProvider from '@hiveio/wax-signers-metamask';
 import PeakVaultProvider from '@hiveio/wax-signers-peakvault';
 import { defineStore } from 'pinia';
+import { shallowRef } from 'vue';
 import { toast } from 'vue-sonner';
 
 import { getWax } from '@/stores/wax.store';
@@ -16,6 +17,9 @@ let walletRetrievalIntervalId: NodeJS.Timeout | undefined;
 
 const intervalIds = new Set<NodeJS.Timeout>();
 
+// Do not watch for changes inside the current wallet - its only a tool we call functions from
+const currentWallet = shallowRef<AEncryptionProvider | undefined>(undefined);
+
 export const useWalletStore = defineStore('wallet', {
   state: () => ({
     _walletsStatus: {
@@ -25,12 +29,12 @@ export const useWalletStore = defineStore('wallet', {
       ctokens: true
     },
     isL2Wallet: false,
-    wallet: undefined as undefined | AEncryptionProvider,
     isWalletSelectModalOpen: false,
     isProvideWalletPasswordModalOpen: false
   }),
   getters: {
-    hasWallet: state => !!state.wallet,
+    wallet: () => currentWallet.value,
+    hasWallet: () => !!currentWallet.value,
     walletsStatus: state => {
       if (!walletRetrievalIntervalId) {
         const checkForWallets = () => {
@@ -82,19 +86,19 @@ export const useWalletStore = defineStore('wallet', {
 
         await metamaskStore.connect(0, role);
 
-        this.wallet = metamaskStore.metamask;
+        currentWallet.value = metamaskStore.metamask;
         this.isL2Wallet = false;
 
         break;
       }
       case UsedWallet.KEYCHAIN: {
-        this.wallet = KeychainProvider.for(settings.account!, role);
+        currentWallet.value = KeychainProvider.for(settings.account!, role);
         this.isL2Wallet = false;
 
         break;
       }
       case UsedWallet.PEAKVAULT: {
-        this.wallet = PeakVaultProvider.for(settings.account!, role);
+        currentWallet.value = PeakVaultProvider.for(settings.account!, role);
         this.isL2Wallet = false;
 
         break;
@@ -110,7 +114,7 @@ export const useWalletStore = defineStore('wallet', {
 
         const wax = await getWax();
 
-        this.wallet = await CTokensProvider.for(wax, role);
+        currentWallet.value = await CTokensProvider.for(wax, role);
 
         const tokensStore = useTokensStore();
 
@@ -124,8 +128,8 @@ export const useWalletStore = defineStore('wallet', {
       }
     },
     resetWallet () {
-      (this.wallet as AEncryptionProvider & { destroy?: () => void })?.destroy?.();
-      this.wallet = undefined;
+      (currentWallet.value as AEncryptionProvider & { destroy?: () => void })?.destroy?.();
+      currentWallet.value = undefined;
     }
   }
 });
diff --git a/src/utils/router.ts b/src/utils/router.ts
index 028b54f..b210eeb 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -2,14 +2,13 @@ import AccountCreate from '@/pages/account/create.vue';
 import RequestCreate from '@/pages/account/request.vue';
 import AccountUpdate from '@/pages/account/update.vue';
 import DappAuthorize from '@/pages/automation/authorize.vue';
-import AccountBalances from '@/pages/finances/account-balances.vue';
-import CreateToken from '@/pages/finances/create-token.vue';
-import TokenDefinitions from '@/pages/finances/token-definitions.vue';
-import TokenHolders from '@/pages/finances/token-holders.vue';
-import Transfer from '@/pages/finances/transfer.vue';
 import Index from '@/pages/index.vue';
 import SignMessage from '@/pages/sign/message.vue';
 import SignTransaction from '@/pages/sign/transaction.vue';
+import CreateToken from '@/pages/tokens/create.vue';
+import TokenHolders from '@/pages/tokens/holders.vue';
+import AccountBalances from '@/pages/tokens/my-balance.vue';
+import TokenDefinitions from '@/pages/tokens/my-tokens.vue';
 
 export const routes = [
   { path: '/', component: Index },
@@ -18,10 +17,9 @@ export const routes = [
   { path: '/account/create', component: AccountCreate },
   { path: '/account/request', component: RequestCreate },
   { path: '/account/update', component: AccountUpdate },
-  { path: '/finances/transfer', component: Transfer },
-  { path: '/finances/create-token', component: CreateToken },
-  { path: '/finances/token-definitions', component: TokenDefinitions },
-  { path: '/finances/token-holders', component: TokenHolders },
-  { path: '/finances/account-balances', component: AccountBalances },
+  { path: '/tokens/create', component: CreateToken },
+  { path: '/tokens/my-tokens', component: TokenDefinitions },
+  { path: '/tokens/my-balance', component: AccountBalances },
+  { path: '/tokens/holders', component: TokenHolders },
   { path: '/automation/authorize', component: DappAuthorize }
 ];
-- 
GitLab


From e15a732feca18083eba226b4f6a79210af90599b Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 9 Oct 2025 16:25:31 +0200
Subject: [PATCH 009/102] Fix dApp auth

---
 .../utilcards/AuthorizeDappCard.vue           | 305 ++++++++++--------
 .../utilcards/SignTransactionCard.vue         |  12 +
 src/stores/wax.store.ts                       |   2 +-
 src/utils/wallet/ctokens/signer.ts            |   2 +-
 4 files changed, 179 insertions(+), 142 deletions(-)

diff --git a/src/components/utilcards/AuthorizeDappCard.vue b/src/components/utilcards/AuthorizeDappCard.vue
index 67811a1..c6f7306 100644
--- a/src/components/utilcards/AuthorizeDappCard.vue
+++ b/src/components/utilcards/AuthorizeDappCard.vue
@@ -3,6 +3,7 @@ import { Globe, Check, Users, AlertCircle, Clock } from 'lucide-vue-next';
 import { computed, onMounted, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import Button from '@/components/ui/button/Button.vue';
 import Skeleton from '@/components/ui/skeleton/Skeleton.vue';
@@ -40,15 +41,22 @@ const isLoading = ref(true);
 
 const authorized = ref(false);
 
-onMounted(async () => {
+const failed = ref(false);
+
+const fetchAppMetadata = async () => {
   isLoading.value = true;
   try {
     appData.value = await userStore.getAccountMetadata(props.app);
   } catch (e) {
     toastError('Failed to fetch dApp metadata', e);
+    failed.value = true;
   } finally {
     isLoading.value = false;
   }
+};
+
+onMounted(() => {
+  void fetchAppMetadata();
 });
 
 const isAuthorizing = ref(false);
@@ -97,172 +105,189 @@ const authorize = async () => {
 </script>
 
 <template>
-  <div class="rounded-lg shadow border w-full max-w-[500px] p-8">
-    <!-- Header Section -->
-    <div class="text-center mb-8">
-      <!-- App Icons -->
-      <div class="flex items-center justify-center mb-6">
-        <div class="relative flex items-center">
-          <!-- User Avatar -->
-          <div class="w-16 h-16 border border-gray-200 dark:border-gray-600 rounded-full flex items-center justify-center">
-            <Avatar class="w-full h-full">
-              <AvatarImage
-                v-if="userStore.profileImage"
-                :src="userStore.profileImage"
-              />
-              <AvatarFallback v-if="settings.isLoaded">
-                {{ settings.settings.account?.slice(0, 2) }}
-              </AvatarFallback>
-            </Avatar>
-          </div>
+  <div>
+    <div
+      v-if="failed"
+      class="rounded-lg shadow border w-full max-w-[500px] p-8"
+    >
+      <Alert variant="destructive">
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>
+          Could not load dApp information for <code class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-2 py-1 rounded text-xs">{{ props.app }}</code>.<br>
+          Please check the app name and try again.
+        </AlertDescription>
+      </Alert>
+    </div>
+    <div
+      v-else
+      class="rounded-lg shadow border w-full max-w-[500px] p-8"
+    >
+      <!-- Header Section -->
+      <div class="text-center mb-8">
+        <!-- App Icons -->
+        <div class="flex items-center justify-center mb-6">
+          <div class="relative flex items-center">
+            <!-- User Avatar -->
+            <div class="w-16 h-16 border border-gray-200 dark:border-gray-600 rounded-full flex items-center justify-center">
+              <Avatar class="w-full h-full">
+                <AvatarImage
+                  v-if="userStore.profileImage"
+                  :src="userStore.profileImage"
+                />
+                <AvatarFallback v-if="settings.isLoaded">
+                  {{ settings.settings.account?.slice(0, 2) }}
+                </AvatarFallback>
+              </Avatar>
+            </div>
+
+            <!-- Dashed connecting line -->
+            <div class="mx-0 flex-1 border-t-2 border-dashed border-gray-300 dark:border-gray-600 relative w-[100px]">
+              <!-- Connection indicator -->
+              <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
+                <Check class="w-4 h-4 text-white" />
+              </div>
+            </div>
 
-          <!-- Dashed connecting line -->
-          <div class="mx-0 flex-1 border-t-2 border-dashed border-gray-300 dark:border-gray-600 relative w-[100px]">
-            <!-- Connection indicator -->
-            <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
-              <Check class="w-4 h-4 text-white" />
+            <!-- DApp Logo -->
+            <div class="w-16 h-16 border border-gray-200 dark:border-gray-600 rounded-full flex items-center justify-center">
+              <template v-if="isLoading">
+                <Skeleton class="w-16 h-16 rounded-full" />
+              </template>
+              <template v-else-if="appData?.profileImage">
+                <img
+                  :src="appData.profileImage"
+                  :alt="`${appData.accountName} logo`"
+                  class="w-16 h-16 rounded-full object-cover"
+                >
+              </template>
+              <template v-else>
+                <div class="w-8 h-8 bg-gray-200 dark:bg-gray-600 rounded-full" />
+              </template>
             </div>
           </div>
+        </div>
+
+        <!-- Title -->
+        <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
+          <template v-if="isLoading">
+            <Skeleton class="h-6 w-48 mx-auto" />
+          </template>
+          <template v-else>
+            Authorize {{ appData?.displayName || props.app }}
+          </template>
+        </h1>
+      </div>
 
-          <!-- DApp Logo -->
-          <div class="w-16 h-16 border border-gray-200 dark:border-gray-600 rounded-full flex items-center justify-center">
+      <!-- Authorization Details -->
+      <div class="border rounded-lg p-4 mb-6">
+        <!-- App Info -->
+        <div class="flex items-start mb-4">
+          <div class="w-8 h-8 rounded-full border border-gray-200 dark:border-gray-600 overflow-hidden mr-3 flex-shrink-0">
             <template v-if="isLoading">
-              <Skeleton class="w-16 h-16 rounded-full" />
+              <Skeleton class="w-8 h-8 rounded-full" />
             </template>
             <template v-else-if="appData?.profileImage">
               <img
                 :src="appData.profileImage"
                 :alt="`${appData.accountName} logo`"
-                class="w-16 h-16 rounded-full object-cover"
+                class="w-8 h-8 object-cover"
               >
             </template>
             <template v-else>
-              <div class="w-8 h-8 bg-gray-200 dark:bg-gray-600 rounded-full" />
+              <div class="w-8 h-8 bg-gray-300 dark:bg-gray-600 rounded-full" />
             </template>
           </div>
+
+          <div class="flex-1">
+            <div class="flex items-center">
+              <template v-if="isLoading">
+                <Skeleton class="h-4 w-24" />
+              </template>
+              <template v-else>
+                <span class="font-medium text-gray-900 dark:text-gray-100 break-all">{{ appData?.displayName || props.app }}</span>
+                <span class="text-gray-500 dark:text-gray-400 text-sm ml-1">by</span>
+                <span class="text-blue-600 dark:text-blue-400 text-sm ml-1 break-all">
+                  <a
+                    target="_blank"
+                    :href="'https://hive.blog/@' + props.app"
+                  >{{ props.app }}</a>
+                </span>
+              </template>
+            </div>
+            <div class="text-sm text-gray-600 dark:text-gray-300 ml-[1px]">
+              <template v-if="isLoading">
+                <Skeleton class="h-4 w-32 mt-1" />
+              </template>
+              <template v-else>
+                wants to access your <span class="font-medium">{{ userStore.userDisplayName }}</span> account
+              </template>
+            </div>
+          </div>
+        </div>
+
+        <!-- Permissions -->
+        <div class="flex items-start">
+          <Globe class="w-8 h-8 text-gray-600 dark:text-gray-400 mr-3 mt-0.5 flex-shrink-0" />
+          <div>
+            <div class="font-medium text-gray-900 dark:text-gray-100">
+              Public data only
+            </div>
+            <div class="text-sm text-gray-600 dark:text-gray-300 ml-[1px]">
+              Limited access to your public data
+            </div>
+          </div>
         </div>
       </div>
 
-      <!-- Title -->
-      <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
+      <!-- Authorize Button -->
+      <div class="flex items-center justify-center mb-4">
+        <Button
+          :disabled="isLoading || authorized"
+          :loading="isAuthorizing"
+          @click="authorize"
+        >
+          {{ authorized ? 'Authorized' : `Authorize ${props.app}` }}
+        </Button>
+      </div>
+
+      <!-- Redirect Notice -->
+      <div class="text-center text-sm text-gray-600 dark:text-gray-300 mb-6">
         <template v-if="isLoading">
-          <Skeleton class="h-6 w-48 mx-auto" />
+          <Skeleton class="h-4 w-48 mx-auto mb-1" />
+          <Skeleton class="h-4 w-36 mx-auto" />
         </template>
         <template v-else>
-          Authorize {{ appData?.displayName || props.app }}
+          Authorizing will broadcast operation with<br>custom app code
+          <code class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-2 py-1 rounded text-xs">{{ props.code }}</code>
+          to the Hive blockchain
         </template>
-      </h1>
-    </div>
+      </div>
 
-    <!-- Authorization Details -->
-    <div class="border rounded-lg p-4 mb-6">
-      <!-- App Info -->
-      <div class="flex items-start mb-4">
-        <div class="w-8 h-8 rounded-full border border-gray-200 dark:border-gray-600 overflow-hidden mr-3 flex-shrink-0">
-          <template v-if="isLoading">
-            <Skeleton class="w-8 h-8 rounded-full" />
-          </template>
-          <template v-else-if="appData?.profileImage">
-            <img
-              :src="appData.profileImage"
-              :alt="`${appData.accountName} logo`"
-              class="w-8 h-8 object-cover"
-            >
-          </template>
-          <template v-else>
-            <div class="w-8 h-8 bg-gray-300 dark:bg-gray-600 rounded-full" />
-          </template>
+      <!-- App Stats -->
+      <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-600 pt-4">
+        <div class="flex items-center">
+          <AlertCircle class="w-4 h-4 mr-1" />
+          <span><b>Not</b> owned or<br>operated by Hive Bridge</span>
         </div>
-
-        <div class="flex-1">
-          <div class="flex items-center">
-            <template v-if="isLoading">
-              <Skeleton class="h-4 w-24" />
-            </template>
-            <template v-else>
-              <span class="font-medium text-gray-900 dark:text-gray-100 break-all">{{ appData?.displayName || props.app }}</span>
-              <span class="text-gray-500 dark:text-gray-400 text-sm ml-1">by</span>
-              <span class="text-blue-600 dark:text-blue-400 text-sm ml-1 break-all">
-                <a
-                  target="_blank"
-                  :href="'https://hive.blog/@' + props.app"
-                >{{ props.app }}</a>
-              </span>
-            </template>
-          </div>
-          <div class="text-sm text-gray-600 dark:text-gray-300 ml-[1px]">
-            <template v-if="isLoading">
-              <Skeleton class="h-4 w-32 mt-1" />
-            </template>
-            <template v-else>
-              wants to access your <span class="font-medium">{{ settings.account }}</span> account
-            </template>
-          </div>
+        <div class="flex items-center">
+          <Clock class="w-4 h-4 mr-1" />
+          <span v-if="isLoading">
+            <Skeleton class="h-4 w-16" />
+          </span>
+          <span v-else>
+            <span>Created<br><b>{{ appData?.createdAgo }}</b></span>
+          </span>
         </div>
-      </div>
-
-      <!-- Permissions -->
-      <div class="flex items-start">
-        <Globe class="w-8 h-8 text-gray-600 dark:text-gray-400 mr-3 mt-0.5 flex-shrink-0" />
-        <div>
-          <div class="font-medium text-gray-900 dark:text-gray-100">
-            Public data only
-          </div>
-          <div class="text-sm text-gray-600 dark:text-gray-300 ml-[1px]">
-            Limited access to your public data
-          </div>
+        <div class="flex items-center">
+          <Users class="w-4 h-4 mr-1" />
+          <span v-if="isLoading">
+            <Skeleton class="h-4 w-16" />
+          </span>
+          <span v-else>
+            <span>Reputation<br><b>{{ appData?.reputation }}</b></span>
+          </span>
         </div>
       </div>
     </div>
-
-    <!-- Authorize Button -->
-    <div class="flex items-center justify-center mb-4">
-      <Button
-        :disabled="isLoading || authorized"
-        :loading="isAuthorizing"
-        @click="authorize"
-      >
-        {{ authorized ? 'Authorized' : `Authorize ${props.app}` }}
-      </Button>
-    </div>
-
-    <!-- Redirect Notice -->
-    <div class="text-center text-sm text-gray-600 dark:text-gray-300 mb-6">
-      <template v-if="isLoading">
-        <Skeleton class="h-4 w-48 mx-auto mb-1" />
-        <Skeleton class="h-4 w-36 mx-auto" />
-      </template>
-      <template v-else>
-        Authorizing will broadcast operation with<br>custom app code
-        <code class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-2 py-1 rounded text-xs">{{ props.code }}</code>
-        to the Hive blockchain
-      </template>
-    </div>
-
-    <!-- App Stats -->
-    <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-600 pt-4">
-      <div class="flex items-center">
-        <AlertCircle class="w-4 h-4 mr-1" />
-        <span><b>Not</b> owned or<br>operated by Hive Bridge</span>
-      </div>
-      <div class="flex items-center">
-        <Clock class="w-4 h-4 mr-1" />
-        <span v-if="isLoading">
-          <Skeleton class="h-4 w-16" />
-        </span>
-        <span v-else>
-          <span>Created<br><b>{{ appData?.createdAgo }}</b></span>
-        </span>
-      </div>
-      <div class="flex items-center">
-        <Users class="w-4 h-4 mr-1" />
-        <span v-if="isLoading">
-          <Skeleton class="h-4 w-16" />
-        </span>
-        <span v-else>
-          <span>Reputation<br><b>{{ appData?.reputation }}</b></span>
-        </span>
-      </div>
-    </div>
   </div>
 </template>
diff --git a/src/components/utilcards/SignTransactionCard.vue b/src/components/utilcards/SignTransactionCard.vue
index 97aed31..e23afcb 100644
--- a/src/components/utilcards/SignTransactionCard.vue
+++ b/src/components/utilcards/SignTransactionCard.vue
@@ -5,6 +5,7 @@ import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -132,6 +133,17 @@ onMounted(() => {
       </CardDescription>
     </CardHeader>
     <CardContent>
+      <Alert
+        v-if="walletStore.isL2Wallet"
+        variant="warning"
+      >
+        <AlertCircle class="w-4 h-4" />
+        <AlertTitle>Potential Layer mismatch warning</AlertTitle>
+        <AlertDescription>
+          You are using a Layer 2 wallet, but signing transactions is only supported using Layer 1 wallets.<br>
+          Make sure you know what you are doing or switch to a Layer 1 wallet.
+        </AlertDescription>
+      </Alert>
       <Textarea
         v-model="inputData"
         placeholder="Transaction in API JSON form"
diff --git a/src/stores/wax.store.ts b/src/stores/wax.store.ts
index c5bf84c..eae299d 100644
--- a/src/stores/wax.store.ts
+++ b/src/stores/wax.store.ts
@@ -145,7 +145,7 @@ export const getWax = async () => {
     chain = (await (await import('@hiveio/wax/vite')).createHiveChain()).extend<WaxApi>().extendRest(CTokensApi);
 
     // These steps are repeated in the CtokensProvider constructor, but we need them here too as for now - maybe find a better way of handling this?
-    chain.restApi.ctokensApi.endpointUrl = DEFAULT_CTOKENS_API_URL;
+    chain.restApi.ctokensApi.endpointUrl = import.meta.env.VITE_CTOKENS_API_URL || DEFAULT_CTOKENS_API_URL;
   }
 
   return chain;
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index 0e0ae26..b2d1765 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -139,7 +139,7 @@ export class CTokensProvider extends AEncryptionProvider {
     return { management, operational };
   }
 
-  public static async for (chain: IHiveChainInterface, role: TRole, ctokensUrl: string = DEFAULT_CTOKENS_API_URL): Promise<CTokensProvider> {
+  public static async for (chain: IHiveChainInterface, role: TRole, ctokensUrl: string = (import.meta.env.VITE_CTOKENS_API_URL || DEFAULT_CTOKENS_API_URL)): Promise<CTokensProvider> {
     if (role === 'owner') {
       if (!CTokensProvider.#managementWallet)
         throw new WaxCTokensEncryptionProviderError('Owner wallet is not available. Make sure to login with the correct password and import the required key.');
-- 
GitLab


From 196380682491dad4fe368af75490aed1a9fd092b Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 9 Oct 2025 16:37:58 +0200
Subject: [PATCH 010/102] Add registering HTM account

---
 src/components/navigation/AppHeader.vue  |  3 +++
 src/components/navigation/AppSidebar.vue |  9 +++++++++
 src/pages/tokens/register-account.vue    | 21 +++++++++++++++++++++
 src/stores/tokens.store.ts               | 10 ++++++++--
 src/stores/wallet.store.ts               |  2 +-
 src/utils/router.ts                      |  2 ++
 6 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/tokens/register-account.vue

diff --git a/src/components/navigation/AppHeader.vue b/src/components/navigation/AppHeader.vue
index 9eb07f4..aef4594 100644
--- a/src/components/navigation/AppHeader.vue
+++ b/src/components/navigation/AppHeader.vue
@@ -7,6 +7,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import ThemeSwitch from '@/components/ui/theme-switch';
 import { useSettingsStore, getWalletIcon } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
 import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
 
@@ -14,11 +15,13 @@ const settingsStore = useSettingsStore();
 const hasUser = computed(() => settingsStore.settings.account !== undefined);
 const walletStore = useWalletStore();
 const userStore = useUserStore();
+const tokensStore = useTokensStore();
 
 const logout = () => {
   settingsStore.resetSettings();
   walletStore.resetWallet();
   userStore.resetSettings();
+  tokensStore.reset();
 };
 </script>
 
diff --git a/src/components/navigation/AppSidebar.vue b/src/components/navigation/AppSidebar.vue
index 712b7a0..37ffc27 100644
--- a/src/components/navigation/AppSidebar.vue
+++ b/src/components/navigation/AppSidebar.vue
@@ -6,6 +6,7 @@ import { useRouter } from 'vue-router';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { Sidebar, SidebarContent, SidebarHeader, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem , useSidebar } from '@/components/ui/sidebar';
+import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { defaultSnapOrigin, defaultSnapVersion } from '@/utils/wallet/metamask/snap';
@@ -14,9 +15,11 @@ const router = useRouter();
 
 const { toggleSidebar, isMobile } = useSidebar();
 
+const tokensStore = useTokensStore();
 const walletStore = useWalletStore();
 
 const isL1BasedView = computed(() => walletStore.hasWallet && !walletStore.isL2Wallet);
+const hasNoHTMWallet = computed(() => !tokensStore.wallet);
 
 const groups: { title: string; items: Array<{ title: string; url: string; icon: string; badge?: string; visible?: Ref<boolean>; disabled?: Ref<boolean> }> }[] = [{
   title: 'Hive Account Management',
@@ -47,6 +50,12 @@ const groups: { title: string; items: Array<{ title: string; url: string; icon:
 }, {
   title: 'Tokens',
   items: [
+    {
+      title: 'Register HTM Account',
+      url: '/tokens/register-account',
+      icon: mdiAccountPlusOutline,
+      visible: hasNoHTMWallet
+    },
     {
       title: 'Token Balances',
       url: '/tokens/my-balance',
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
new file mode 100644
index 0000000..a6e1be0
--- /dev/null
+++ b/src/pages/tokens/register-account.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue';
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center h-full text-center px-4">
+    <h1 class="text-2xl font-bold mb-4">
+      Register HTM Account
+    </h1>
+    <p class="mb-6">
+      To manage your tokens, you need to register an HTM account. Click the button below to get started.
+    </p>
+    <Button
+      size="lg"
+      color="primary"
+    >
+      <!-- TODO: Actual registration / Allow to log into HTM account -->
+      Register HTM Account
+    </Button>
+  </div>
+</template>
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 44413bc..fa4ee27 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import { shallowRef } from 'vue';
 
 import {
   cTokensApi,
@@ -12,16 +13,18 @@ import {
 } from '@/utils/ctokens-api';
 import type CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+const cTokensProvider = shallowRef<CTokensProvider | undefined>(undefined);
+
 export const useTokensStore = defineStore('tokens', {
   state: () => ({
     balances: [] as LegacyTokenBalance[],
     tokenDefinitions: [] as LegacyTokenDefinition[],
     isLoadingBalances: false,
     isLoadingTokens: false,
-    lastError: null as string | null,
-    wallet: undefined as CTokensProvider | undefined
+    lastError: null as string | null
   }),
   getters: {
+    wallet: () => cTokensProvider.value,
     totalValue: (state) => {
       return state.balances.reduce((total, balance) => {
         // Mock price of $0.01 per token for now
@@ -185,6 +188,9 @@ export const useTokensStore = defineStore('tokens', {
     },
     clearError () {
       this.lastError = null;
+    },
+    reset (cTokensWallet?: CTokensProvider | undefined) {
+      cTokensProvider.value = cTokensWallet;
     }
   }
 });
diff --git a/src/stores/wallet.store.ts b/src/stores/wallet.store.ts
index 4f1e0b2..8606ced 100644
--- a/src/stores/wallet.store.ts
+++ b/src/stores/wallet.store.ts
@@ -118,7 +118,7 @@ export const useWalletStore = defineStore('wallet', {
 
         const tokensStore = useTokensStore();
 
-        tokensStore.wallet = this.wallet as CTokensProvider;
+        tokensStore.reset(currentWallet.value as CTokensProvider);
         this.isL2Wallet = true;
 
         break;
diff --git a/src/utils/router.ts b/src/utils/router.ts
index b210eeb..a486032 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -9,6 +9,7 @@ import CreateToken from '@/pages/tokens/create.vue';
 import TokenHolders from '@/pages/tokens/holders.vue';
 import AccountBalances from '@/pages/tokens/my-balance.vue';
 import TokenDefinitions from '@/pages/tokens/my-tokens.vue';
+import RegisterHTMAccount from '@/pages/tokens/register-account.vue';
 
 export const routes = [
   { path: '/', component: Index },
@@ -17,6 +18,7 @@ export const routes = [
   { path: '/account/create', component: AccountCreate },
   { path: '/account/request', component: RequestCreate },
   { path: '/account/update', component: AccountUpdate },
+  { path: '/tokens/register-account', component: RegisterHTMAccount },
   { path: '/tokens/create', component: CreateToken },
   { path: '/tokens/my-tokens', component: TokenDefinitions },
   { path: '/tokens/my-balance', component: AccountBalances },
-- 
GitLab


From 123ba3f74450efaa2acb23723fb2dd221af7e859 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Fri, 10 Oct 2025 13:43:25 +0200
Subject: [PATCH 011/102] Wrap tokens view with custom login state component

---
 src/components/HTMLoginForm.vue       |  261 ++++++
 src/components/HTMView.vue            |  120 +++
 src/pages/tokens/create.vue           |  629 +++++++-------
 src/pages/tokens/holders.vue          |  483 +++++------
 src/pages/tokens/my-balance.vue       | 1083 +++++++++++++------------
 src/pages/tokens/my-tokens.vue        |  345 ++++----
 src/pages/tokens/register-account.vue |  110 ++-
 src/utils/wallet/ctokens/signer.ts    |    4 +
 8 files changed, 1752 insertions(+), 1283 deletions(-)
 create mode 100644 src/components/HTMLoginForm.vue
 create mode 100644 src/components/HTMView.vue

diff --git a/src/components/HTMLoginForm.vue b/src/components/HTMLoginForm.vue
new file mode 100644
index 0000000..c89cedf
--- /dev/null
+++ b/src/components/HTMLoginForm.vue
@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { mdiClose } from '@mdi/js';
+import { computed, ref } from 'vue';
+import { toast } from 'vue-sonner';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { UsedWallet, getWalletIcon, useSettingsStore } from '@/stores/settings.store';
+import { useUserStore } from '@/stores/user.store';
+import { useWalletStore } from '@/stores/wallet.store';
+import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+interface Props {
+  showCloseButton?: boolean;
+  title?: string;
+  description?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  showCloseButton: false,
+  title: 'HTM Login',
+  description: 'Login to your Hive Token Machine account'
+});
+
+const emit = defineEmits(['success', 'close']);
+
+const walletStore = useWalletStore();
+const userStore = useUserStore();
+const settingsStore = useSettingsStore();
+
+const isLoading = ref(false);
+
+// Existing account login
+const password = ref('');
+
+// New account creation
+const managementKey = ref('');
+const operationalKey = ref('');
+const newPassword = ref('');
+const repeatPassword = ref('');
+
+// Check if user already has HTM wallet configured (only needs password)
+const hasHTMWallet = computed(() => CTokensProvider.isLoggedIn());
+
+const close = () => {
+  emit('close');
+};
+
+// Login to existing HTM account
+const loginExisting = async () => {
+  try {
+    isLoading.value = true;
+
+    await CTokensProvider.login(password.value);
+
+    // Get operational key after successful login
+    const operationalKey = CTokensProvider.getOperationalPublicKey();
+    if (!operationalKey)
+      throw new Error('Failed to get operational key after login');
+
+    // Set settings with the operational key as account and CTOKENS wallet
+    await settingsStore.setSettings({
+      account: operationalKey,
+      wallet: UsedWallet.CTOKENS_IMPLEMENTATION
+    });
+
+    // Create wallet provider and parse user data
+    await walletStore.createWalletFor(settingsStore.settings, 'posting');
+    await userStore.parseUserData(operationalKey);
+
+    toast.success('Logged in successfully!');
+    emit('success');
+  } catch (error) {
+    toastError('Failed to connect to HTM', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// Create new HTM account
+const createNewAccount = async () => {
+  try {
+    if (newPassword.value !== repeatPassword.value) {
+      toastError('Failed to connect to HTM', 'The provided passwords do not match');
+      return;
+    }
+
+    isLoading.value = true;
+
+    const { operational } = await CTokensProvider.createWallet(
+      newPassword.value,
+      operationalKey.value,
+      managementKey.value.length === 0 ? undefined : managementKey.value
+    );
+
+    const wax = await getWax();
+
+    const users = await wax.restApi.ctokensApi.registeredUsers({ user: operational });
+    if (users.length === 0) {
+      toastError('Failed to connect to HTM', 'The provided operational key is not registered in HTM');
+      return;
+    }
+
+    await CTokensProvider.login(newPassword.value);
+
+    // Set settings with the operational key as account and CTOKENS wallet
+    await settingsStore.setSettings({
+      account: operational,
+      wallet: UsedWallet.CTOKENS_IMPLEMENTATION
+    });
+
+    // Create wallet provider and parse user data
+    await walletStore.createWalletFor(settingsStore.settings, 'posting');
+    await userStore.parseUserData(operational);
+
+    toast.success('HTM wallet created successfully!');
+    emit('success');
+  } catch (error) {
+    toastError('Failed to connect to HTM', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+</script>
+
+<template>
+  <Card class="w-full max-w-md">
+    <CardHeader>
+      <CardTitle>
+        <div class="inline-flex justify-between w-full">
+          <div class="inline-flex items-center">
+            <img
+              :src="getWalletIcon(UsedWallet.CTOKENS_IMPLEMENTATION)"
+              class="w-[20px] mr-2"
+            >
+            <span class="mt-[2px]">{{ title }}</span>
+          </div>
+          <Button
+            v-if="showCloseButton"
+            variant="ghost"
+            size="sm"
+            class="px-2"
+            @click="close"
+          >
+            <svg
+              width="24"
+              height="24"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                style="fill: hsl(var(--foreground))"
+                :d="mdiClose"
+              />
+            </svg>
+          </Button>
+        </div>
+      </CardTitle>
+      <CardDescription>{{ description }}</CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-4">
+      <!-- Simple password login for existing HTM wallet -->
+      <div
+        v-if="hasHTMWallet"
+        class="space-y-4"
+      >
+        <div class="space-y-2">
+          <p class="text-sm text-muted-foreground">
+            Enter your HTM wallet password:
+          </p>
+
+          <div class="space-y-1">
+            <Label for="wallet-password">Password</Label>
+            <Input
+              id="wallet-password"
+              v-model="password"
+              type="password"
+              placeholder="Enter your HTM wallet password"
+              @keyup.enter="loginExisting"
+            />
+          </div>
+        </div>
+
+        <Button
+          :disabled="isLoading || !password"
+          class="w-full"
+          @click="loginExisting"
+        >
+          <span v-if="isLoading">Logging in...</span>
+          <span v-else>Login to HTM</span>
+        </Button>
+      </div>
+
+      <!-- Wallet creation form for new users -->
+      <div
+        v-else
+        class="space-y-4"
+      >
+        <div class="space-y-2">
+          <p class="text-sm text-muted-foreground">
+            Create your HTM wallet by providing your keys and setting a password:
+          </p>
+
+          <div class="space-y-1">
+            <Label for="operational-key">Operational Private Key</Label>
+            <Input
+              id="operational-key"
+              v-model="operationalKey"
+              type="text"
+              placeholder="Enter your operational key"
+            />
+          </div>
+
+          <div class="space-y-1">
+            <Label for="management-key">Management Private Key (optional)</Label>
+            <Input
+              id="management-key"
+              v-model="managementKey"
+              type="text"
+              placeholder="Enter your management key"
+            />
+          </div>
+
+          <div class="space-y-1">
+            <Label for="new-password">Wallet Password</Label>
+            <Input
+              id="new-password"
+              v-model="newPassword"
+              type="password"
+              placeholder="Create a password to encrypt your wallet"
+            />
+          </div>
+
+          <div class="space-y-1">
+            <Label for="repeat-password">Repeat Password</Label>
+            <Input
+              id="repeat-password"
+              v-model="repeatPassword"
+              type="password"
+              placeholder="Repeat the password"
+              @keyup.enter="createNewAccount"
+            />
+          </div>
+        </div>
+
+        <Button
+          :disabled="isLoading || !operationalKey || !newPassword || !repeatPassword"
+          class="w-full"
+          @click="createNewAccount"
+        >
+          <span v-if="isLoading">Creating Wallet...</span>
+          <span v-else>Create HTM Wallet</span>
+        </Button>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/components/HTMView.vue b/src/components/HTMView.vue
new file mode 100644
index 0000000..665adb4
--- /dev/null
+++ b/src/components/HTMView.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import HTMLoginForm from '@/components/HTMLoginForm.vue';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useTokensStore } from '@/stores/tokens.store';
+
+const tokensStore = useTokensStore();
+const router = useRouter();
+
+const showLoginForm = ref(false);
+
+// Check if user is authenticated (has wallet connected)
+const isAuthenticated = computed(() => tokensStore.wallet);
+
+// Show HTM login form
+const showHTMLogin = () => {
+  showLoginForm.value = true;
+};
+
+// Handle successful login
+const onLoginSuccess = () => {
+  showLoginForm.value = false;
+  // The authentication state will be automatically updated
+};
+
+// Navigate to registration page
+const goToRegistration = () => {
+  router.push('/tokens/register-account');
+};
+</script>
+
+<template>
+  <div>
+    <!-- Show login/registration page when not authenticated -->
+    <div
+      v-if="!isAuthenticated"
+      class="container mx-auto py-12 px-4 max-w-2xl"
+    >
+      <!-- Show HTM Login Form -->
+      <div
+        v-if="showLoginForm"
+        class="flex justify-center"
+      >
+        <HTMLoginForm
+          :show-close-button="true"
+          title="HTM Access"
+          description="Create or access your HTM wallet to manage custom tokens"
+          @success="onLoginSuccess"
+          @close="showLoginForm = false"
+        />
+      </div>
+
+      <!-- Show selection options -->
+      <Card
+        v-else
+        class="text-center"
+      >
+        <CardHeader>
+          <CardTitle class="text-2xl">
+            HTM Access Required
+          </CardTitle>
+          <CardDescription>
+            To access Hive Token Machine features, you need to access your HTM wallet or register a new account.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-4">
+          <div class="space-y-3">
+            <p class="text-sm text-muted-foreground">
+              Choose one of the options below to get started:
+            </p>
+
+            <!-- HTM Access -->
+            <Button
+              size="lg"
+              class="w-full"
+              @click="showHTMLogin"
+            >
+              Access HTM Wallet
+            </Button>
+
+            <!-- Or register new HTM account -->
+            <div class="relative">
+              <div class="absolute inset-0 flex items-center">
+                <span class="w-full border-t" />
+              </div>
+              <div class="relative flex justify-center text-xs uppercase">
+                <span class="bg-background px-2 text-muted-foreground">
+                  Or
+                </span>
+              </div>
+            </div>
+
+            <Button
+              variant="outline"
+              size="lg"
+              class="w-full"
+              @click="goToRegistration"
+            >
+              Register HTM Account
+            </Button>
+          </div>
+
+          <div class="pt-4 text-xs text-muted-foreground">
+            <p>
+              HTM accounts allow you to create, manage, and transfer custom tokens on the Hive blockchain.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- Show slot content when authenticated -->
+    <div v-else>
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index 7f0125b..af882b2 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -11,6 +11,7 @@ import {
 import { computed, ref, watch } from 'vue';
 import { toast } from 'vue-sonner';
 
+import HTMView from '@/components/HTMView.vue';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -19,15 +20,10 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
-import { useWalletStore } from '@/stores/wallet.store';
 import { copyText } from '@/utils/copy';
 import { createNAIToken, generateNAI as generateNAIUtil, type TokenCreationParams } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 
-const walletStore = useWalletStore();
-
-const hasWallet = computed(() => walletStore.hasWallet);
-
 // Form state
 const tokenName = ref('');
 const tokenSymbol = ref('');
@@ -153,11 +149,6 @@ const createToken = async () => {
     return;
   }
 
-  if (!hasWallet.value) {
-    await walletStore.openWalletSelectModal();
-    return;
-  }
-
   // Ensure NAI is generated before creating token
   if (!generatedNAI.value) {
     generateNAI();
@@ -234,353 +225,355 @@ const onSymbolInput = (event: Event) => {
 </script>
 
 <template>
-  <div class="container mx-auto p-6 max-w-4xl">
-    <div class="space-y-6">
-      <!-- Header -->
-      <div class="text-center space-y-2">
-        <h1 class="text-3xl font-bold tracking-tight">
-          Create Custom Token
-        </h1>
-        <p class="text-muted-foreground">
-          Create your own custom token on the Hive Token Machine
-        </p>
-      </div>
+  <HTMView>
+    <div class="container mx-auto p-6 max-w-4xl">
+      <div class="space-y-6">
+        <!-- Header -->
+        <div class="text-center space-y-2">
+          <h1 class="text-3xl font-bold tracking-tight">
+            Create Custom Token
+          </h1>
+          <p class="text-muted-foreground">
+            Create your own custom token on the Hive Token Machine
+          </p>
+        </div>
 
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <!-- Token Creation Form -->
-        <Card>
-          <CardHeader>
-            <CardTitle class="flex items-center gap-2">
-              <svg
-                width="20"
-                height="20"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  style="fill: currentColor"
-                  :d="mdiCurrencyUsd"
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <!-- Token Creation Form -->
+          <Card>
+            <CardHeader>
+              <CardTitle class="flex items-center gap-2">
+                <svg
+                  width="20"
+                  height="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    style="fill: currentColor"
+                    :d="mdiCurrencyUsd"
+                  />
+                </svg>
+                Token Details
+              </CardTitle>
+              <CardDescription>
+                Enter the details for your new NAI token. Note: The token name is only a display property that can be changed. The NAI (Network Asset Identifier) is the only unique identifier for your token.
+              </CardDescription>
+            </CardHeader>
+            <CardContent class="space-y-4">
+              <!-- Token Name -->
+              <div class="space-y-2">
+                <Label for="token-name">Token Name *</Label>
+                <Input
+                  id="token-name"
+                  v-model="tokenName"
+                  placeholder="e.g., My Awesome Token"
+                  :disabled="isCreatingToken"
                 />
-              </svg>
-              Token Details
-            </CardTitle>
-            <CardDescription>
-              Enter the details for your new NAI token. Note: The token name is only a display property that can be changed. The NAI (Network Asset Identifier) is the only unique identifier for your token.
-            </CardDescription>
-          </CardHeader>
-          <CardContent class="space-y-4">
-            <!-- Token Name -->
-            <div class="space-y-2">
-              <Label for="token-name">Token Name *</Label>
-              <Input
-                id="token-name"
-                v-model="tokenName"
-                placeholder="e.g., My Awesome Token"
-                :disabled="isCreatingToken"
-              />
-            </div>
-
-            <!-- Token Symbol -->
-            <div class="space-y-2">
-              <Label for="token-symbol">Token Symbol *</Label>
-              <Input
-                id="token-symbol"
-                :value="tokenSymbol"
-                placeholder="e.g., MAT"
-                class="uppercase"
-                :class="{ 'border-red-500': tokenSymbol.length > 0 && !symbolValidation.isValid }"
-                maxlength="10"
-                :disabled="isCreatingToken"
-                @input="onSymbolInput"
-              />
-              <p
-                class="text-xs"
-                :class="tokenSymbol.length > 0 && !symbolValidation.isValid ? 'text-red-500' : 'text-muted-foreground'"
-              >
-                {{ tokenSymbol.length > 0 && !symbolValidation.isValid ? symbolValidation.message : '3-10 characters, letters only' }}
-              </p>
-            </div>
-
-            <!-- Token Description -->
-            <div class="space-y-2">
-              <Label for="token-description">Description</Label>
-              <Textarea
-                id="token-description"
-                v-model="tokenDescription"
-                placeholder="Describe your token..."
-                :disabled="isCreatingToken"
-                rows="3"
-              />
-            </div>
-
-            <!-- Initial Supply -->
-            <div class="space-y-2">
-              <Label for="initial-supply">Initial Supply *</Label>
-              <Input
-                id="initial-supply"
-                :value="formatNumber(initialSupply)"
-                placeholder="1,000,000"
-                :disabled="isCreatingToken"
-                @input="onSupplyInput"
-              />
-              <p class="text-xs text-muted-foreground">
-                Total number of tokens to create
-              </p>
-            </div>
-
-            <!-- Precision -->
-            <div class="space-y-2">
-              <Label for="precision">Decimal Precision *</Label>
-              <Input
-                id="precision"
-                v-model="precision"
-                type="number"
-                min="0"
-                max="12"
-                step="1"
-                placeholder="3"
-                :disabled="isCreatingToken"
-                class="w-full"
-              />
-              <p class="text-xs text-muted-foreground">
-                Number of decimal places for token amounts (0-12)
-              </p>
-            </div>
-
-            <!-- Staking Options -->
-            <div class="space-y-3">
-              <div class="flex items-center space-x-2">
-                <Checkbox
-                  id="can-stake"
-                  v-model="canStake"
+              </div>
+
+              <!-- Token Symbol -->
+              <div class="space-y-2">
+                <Label for="token-symbol">Token Symbol *</Label>
+                <Input
+                  id="token-symbol"
+                  :value="tokenSymbol"
+                  placeholder="e.g., MAT"
+                  class="uppercase"
+                  :class="{ 'border-red-500': tokenSymbol.length > 0 && !symbolValidation.isValid }"
+                  maxlength="10"
                   :disabled="isCreatingToken"
+                  @input="onSymbolInput"
                 />
-                <Label
-                  for="can-stake"
-                  class="text-sm font-normal"
+                <p
+                  class="text-xs"
+                  :class="tokenSymbol.length > 0 && !symbolValidation.isValid ? 'text-red-500' : 'text-muted-foreground'"
                 >
-                  Allow token staking
-                </Label>
+                  {{ tokenSymbol.length > 0 && !symbolValidation.isValid ? symbolValidation.message : '3-10 characters, letters only' }}
+                </p>
               </div>
 
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-3 ml-6">
-                <div class="flex items-center space-x-2">
-                  <Checkbox
-                    id="others-can-stake"
-                    :disabled="isCreatingToken || !canStake"
-                  />
-                  <Label
-                    for="others-can-stake"
-                    class="text-sm font-normal"
-                  >
-                    Others can stake
-                  </Label>
-                </div>
+              <!-- Token Description -->
+              <div class="space-y-2">
+                <Label for="token-description">Description</Label>
+                <Textarea
+                  id="token-description"
+                  v-model="tokenDescription"
+                  placeholder="Describe your token..."
+                  :disabled="isCreatingToken"
+                  rows="3"
+                />
+              </div>
 
+              <!-- Initial Supply -->
+              <div class="space-y-2">
+                <Label for="initial-supply">Initial Supply *</Label>
+                <Input
+                  id="initial-supply"
+                  :value="formatNumber(initialSupply)"
+                  placeholder="1,000,000"
+                  :disabled="isCreatingToken"
+                  @input="onSupplyInput"
+                />
+                <p class="text-xs text-muted-foreground">
+                  Total number of tokens to create
+                </p>
+              </div>
+
+              <!-- Precision -->
+              <div class="space-y-2">
+                <Label for="precision">Decimal Precision *</Label>
+                <Input
+                  id="precision"
+                  v-model="precision"
+                  type="number"
+                  min="0"
+                  max="12"
+                  step="1"
+                  placeholder="3"
+                  :disabled="isCreatingToken"
+                  class="w-full"
+                />
+                <p class="text-xs text-muted-foreground">
+                  Number of decimal places for token amounts (0-12)
+                </p>
+              </div>
+
+              <!-- Staking Options -->
+              <div class="space-y-3">
                 <div class="flex items-center space-x-2">
                   <Checkbox
-                    id="others-can-unstake"
-                    :disabled="isCreatingToken || !canStake"
+                    id="can-stake"
+                    v-model="canStake"
+                    :disabled="isCreatingToken"
                   />
                   <Label
-                    for="others-can-unstake"
+                    for="can-stake"
                     class="text-sm font-normal"
                   >
-                    Others can unstake
+                    Allow token staking
                   </Label>
                 </div>
-              </div>
-            </div>
-
-            <Separator />
-
-            <!-- Generated NAI -->
-            <div class="space-y-2">
-              <div class="flex items-center justify-between">
-                <Label>Generated NAI</Label>
-                <Button
-                  v-if="naiGenerated"
-                  variant="outline"
-                  size="sm"
-                  :disabled="isCreatingToken"
-                  @click="regenerateNAI"
-                >
-                  <svg
-                    width="16"
-                    height="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    class="mr-1"
-                  >
-                    <path
-                      style="fill: currentColor"
-                      :d="mdiRefresh"
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 ml-6">
+                  <div class="flex items-center space-x-2">
+                    <Checkbox
+                      id="others-can-stake"
+                      :disabled="isCreatingToken || !canStake"
                     />
-                  </svg>
-                  Regenerate
-                </Button>
-              </div>
+                    <Label
+                      for="others-can-stake"
+                      class="text-sm font-normal"
+                    >
+                      Others can stake
+                    </Label>
+                  </div>
 
-              <div
-                v-if="shouldShowNAIField"
-                class="flex items-center gap-2"
-              >
-                <Input
-                  :value="naiDisplayValue"
-                  readonly
-                  class="font-mono"
-                  :class="{ 'text-muted-foreground': !generatedNAI }"
-                />
-                <Button
-                  v-if="naiGenerated"
-                  variant="outline"
-                  size="sm"
-                  @click="copyNAI"
-                >
-                  <svg
-                    width="16"
-                    height="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      style="fill: currentColor"
-                      :d="mdiContentCopy"
+                  <div class="flex items-center space-x-2">
+                    <Checkbox
+                      id="others-can-unstake"
+                      :disabled="isCreatingToken || !canStake"
                     />
-                  </svg>
-                </Button>
+                    <Label
+                      for="others-can-unstake"
+                      class="text-sm font-normal"
+                    >
+                      Others can unstake
+                    </Label>
+                  </div>
+                </div>
               </div>
 
-              <div
-                v-else
-                class="text-sm text-muted-foreground"
-              >
-                Enter a token symbol (3+ characters) to generate unique ID
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+              <Separator />
 
-        <!-- Preview and Actions -->
-        <div class="space-y-6">
-          <!-- Token Preview -->
-          <Card>
-            <CardHeader>
-              <CardTitle>Token Preview</CardTitle>
-              <CardDescription>
-                How your token will appear
-              </CardDescription>
-            </CardHeader>
-            <CardContent class="space-y-4">
-              <div class="border rounded-lg p-4 space-y-2">
+              <!-- Generated NAI -->
+              <div class="space-y-2">
                 <div class="flex items-center justify-between">
-                  <div>
-                    <h3 class="font-semibold">
-                      {{ tokenName || 'Token Name' }}
-                    </h3>
-                    <p class="text-sm text-muted-foreground">
-                      {{ tokenSymbol || 'SYMBOL' }}
-                    </p>
-                  </div>
-                  <span class="inline-flex items-center rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground">{{ naiDisplayValue || 'NAI' }}</span>
+                  <Label>Generated NAI</Label>
+                  <Button
+                    v-if="naiGenerated"
+                    variant="outline"
+                    size="sm"
+                    :disabled="isCreatingToken"
+                    @click="regenerateNAI"
+                  >
+                    <svg
+                      width="16"
+                      height="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      class="mr-1"
+                    >
+                      <path
+                        style="fill: currentColor"
+                        :d="mdiRefresh"
+                      />
+                    </svg>
+                    Regenerate
+                  </Button>
                 </div>
 
-                <p class="text-sm">
-                  {{ tokenDescription || 'Token description will appear here...' }}
-                </p>
-
-                <div class="flex justify-between text-xs text-muted-foreground">
-                  <span>Supply: {{ formatNumber(initialSupply) }}</span>
-                  <span>Precision: {{ precision }}</span>
+                <div
+                  v-if="shouldShowNAIField"
+                  class="flex items-center gap-2"
+                >
+                  <Input
+                    :value="naiDisplayValue"
+                    readonly
+                    class="font-mono"
+                    :class="{ 'text-muted-foreground': !generatedNAI }"
+                  />
+                  <Button
+                    v-if="naiGenerated"
+                    variant="outline"
+                    size="sm"
+                    @click="copyNAI"
+                  >
+                    <svg
+                      width="16"
+                      height="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        style="fill: currentColor"
+                        :d="mdiContentCopy"
+                      />
+                    </svg>
+                  </Button>
                 </div>
 
                 <div
-                  v-if="canStake"
-                  class="flex items-center text-xs text-green-600"
+                  v-else
+                  class="text-sm text-muted-foreground"
                 >
-                  <svg
-                    width="12"
-                    height="12"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    class="mr-1"
-                  >
-                    <path
-                      style="fill: currentColor"
-                      :d="mdiCheck"
-                    />
-                  </svg>
-                  Staking enabled
+                  Enter a token symbol (3+ characters) to generate unique ID
                 </div>
               </div>
             </CardContent>
           </Card>
 
-          <!-- Disclaimer -->
-          <Alert>
-            <svg
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiAlert"
-              />
-            </svg>
-            <AlertDescription>
-              <div class="space-y-2">
-                <p class="font-semibold">
-                  Important Disclaimer
-                </p>
-                <p class="text-sm">
-                  Tokens are created on the Hive Token Machine. Please verify all details before creation
-                  as they cannot be changed after deployment. Token symbols should be unique to avoid confusion.
-                  <strong>A transaction fee will be required to create the token.</strong>
-                </p>
+          <!-- Preview and Actions -->
+          <div class="space-y-6">
+            <!-- Token Preview -->
+            <Card>
+              <CardHeader>
+                <CardTitle>Token Preview</CardTitle>
+                <CardDescription>
+                  How your token will appear
+                </CardDescription>
+              </CardHeader>
+              <CardContent class="space-y-4">
+                <div class="border rounded-lg p-4 space-y-2">
+                  <div class="flex items-center justify-between">
+                    <div>
+                      <h3 class="font-semibold">
+                        {{ tokenName || 'Token Name' }}
+                      </h3>
+                      <p class="text-sm text-muted-foreground">
+                        {{ tokenSymbol || 'SYMBOL' }}
+                      </p>
+                    </div>
+                    <span class="inline-flex items-center rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground">{{ naiDisplayValue || 'NAI' }}</span>
+                  </div>
 
-                <div class="flex items-center space-x-2 mt-3">
-                  <Checkbox
-                    id="disclaimer"
-                    v-model="agreedToDisclaimer"
-                    :disabled="isCreatingToken"
-                  />
-                  <Label
-                    for="disclaimer"
-                    class="text-sm"
+                  <p class="text-sm">
+                    {{ tokenDescription || 'Token description will appear here...' }}
+                  </p>
+
+                  <div class="flex justify-between text-xs text-muted-foreground">
+                    <span>Supply: {{ formatNumber(initialSupply) }}</span>
+                    <span>Precision: {{ precision }}</span>
+                  </div>
+
+                  <div
+                    v-if="canStake"
+                    class="flex items-center text-xs text-green-600"
                   >
-                    I understand and agree to this disclaimer
-                  </Label>
+                    <svg
+                      width="12"
+                      height="12"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      class="mr-1"
+                    >
+                      <path
+                        style="fill: currentColor"
+                        :d="mdiCheck"
+                      />
+                    </svg>
+                    Staking enabled
+                  </div>
                 </div>
-              </div>
-            </AlertDescription>
-          </Alert>
-
-          <!-- Create Button -->
-          <Button
-            class="w-full"
-            size="lg"
-            :disabled="createButtonState.disabled"
-            @click="createToken"
-          >
-            <svg
-              width="20"
-              height="20"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="mr-2"
-              :class="{ 'animate-spin': isCreatingToken }"
+              </CardContent>
+            </Card>
+
+            <!-- Disclaimer -->
+            <Alert>
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="mdiAlert"
+                />
+              </svg>
+              <AlertDescription>
+                <div class="space-y-2">
+                  <p class="font-semibold">
+                    Important Disclaimer
+                  </p>
+                  <p class="text-sm">
+                    Tokens are created on the Hive Token Machine. Please verify all details before creation
+                    as they cannot be changed after deployment. Token symbols should be unique to avoid confusion.
+                    <strong>A transaction fee will be required to create the token.</strong>
+                  </p>
+
+                  <div class="flex items-center space-x-2 mt-3">
+                    <Checkbox
+                      id="disclaimer"
+                      v-model="agreedToDisclaimer"
+                      :disabled="isCreatingToken"
+                    />
+                    <Label
+                      for="disclaimer"
+                      class="text-sm"
+                    >
+                      I understand and agree to this disclaimer
+                    </Label>
+                  </div>
+                </div>
+              </AlertDescription>
+            </Alert>
+
+            <!-- Create Button -->
+            <Button
+              class="w-full"
+              size="lg"
+              :disabled="createButtonState.disabled"
+              @click="createToken"
             >
-              <path
-                style="fill: currentColor"
-                :d="isCreatingToken ? mdiLoading : mdiRocket"
-              />
-            </svg>
-            {{ createButtonState.text }}
-          </Button>
+              <svg
+                width="20"
+                height="20"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="mr-2"
+                :class="{ 'animate-spin': isCreatingToken }"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="isCreatingToken ? mdiLoading : mdiRocket"
+                />
+              </svg>
+              {{ createButtonState.text }}
+            </Button>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </HTMView>
 </template>
diff --git a/src/pages/tokens/holders.vue b/src/pages/tokens/holders.vue
index 99bf256..d479d6b 100644
--- a/src/pages/tokens/holders.vue
+++ b/src/pages/tokens/holders.vue
@@ -6,6 +6,7 @@ import {
 } from '@mdi/js';
 import { computed, onMounted, ref } from 'vue';
 
+import HTMView from '@/components/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -118,288 +119,290 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="container mx-auto py-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div>
-        <h1 class="text-3xl font-bold tracking-tight">
-          Top Token Holders
-        </h1>
-        <p class="text-muted-foreground">
-          View the largest holders of custom tokens on Hive Token Machine
-        </p>
+  <HTMView>
+    <div class="container mx-auto py-6 space-y-6">
+      <!-- Header -->
+      <div class="flex items-center justify-between">
+        <div>
+          <h1 class="text-3xl font-bold tracking-tight">
+            Top Token Holders
+          </h1>
+          <p class="text-muted-foreground">
+            View the largest holders of custom tokens on Hive Token Machine
+          </p>
+        </div>
       </div>
-    </div>
 
-    <!-- Token Selection -->
-    <Card>
-      <CardHeader>
-        <CardTitle class="flex items-center gap-2">
-          <svg
-            width="20"
-            height="20"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiTrophy"
-            />
-          </svg>
-          Select Token
-        </CardTitle>
-        <CardDescription>
-          Choose a token to view its top holders
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div class="flex items-center gap-4">
-          <div class="flex-1">
-            <Select
-              :value="selectedToken"
-              @update:value="onTokenChange"
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="Select a token..." />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem
-                  v-for="token in availableTokens"
-                  :key="token.value"
-                  :value="token.value"
-                >
-                  {{ token.label }}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <Button
-            variant="outline"
-            :disabled="!selectedToken || isLoading"
-            @click="refresh"
-          >
+      <!-- Token Selection -->
+      <Card>
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2">
             <svg
-              width="16"
-              height="16"
+              width="20"
+              height="20"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
-              class="mr-1"
-              :class="{ 'animate-spin': isLoading }"
             >
               <path
                 style="fill: currentColor"
-                d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z"
+                :d="mdiTrophy"
               />
             </svg>
-            Refresh
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-
-    <!-- Token Info -->
-    <Card v-if="selectedTokenInfo">
-      <CardContent class="pt-6">
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <div class="text-center">
-            <div class="text-2xl font-bold">
-              {{ selectedTokenInfo.symbol }}
-            </div>
-            <div class="text-sm text-muted-foreground">
-              Token Symbol
-            </div>
-          </div>
-          <div class="text-center">
-            <div class="text-2xl font-bold">
-              {{ parseFloat(selectedTokenInfo.current_supply).toLocaleString() }}
-            </div>
-            <div class="text-sm text-muted-foreground">
-              Total Supply
+            Select Token
+          </CardTitle>
+          <CardDescription>
+            Choose a token to view its top holders
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div class="flex items-center gap-4">
+            <div class="flex-1">
+              <Select
+                :value="selectedToken"
+                @update:value="onTokenChange"
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a token..." />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem
+                    v-for="token in availableTokens"
+                    :key="token.value"
+                    :value="token.value"
+                  >
+                    {{ token.label }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
             </div>
+            <Button
+              variant="outline"
+              :disabled="!selectedToken || isLoading"
+              @click="refresh"
+            >
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="mr-1"
+                :class="{ 'animate-spin': isLoading }"
+              >
+                <path
+                  style="fill: currentColor"
+                  d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z"
+                />
+              </svg>
+              Refresh
+            </Button>
           </div>
-          <div class="text-center">
-            <div class="text-2xl font-bold">
-              {{ holders.length }}
+        </CardContent>
+      </Card>
+
+      <!-- Token Info -->
+      <Card v-if="selectedTokenInfo">
+        <CardContent class="pt-6">
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div class="text-center">
+              <div class="text-2xl font-bold">
+                {{ selectedTokenInfo.symbol }}
+              </div>
+              <div class="text-sm text-muted-foreground">
+                Token Symbol
+              </div>
             </div>
-            <div class="text-sm text-muted-foreground">
-              Top Holders Shown
+            <div class="text-center">
+              <div class="text-2xl font-bold">
+                {{ parseFloat(selectedTokenInfo.current_supply).toLocaleString() }}
+              </div>
+              <div class="text-sm text-muted-foreground">
+                Total Supply
+              </div>
             </div>
-          </div>
-          <div class="text-center">
-            <div class="text-2xl font-bold">
-              {{ selectedTokenInfo.precision }}
+            <div class="text-center">
+              <div class="text-2xl font-bold">
+                {{ holders.length }}
+              </div>
+              <div class="text-sm text-muted-foreground">
+                Top Holders Shown
+              </div>
             </div>
-            <div class="text-sm text-muted-foreground">
-              Decimal Places
+            <div class="text-center">
+              <div class="text-2xl font-bold">
+                {{ selectedTokenInfo.precision }}
+              </div>
+              <div class="text-sm text-muted-foreground">
+                Decimal Places
+              </div>
             </div>
           </div>
-        </div>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
 
-    <!-- Loading State -->
-    <div
-      v-if="isLoading && holders.length === 0"
-      class="space-y-3"
-    >
-      <Card
-        v-for="i in 10"
-        :key="i"
+      <!-- Loading State -->
+      <div
+        v-if="isLoading && holders.length === 0"
+        class="space-y-3"
       >
-        <CardContent class="p-4">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-3">
-              <Skeleton class="h-8 w-8 rounded-full" />
-              <div class="space-y-2">
-                <Skeleton class="h-4 w-[150px]" />
-                <Skeleton class="h-3 w-[100px]" />
+        <Card
+          v-for="i in 10"
+          :key="i"
+        >
+          <CardContent class="p-4">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <Skeleton class="h-8 w-8 rounded-full" />
+                <div class="space-y-2">
+                  <Skeleton class="h-4 w-[150px]" />
+                  <Skeleton class="h-3 w-[100px]" />
+                </div>
+              </div>
+              <div class="text-right space-y-2">
+                <Skeleton class="h-4 w-[100px]" />
+                <Skeleton class="h-3 w-[60px]" />
               </div>
             </div>
-            <div class="text-right space-y-2">
-              <Skeleton class="h-4 w-[100px]" />
-              <Skeleton class="h-3 w-[60px]" />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
+          </CardContent>
+        </Card>
+      </div>
 
-    <!-- Top Holders List -->
-    <div
-      v-else-if="formattedHolders.length > 0"
-      class="space-y-3"
-    >
-      <Card
-        v-for="holder in formattedHolders"
-        :key="holder.user"
-        class="hover:shadow-md transition-shadow"
+      <!-- Top Holders List -->
+      <div
+        v-else-if="formattedHolders.length > 0"
+        class="space-y-3"
       >
-        <CardContent class="p-4">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-4">
-              <!-- Rank Badge -->
-              <div
-                class="flex items-center justify-center w-10 h-10 rounded-full font-bold text-white"
-                :class="{
-                  'bg-yellow-500': holder.rank === 1,
-                  'bg-gray-400': holder.rank === 2,
-                  'bg-orange-600': holder.rank === 3,
-                  'bg-blue-500': holder.rank > 3
-                }"
-              >
-                <svg
-                  v-if="holder.rank === 1"
-                  width="20"
-                  height="20"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
+        <Card
+          v-for="holder in formattedHolders"
+          :key="holder.user"
+          class="hover:shadow-md transition-shadow"
+        >
+          <CardContent class="p-4">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-4">
+                <!-- Rank Badge -->
+                <div
+                  class="flex items-center justify-center w-10 h-10 rounded-full font-bold text-white"
+                  :class="{
+                    'bg-yellow-500': holder.rank === 1,
+                    'bg-gray-400': holder.rank === 2,
+                    'bg-orange-600': holder.rank === 3,
+                    'bg-blue-500': holder.rank > 3
+                  }"
                 >
-                  <path
-                    style="fill: currentColor"
-                    :d="mdiCrown"
-                  />
-                </svg>
-                <span v-else>{{ holder.rank }}</span>
+                  <svg
+                    v-if="holder.rank === 1"
+                    width="20"
+                    height="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      :d="mdiCrown"
+                    />
+                  </svg>
+                  <span v-else>{{ holder.rank }}</span>
+                </div>
+
+                <!-- Holder Info -->
+                <div>
+                  <div class="font-semibold">
+                    {{ holder.displayName }}
+                  </div>
+                  <div class="text-sm text-muted-foreground">
+                    Rank #{{ holder.rank }} • {{ holder.percentage.toFixed(2) }}% of supply
+                  </div>
+                </div>
               </div>
 
-              <!-- Holder Info -->
-              <div>
-                <div class="font-semibold">
-                  {{ holder.displayName }}
+              <!-- Amount -->
+              <div class="text-right">
+                <div class="font-bold text-lg">
+                  {{ parseFloat(holder.formattedAmount).toLocaleString() }}
                 </div>
                 <div class="text-sm text-muted-foreground">
-                  Rank #{{ holder.rank }} • {{ holder.percentage.toFixed(2) }}% of supply
+                  {{ selectedTokenInfo?.symbol }}
                 </div>
               </div>
             </div>
+          </CardContent>
+        </Card>
 
-            <!-- Amount -->
-            <div class="text-right">
-              <div class="font-bold text-lg">
-                {{ parseFloat(holder.formattedAmount).toLocaleString() }}
-              </div>
-              <div class="text-sm text-muted-foreground">
-                {{ selectedTokenInfo?.symbol }}
-              </div>
-            </div>
-          </div>
+        <!-- Load More Button -->
+        <div
+          v-if="hasMorePages"
+          class="text-center pt-4"
+        >
+          <Button
+            variant="outline"
+            :disabled="isLoading"
+            @click="loadMore"
+          >
+            <svg
+              v-if="isLoading"
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-2 animate-spin"
+            >
+              <path
+                style="fill: currentColor"
+                d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+              />
+            </svg>
+            {{ isLoading ? 'Loading...' : 'Load More' }}
+          </Button>
+        </div>
+      </div>
+
+      <!-- Empty State -->
+      <Card v-else-if="selectedToken && !isLoading">
+        <CardContent class="text-center py-12">
+          <svg
+            width="64"
+            height="64"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mx-auto text-muted-foreground mb-4"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiAccountGroup"
+            />
+          </svg>
+          <h3 class="text-lg font-semibold mb-2">
+            No Holders Found
+          </h3>
+          <p class="text-muted-foreground mb-4">
+            This token doesn't have any registered holders yet.
+          </p>
         </CardContent>
       </Card>
 
-      <!-- Load More Button -->
-      <div
-        v-if="hasMorePages"
-        class="text-center pt-4"
-      >
-        <Button
-          variant="outline"
-          :disabled="isLoading"
-          @click="loadMore"
-        >
+      <!-- No Token Selected -->
+      <Card v-else-if="!selectedToken && !isLoading">
+        <CardContent class="text-center py-12">
           <svg
-            v-if="isLoading"
-            width="16"
-            height="16"
+            width="64"
+            height="64"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
-            class="mr-2 animate-spin"
+            class="mx-auto text-muted-foreground mb-4"
           >
             <path
               style="fill: currentColor"
-              d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+              :d="mdiTrophy"
             />
           </svg>
-          {{ isLoading ? 'Loading...' : 'Load More' }}
-        </Button>
-      </div>
+          <h3 class="text-lg font-semibold mb-2">
+            Select a Token
+          </h3>
+          <p class="text-muted-foreground">
+            Choose a token from the dropdown above to view its top holders.
+          </p>
+        </CardContent>
+      </Card>
     </div>
-
-    <!-- Empty State -->
-    <Card v-else-if="selectedToken && !isLoading">
-      <CardContent class="text-center py-12">
-        <svg
-          width="64"
-          height="64"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          class="mx-auto text-muted-foreground mb-4"
-        >
-          <path
-            style="fill: currentColor"
-            :d="mdiAccountGroup"
-          />
-        </svg>
-        <h3 class="text-lg font-semibold mb-2">
-          No Holders Found
-        </h3>
-        <p class="text-muted-foreground mb-4">
-          This token doesn't have any registered holders yet.
-        </p>
-      </CardContent>
-    </Card>
-
-    <!-- No Token Selected -->
-    <Card v-else-if="!selectedToken && !isLoading">
-      <CardContent class="text-center py-12">
-        <svg
-          width="64"
-          height="64"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          class="mx-auto text-muted-foreground mb-4"
-        >
-          <path
-            style="fill: currentColor"
-            :d="mdiTrophy"
-          />
-        </svg>
-        <h3 class="text-lg font-semibold mb-2">
-          Select a Token
-        </h3>
-        <p class="text-muted-foreground">
-          Choose a token from the dropdown above to view its top holders.
-        </p>
-      </CardContent>
-    </Card>
-  </div>
+  </HTMView>
 </template>
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 5e7ecba..34d76ff 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -11,6 +11,7 @@ import {
 import { computed, onMounted, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
+import HTMView from '@/components/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -167,594 +168,596 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="container mx-auto py-6 space-y-6">
-    <!-- Header -->
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-      <div>
-        <h1 class="text-3xl font-bold tracking-tight">
-          Account Balances
-        </h1>
-        <p class="text-muted-foreground">
-          Manage your custom token balances, transfers, and staking on Hive Token Machine
-        </p>
-      </div>
-
-      <div class="flex items-center gap-2">
-        <Button
-          variant="outline"
-          :disabled="isLoading"
-          @click="loadAccountBalances"
-        >
-          <svg
-            width="16"
-            height="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="mr-2"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiRefresh"
-            />
-          </svg>
-          Refresh
-        </Button>
-      </div>
-    </div>
-
-    <!-- Summary Cards -->
-    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-      <Card>
-        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle class="text-sm font-medium">
-            Total Portfolio Value
-          </CardTitle>
-          <svg
-            width="16"
-            height="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="text-muted-foreground"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiCurrencyUsd"
-            />
-          </svg>
-        </CardHeader>
-        <CardContent>
-          <div class="text-2xl font-bold">
-            ${{ totalValue.toFixed(2) }}
-          </div>
-          <p class="text-xs text-muted-foreground">
-            +2.1% from last month
-          </p>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle class="text-sm font-medium">
-            Total Tokens
-          </CardTitle>
-          <svg
-            width="16"
-            height="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="text-muted-foreground"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiAccount"
-            />
-          </svg>
-        </CardHeader>
-        <CardContent>
-          <div class="text-2xl font-bold">
-            {{ tokensStore.tokenCount }}
-          </div>
-          <p class="text-xs text-muted-foreground">
-            Different token types
-          </p>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle class="text-sm font-medium">
-            Liquid Balance
-          </CardTitle>
-          <svg
-            width="16"
-            height="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="text-muted-foreground"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiWater"
-            />
-          </svg>
-        </CardHeader>
-        <CardContent>
-          <div class="text-2xl font-bold">
-            {{ tokensStore.balances.reduce((sum, b) => sum + parseFloat(b.liquid_balance), 0).toFixed(3) }}
-          </div>
-          <p class="text-xs text-muted-foreground">
-            Available for transfer
-          </p>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle class="text-sm font-medium">
-            Staked Balance
-          </CardTitle>
-          <svg
-            width="16"
-            height="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="text-muted-foreground"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiLock"
-            />
-          </svg>
-        </CardHeader>
-        <CardContent>
-          <div class="text-2xl font-bold">
-            {{ tokensStore.balances.reduce((sum, b) => sum + parseFloat(b.staked_balance), 0).toFixed(3) }}
-          </div>
-          <p class="text-xs text-muted-foreground">
-            Earning rewards
+  <HTMView>
+    <div class="container mx-auto py-6 space-y-6">
+      <!-- Header -->
+      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold tracking-tight">
+            Account Balances
+          </h1>
+          <p class="text-muted-foreground">
+            Manage your custom token balances, transfers, and staking on Hive Token Machine
           </p>
-        </CardContent>
-      </Card>
-    </div>
-
-    <!-- Search -->
-    <div class="flex items-center gap-4">
-      <div class="flex-1">
-        <Input
-          v-model="searchQuery"
-          placeholder="Search tokens by symbol, name, or NAI..."
-          class="max-w-sm"
-        />
-      </div>
-    </div>
-
-    <!-- Loading State -->
-    <div
-      v-if="tokensStore.isLoadingBalances"
-      class="space-y-4"
-    >
-      <Card
-        v-for="i in 3"
-        :key="i"
-      >
-        <CardHeader>
-          <div class="flex items-center justify-between">
-            <div class="space-y-2">
-              <Skeleton class="h-4 w-[250px]" />
-              <Skeleton class="h-3 w-[200px]" />
-            </div>
-            <Skeleton class="h-8 w-8 rounded-full" />
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div class="grid grid-cols-3 gap-4">
-            <div class="space-y-2">
-              <Skeleton class="h-3 w-[100px]" />
-              <Skeleton class="h-6 w-[80px]" />
-            </div>
-            <div class="space-y-2">
-              <Skeleton class="h-3 w-[100px]" />
-              <Skeleton class="h-6 w-[80px]" />
-            </div>
-            <div class="space-y-2">
-              <Skeleton class="h-3 w-[100px]" />
-              <Skeleton class="h-6 w-[80px]" />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-
-    <!-- Balances Table -->
-    <div
-      v-else-if="filteredBalances.length > 0"
-      class="space-y-4"
-    >
-      <Card>
-        <CardContent class="p-0">
-          <div class="overflow-x-auto">
-            <table class="w-full">
-              <thead class="border-b">
-                <tr class="hover:bg-muted/50">
-                  <th class="text-left p-4 font-medium text-muted-foreground">
-                    Asset
-                  </th>
-                  <th class="text-right p-4 font-medium text-muted-foreground">
-                    Price
-                  </th>
-                  <th class="text-right p-4 font-medium text-muted-foreground">
-                    Liquid
-                  </th>
-                  <th class="text-right p-4 font-medium text-muted-foreground">
-                    Staked
-                  </th>
-                  <th class="text-right p-4 font-medium text-muted-foreground">
-                    Total
-                  </th>
-                  <th class="text-right p-4 font-medium text-muted-foreground">
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr
-                  v-for="balance in filteredBalances"
-                  :key="balance.nai"
-                  class="border-b hover:bg-muted/50 transition-colors"
-                >
-                  <!-- Asset Info -->
-                  <td class="p-4">
-                    <div class="flex items-center gap-3">
-                      <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
-                        <img
-                          v-if="balance.logo_url"
-                          :src="balance.logo_url"
-                          :alt="balance.symbol"
-                          class="h-6 w-6 rounded-full"
-                        >
-                        <span
-                          v-else
-                          class="text-sm font-medium text-primary"
-                        >
-                          {{ balance.symbol.charAt(0) }}
-                        </span>
-                      </div>
-                      <div>
-                        <div class="font-semibold">
-                          {{ balance.symbol }}
-                        </div>
-                        <div class="text-sm text-muted-foreground">
-                          {{ balance.name }}
-                        </div>
-                        <div class="text-xs text-muted-foreground font-mono">
-                          {{ balance.nai }}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-
-                  <!-- Price -->
-                  <td class="p-4 text-right">
-                    <div class="font-medium">
-                      $0.01
-                    </div>
-                    <div class="text-sm text-green-600">
-                      +0.00%
-                    </div>
-                  </td>
-
-                  <!-- Liquid Balance -->
-                  <td class="p-4 text-right">
-                    <div class="font-medium">
-                      {{ balance.liquid_balance }}
-                    </div>
-                    <div class="text-sm text-muted-foreground">
-                      ${{ (parseFloat(balance.liquid_balance) * 0.01).toFixed(2) }}
-                    </div>
-                  </td>
-
-                  <!-- Staked Balance -->
-                  <td class="p-4 text-right">
-                    <div class="font-medium">
-                      {{ balance.staked_balance }}
-                    </div>
-                    <div class="text-sm text-muted-foreground">
-                      ${{ (parseFloat(balance.staked_balance) * 0.01).toFixed(2) }}
-                    </div>
-                  </td>
-
-                  <!-- Total Balance -->
-                  <td class="p-4 text-right">
-                    <div class="font-medium">
-                      {{ balance.total_balance }}
-                    </div>
-                    <div class="text-sm text-muted-foreground">
-                      ${{ (parseFloat(balance.total_balance) * 0.01).toFixed(2) }}
-                    </div>
-                  </td>
-
-                  <!-- Actions -->
-                  <td class="p-4">
-                    <div class="flex justify-end gap-1">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        :disabled="parseFloat(balance.liquid_balance) === 0"
-                        title="Transfer tokens"
-                        @click="openTransferDialog(balance)"
-                      >
-                        <svg
-                          width="14"
-                          height="14"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            style="fill: currentColor"
-                            :d="mdiSend"
-                          />
-                        </svg>
-                      </Button>
-
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        :disabled="parseFloat(balance.liquid_balance) === 0"
-                        title="Stake tokens"
-                        @click="openTransformDialog(balance, 'liquid-to-staked')"
-                      >
-                        <svg
-                          width="14"
-                          height="14"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            style="fill: currentColor"
-                            :d="mdiLock"
-                          />
-                        </svg>
-                      </Button>
-
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        :disabled="parseFloat(balance.staked_balance) === 0"
-                        title="Unstake tokens"
-                        @click="openTransformDialog(balance, 'staked-to-liquid')"
-                      >
-                        <svg
-                          width="14"
-                          height="14"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            style="fill: currentColor"
-                            :d="mdiLockOpen"
-                          />
-                        </svg>
-                      </Button>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-
-    <!-- Empty State -->
-    <div
-      v-else
-      class="text-center py-12"
-    >
-      <svg
-        width="48"
-        height="48"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        class="mx-auto text-muted-foreground mb-4"
-      >
-        <path
-          style="fill: currentColor"
-          :d="mdiAccount"
-        />
-      </svg>
-      <h3 class="text-lg font-semibold mb-2">
-        No token balances found
-      </h3>
-      <p class="text-muted-foreground mb-4">
-        {{ searchQuery ? 'No tokens match your search criteria' : 'You don\'t have any token balances yet' }}
-      </p>
-      <Button
-        v-if="!searchQuery"
-        @click="loadAccountBalances"
-      >
-        <svg
-          width="16"
-          height="16"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          class="mr-2"
-        >
-          <path
-            style="fill: currentColor"
-            :d="mdiRefresh"
-          />
-        </svg>
-        Refresh Balances
-      </Button>
-    </div>
-
-    <!-- Transfer Dialog -->
-    <Dialog v-model:open="isTransferDialogOpen">
-      <DialogContent class="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Transfer {{ selectedTokenForTransfer?.symbol }}</DialogTitle>
-          <DialogDescription>
-            Send tokens to another account. Available balance: {{ selectedTokenForTransfer?.liquid_balance }} {{ selectedTokenForTransfer?.symbol }}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div class="grid gap-4 py-4">
-          <div class="grid gap-2">
-            <Label for="recipient">Recipient Account</Label>
-            <Input
-              id="recipient"
-              v-model="transferRecipient"
-              placeholder="Enter account name"
-            />
-          </div>
-
-          <div class="grid gap-2">
-            <Label for="amount">Amount</Label>
-            <div class="flex gap-2">
-              <Input
-                id="amount"
-                v-model="transferAmount"
-                type="number"
-                :step="1 / Math.pow(10, selectedTokenForTransfer?.precision || 3)"
-                :max="getMaxTransferAmount(selectedTokenForTransfer!)"
-                placeholder="0.000"
-              />
-              <Button
-                variant="outline"
-                @click="transferAmount = selectedTokenForTransfer?.liquid_balance || ''"
-              >
-                Max
-              </Button>
-            </div>
-          </div>
         </div>
 
-        <div class="flex justify-end gap-2">
+        <div class="flex items-center gap-2">
           <Button
             variant="outline"
-            @click="isTransferDialogOpen = false"
-          >
-            Cancel
-          </Button>
-          <Button
-            :disabled="isTransferLoading || !transferAmount || !transferRecipient"
-            @click="transferTokens"
+            :disabled="isLoading"
+            @click="loadAccountBalances"
           >
             <svg
-              v-if="isTransferLoading"
               width="16"
               height="16"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
-              class="mr-2 animate-spin"
+              class="mr-2"
             >
               <path
                 style="fill: currentColor"
                 :d="mdiRefresh"
               />
             </svg>
+            Refresh
+          </Button>
+        </div>
+      </div>
+
+      <!-- Summary Cards -->
+      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total Portfolio Value
+            </CardTitle>
             <svg
-              v-else
               width="16"
               height="16"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
-              class="mr-2"
+              class="text-muted-foreground"
             >
               <path
                 style="fill: currentColor"
-                :d="mdiSend"
+                :d="mdiCurrencyUsd"
               />
             </svg>
-            {{ isTransferLoading ? 'Transferring...' : 'Transfer' }}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-
-    <!-- Transform Dialog -->
-    <Dialog v-model:open="isTransformDialogOpen">
-      <DialogContent class="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>
-            {{ transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake' }} {{ selectedToken?.symbol }}
-          </DialogTitle>
-          <DialogDescription>
-            {{ transformDirection === 'liquid-to-staked'
-              ? `Stake tokens to earn rewards. Available: ${selectedToken?.liquid_balance} ${selectedToken?.symbol}`
-              : `Unstake tokens to make them liquid. Available: ${selectedToken?.staked_balance} ${selectedToken?.symbol}`
-            }}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div class="grid gap-4 py-4">
-          <div class="grid gap-2">
-            <Label for="transformAmount">Amount</Label>
-            <div class="flex gap-2">
-              <Input
-                id="transformAmount"
-                v-model="transformAmount"
-                type="number"
-                :step="1 / Math.pow(10, selectedToken?.precision || 3)"
-                :max="getMaxTransformAmount(selectedToken!, transformDirection)"
-                placeholder="0.000"
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              ${{ totalValue.toFixed(2) }}
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +2.1% from last month
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total Tokens
+            </CardTitle>
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="text-muted-foreground"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiAccount"
               />
-              <Button
-                variant="outline"
-                @click="transformAmount = (transformDirection === 'liquid-to-staked'
-                  ? selectedToken?.liquid_balance
-                  : selectedToken?.staked_balance) || ''"
-              >
-                Max
-              </Button>
+            </svg>
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              {{ tokensStore.tokenCount }}
             </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end gap-2">
-          <Button
-            variant="outline"
-            @click="isTransformDialogOpen = false"
-          >
-            Cancel
-          </Button>
-          <Button
-            :disabled="isTransformLoading || !transformAmount"
-            @click="transformTokens"
-          >
+            <p class="text-xs text-muted-foreground">
+              Different token types
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Liquid Balance
+            </CardTitle>
             <svg
-              v-if="isTransformLoading"
               width="16"
               height="16"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
-              class="mr-2 animate-spin"
+              class="text-muted-foreground"
             >
               <path
                 style="fill: currentColor"
-                :d="mdiRefresh"
+                :d="mdiWater"
               />
             </svg>
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              {{ tokensStore.balances.reduce((sum, b) => sum + parseFloat(b.liquid_balance), 0).toFixed(3) }}
+            </div>
+            <p class="text-xs text-muted-foreground">
+              Available for transfer
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Staked Balance
+            </CardTitle>
             <svg
-              v-else
               width="16"
               height="16"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
-              class="mr-2"
+              class="text-muted-foreground"
             >
               <path
                 style="fill: currentColor"
-                :d="transformDirection === 'liquid-to-staked' ? mdiLock : mdiLockOpen"
+                :d="mdiLock"
               />
             </svg>
-            {{ isTransformLoading
-              ? (transformDirection === 'liquid-to-staked' ? 'Staking...' : 'Unstaking...')
-              : (transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake')
-            }}
-          </Button>
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              {{ tokensStore.balances.reduce((sum, b) => sum + parseFloat(b.staked_balance), 0).toFixed(3) }}
+            </div>
+            <p class="text-xs text-muted-foreground">
+              Earning rewards
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Search -->
+      <div class="flex items-center gap-4">
+        <div class="flex-1">
+          <Input
+            v-model="searchQuery"
+            placeholder="Search tokens by symbol, name, or NAI..."
+            class="max-w-sm"
+          />
         </div>
-      </DialogContent>
-    </Dialog>
-  </div>
+      </div>
+
+      <!-- Loading State -->
+      <div
+        v-if="tokensStore.isLoadingBalances"
+        class="space-y-4"
+      >
+        <Card
+          v-for="i in 3"
+          :key="i"
+        >
+          <CardHeader>
+            <div class="flex items-center justify-between">
+              <div class="space-y-2">
+                <Skeleton class="h-4 w-[250px]" />
+                <Skeleton class="h-3 w-[200px]" />
+              </div>
+              <Skeleton class="h-8 w-8 rounded-full" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div class="grid grid-cols-3 gap-4">
+              <div class="space-y-2">
+                <Skeleton class="h-3 w-[100px]" />
+                <Skeleton class="h-6 w-[80px]" />
+              </div>
+              <div class="space-y-2">
+                <Skeleton class="h-3 w-[100px]" />
+                <Skeleton class="h-6 w-[80px]" />
+              </div>
+              <div class="space-y-2">
+                <Skeleton class="h-3 w-[100px]" />
+                <Skeleton class="h-6 w-[80px]" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Balances Table -->
+      <div
+        v-else-if="filteredBalances.length > 0"
+        class="space-y-4"
+      >
+        <Card>
+          <CardContent class="p-0">
+            <div class="overflow-x-auto">
+              <table class="w-full">
+                <thead class="border-b">
+                  <tr class="hover:bg-muted/50">
+                    <th class="text-left p-4 font-medium text-muted-foreground">
+                      Asset
+                    </th>
+                    <th class="text-right p-4 font-medium text-muted-foreground">
+                      Price
+                    </th>
+                    <th class="text-right p-4 font-medium text-muted-foreground">
+                      Liquid
+                    </th>
+                    <th class="text-right p-4 font-medium text-muted-foreground">
+                      Staked
+                    </th>
+                    <th class="text-right p-4 font-medium text-muted-foreground">
+                      Total
+                    </th>
+                    <th class="text-right p-4 font-medium text-muted-foreground">
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="balance in filteredBalances"
+                    :key="balance.nai"
+                    class="border-b hover:bg-muted/50 transition-colors"
+                  >
+                    <!-- Asset Info -->
+                    <td class="p-4">
+                      <div class="flex items-center gap-3">
+                        <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+                          <img
+                            v-if="balance.logo_url"
+                            :src="balance.logo_url"
+                            :alt="balance.symbol"
+                            class="h-6 w-6 rounded-full"
+                          >
+                          <span
+                            v-else
+                            class="text-sm font-medium text-primary"
+                          >
+                            {{ balance.symbol.charAt(0) }}
+                          </span>
+                        </div>
+                        <div>
+                          <div class="font-semibold">
+                            {{ balance.symbol }}
+                          </div>
+                          <div class="text-sm text-muted-foreground">
+                            {{ balance.name }}
+                          </div>
+                          <div class="text-xs text-muted-foreground font-mono">
+                            {{ balance.nai }}
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+
+                    <!-- Price -->
+                    <td class="p-4 text-right">
+                      <div class="font-medium">
+                        $0.01
+                      </div>
+                      <div class="text-sm text-green-600">
+                        +0.00%
+                      </div>
+                    </td>
+
+                    <!-- Liquid Balance -->
+                    <td class="p-4 text-right">
+                      <div class="font-medium">
+                        {{ balance.liquid_balance }}
+                      </div>
+                      <div class="text-sm text-muted-foreground">
+                        ${{ (parseFloat(balance.liquid_balance) * 0.01).toFixed(2) }}
+                      </div>
+                    </td>
+
+                    <!-- Staked Balance -->
+                    <td class="p-4 text-right">
+                      <div class="font-medium">
+                        {{ balance.staked_balance }}
+                      </div>
+                      <div class="text-sm text-muted-foreground">
+                        ${{ (parseFloat(balance.staked_balance) * 0.01).toFixed(2) }}
+                      </div>
+                    </td>
+
+                    <!-- Total Balance -->
+                    <td class="p-4 text-right">
+                      <div class="font-medium">
+                        {{ balance.total_balance }}
+                      </div>
+                      <div class="text-sm text-muted-foreground">
+                        ${{ (parseFloat(balance.total_balance) * 0.01).toFixed(2) }}
+                      </div>
+                    </td>
+
+                    <!-- Actions -->
+                    <td class="p-4">
+                      <div class="flex justify-end gap-1">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          :disabled="parseFloat(balance.liquid_balance) === 0"
+                          title="Transfer tokens"
+                          @click="openTransferDialog(balance)"
+                        >
+                          <svg
+                            width="14"
+                            height="14"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              style="fill: currentColor"
+                              :d="mdiSend"
+                            />
+                          </svg>
+                        </Button>
+
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          :disabled="parseFloat(balance.liquid_balance) === 0"
+                          title="Stake tokens"
+                          @click="openTransformDialog(balance, 'liquid-to-staked')"
+                        >
+                          <svg
+                            width="14"
+                            height="14"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              style="fill: currentColor"
+                              :d="mdiLock"
+                            />
+                          </svg>
+                        </Button>
+
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          :disabled="parseFloat(balance.staked_balance) === 0"
+                          title="Unstake tokens"
+                          @click="openTransformDialog(balance, 'staked-to-liquid')"
+                        >
+                          <svg
+                            width="14"
+                            height="14"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              style="fill: currentColor"
+                              :d="mdiLockOpen"
+                            />
+                          </svg>
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Empty State -->
+      <div
+        v-else
+        class="text-center py-12"
+      >
+        <svg
+          width="48"
+          height="48"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="mx-auto text-muted-foreground mb-4"
+        >
+          <path
+            style="fill: currentColor"
+            :d="mdiAccount"
+          />
+        </svg>
+        <h3 class="text-lg font-semibold mb-2">
+          No token balances found
+        </h3>
+        <p class="text-muted-foreground mb-4">
+          {{ searchQuery ? 'No tokens match your search criteria' : 'You don\'t have any token balances yet' }}
+        </p>
+        <Button
+          v-if="!searchQuery"
+          @click="loadAccountBalances"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mr-2"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiRefresh"
+            />
+          </svg>
+          Refresh Balances
+        </Button>
+      </div>
+
+      <!-- Transfer Dialog -->
+      <Dialog v-model:open="isTransferDialogOpen">
+        <DialogContent class="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Transfer {{ selectedTokenForTransfer?.symbol }}</DialogTitle>
+            <DialogDescription>
+              Send tokens to another account. Available balance: {{ selectedTokenForTransfer?.liquid_balance }} {{ selectedTokenForTransfer?.symbol }}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div class="grid gap-4 py-4">
+            <div class="grid gap-2">
+              <Label for="recipient">Recipient Account</Label>
+              <Input
+                id="recipient"
+                v-model="transferRecipient"
+                placeholder="Enter account name"
+              />
+            </div>
+
+            <div class="grid gap-2">
+              <Label for="amount">Amount</Label>
+              <div class="flex gap-2">
+                <Input
+                  id="amount"
+                  v-model="transferAmount"
+                  type="number"
+                  :step="1 / Math.pow(10, selectedTokenForTransfer?.precision || 3)"
+                  :max="getMaxTransferAmount(selectedTokenForTransfer!)"
+                  placeholder="0.000"
+                />
+                <Button
+                  variant="outline"
+                  @click="transferAmount = selectedTokenForTransfer?.liquid_balance || ''"
+                >
+                  Max
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end gap-2">
+            <Button
+              variant="outline"
+              @click="isTransferDialogOpen = false"
+            >
+              Cancel
+            </Button>
+            <Button
+              :disabled="isTransferLoading || !transferAmount || !transferRecipient"
+              @click="transferTokens"
+            >
+              <svg
+                v-if="isTransferLoading"
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="mr-2 animate-spin"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="mdiRefresh"
+                />
+              </svg>
+              <svg
+                v-else
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="mr-2"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="mdiSend"
+                />
+              </svg>
+              {{ isTransferLoading ? 'Transferring...' : 'Transfer' }}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <!-- Transform Dialog -->
+      <Dialog v-model:open="isTransformDialogOpen">
+        <DialogContent class="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>
+              {{ transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake' }} {{ selectedToken?.symbol }}
+            </DialogTitle>
+            <DialogDescription>
+              {{ transformDirection === 'liquid-to-staked'
+                ? `Stake tokens to earn rewards. Available: ${selectedToken?.liquid_balance} ${selectedToken?.symbol}`
+                : `Unstake tokens to make them liquid. Available: ${selectedToken?.staked_balance} ${selectedToken?.symbol}`
+              }}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div class="grid gap-4 py-4">
+            <div class="grid gap-2">
+              <Label for="transformAmount">Amount</Label>
+              <div class="flex gap-2">
+                <Input
+                  id="transformAmount"
+                  v-model="transformAmount"
+                  type="number"
+                  :step="1 / Math.pow(10, selectedToken?.precision || 3)"
+                  :max="getMaxTransformAmount(selectedToken!, transformDirection)"
+                  placeholder="0.000"
+                />
+                <Button
+                  variant="outline"
+                  @click="transformAmount = (transformDirection === 'liquid-to-staked'
+                    ? selectedToken?.liquid_balance
+                    : selectedToken?.staked_balance) || ''"
+                >
+                  Max
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end gap-2">
+            <Button
+              variant="outline"
+              @click="isTransformDialogOpen = false"
+            >
+              Cancel
+            </Button>
+            <Button
+              :disabled="isTransformLoading || !transformAmount"
+              @click="transformTokens"
+            >
+              <svg
+                v-if="isTransformLoading"
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="mr-2 animate-spin"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="mdiRefresh"
+                />
+              </svg>
+              <svg
+                v-else
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="mr-2"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="transformDirection === 'liquid-to-staked' ? mdiLock : mdiLockOpen"
+                />
+              </svg>
+              {{ isTransformLoading
+                ? (transformDirection === 'liquid-to-staked' ? 'Staking...' : 'Unstaking...')
+                : (transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake')
+              }}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  </HTMView>
 </template>
diff --git a/src/pages/tokens/my-tokens.vue b/src/pages/tokens/my-tokens.vue
index 3f4ba86..e26ad86 100644
--- a/src/pages/tokens/my-tokens.vue
+++ b/src/pages/tokens/my-tokens.vue
@@ -7,6 +7,7 @@ import {
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import HTMView from '@/components/HTMView.vue';
 import TokenCard from '@/components/TokenCard.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -61,41 +62,122 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="container mx-auto p-6 max-w-6xl">
-    <div class="space-y-6">
-      <!-- Header -->
-      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <div>
-          <h1 class="text-3xl font-bold tracking-tight">
-            My Token Definitions
-          </h1>
-          <p class="text-muted-foreground">
-            Manage and view your custom tokens on Hive Token Machine
-          </p>
+  <HTMView>
+    <div class="container mx-auto p-6 max-w-6xl">
+      <div class="space-y-6">
+        <!-- Header -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <h1 class="text-3xl font-bold tracking-tight">
+              My Token Definitions
+            </h1>
+            <p class="text-muted-foreground">
+              Manage and view your custom tokens on Hive Token Machine
+            </p>
+          </div>
+
+          <div class="flex gap-2">
+            <Button
+              variant="outline"
+              :disabled="isLoading"
+              @click="loadTokenDefinitions"
+            >
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                :class="{ 'animate-spin': isLoading }"
+                class="mr-2"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="mdiRefresh"
+                />
+              </svg>
+              Refresh
+            </Button>
+
+            <Button @click="createNewToken">
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="mr-2"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="mdiPlus"
+                />
+              </svg>
+              Create Token
+            </Button>
+          </div>
+        </div>
+
+        <!-- Search -->
+        <div class="max-w-md">
+          <Input
+            v-model="searchQuery"
+            placeholder="Search tokens by name, symbol, or NAI..."
+            class="w-full"
+          />
         </div>
 
-        <div class="flex gap-2">
-          <Button
-            variant="outline"
-            :disabled="isLoading"
-            @click="loadTokenDefinitions"
+        <!-- Loading State -->
+        <div
+          v-if="isLoading"
+          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+        >
+          <Card
+            v-for="i in 3"
+            :key="i"
           >
-            <svg
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              :class="{ 'animate-spin': isLoading }"
-              class="mr-2"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiRefresh"
-              />
-            </svg>
-            Refresh
-          </Button>
+            <CardHeader>
+              <div class="flex items-center justify-between">
+                <div class="space-y-2 flex-1">
+                  <Skeleton class="h-4 w-[200px]" />
+                  <Skeleton class="h-3 w-[100px]" />
+                </div>
+                <Skeleton class="h-6 w-[80px]" />
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div class="space-y-3">
+                <Skeleton class="h-3 w-full" />
+                <Skeleton class="h-3 w-2/3" />
+                <div class="flex justify-between">
+                  <Skeleton class="h-3 w-[80px]" />
+                  <Skeleton class="h-3 w-[60px]" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
 
+        <div
+          v-else-if="tokensStore.tokenDefinitions.length === 0"
+          class="text-center py-12"
+        >
+          <svg
+            width="64"
+            height="64"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mx-auto text-muted-foreground mb-4"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiCurrencyUsd"
+            />
+          </svg>
+          <h3 class="text-lg font-semibold mb-2">
+            No tokens created yet
+          </h3>
+          <p class="text-muted-foreground mb-6">
+            Create your first custom token to get started
+          </p>
           <Button @click="createNewToken">
             <svg
               width="16"
@@ -109,159 +191,80 @@ onMounted(() => {
                 :d="mdiPlus"
               />
             </svg>
-            Create Token
+            Create Your First Token
           </Button>
         </div>
-      </div>
 
-      <!-- Search -->
-      <div class="max-w-md">
-        <Input
-          v-model="searchQuery"
-          placeholder="Search tokens by name, symbol, or NAI..."
-          class="w-full"
-        />
-      </div>
-
-      <!-- Loading State -->
-      <div
-        v-if="isLoading"
-        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
-      >
-        <Card
-          v-for="i in 3"
-          :key="i"
+        <!-- No Search Results -->
+        <div
+          v-else-if="filteredTokens.length === 0"
+          class="text-center py-12"
         >
-          <CardHeader>
-            <div class="flex items-center justify-between">
-              <div class="space-y-2 flex-1">
-                <Skeleton class="h-4 w-[200px]" />
-                <Skeleton class="h-3 w-[100px]" />
-              </div>
-              <Skeleton class="h-6 w-[80px]" />
-            </div>
-          </CardHeader>
-          <CardContent>
-            <div class="space-y-3">
-              <Skeleton class="h-3 w-full" />
-              <Skeleton class="h-3 w-2/3" />
-              <div class="flex justify-between">
-                <Skeleton class="h-3 w-[80px]" />
-                <Skeleton class="h-3 w-[60px]" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+          <h3 class="text-lg font-semibold mb-2">
+            No tokens found
+          </h3>
+          <p class="text-muted-foreground">
+            Try adjusting your search criteria
+          </p>
+        </div>
 
-      <div
-        v-else-if="tokensStore.tokenDefinitions.length === 0"
-        class="text-center py-12"
-      >
-        <svg
-          width="64"
-          height="64"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          class="mx-auto text-muted-foreground mb-4"
+        <!-- Token Grid -->
+        <div
+          v-else
+          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
         >
-          <path
-            style="fill: currentColor"
-            :d="mdiCurrencyUsd"
+          <TokenCard
+            v-for="token in filteredTokens"
+            :key="token.nai"
+            :token="token"
           />
-        </svg>
-        <h3 class="text-lg font-semibold mb-2">
-          No tokens created yet
-        </h3>
-        <p class="text-muted-foreground mb-6">
-          Create your first custom token to get started
-        </p>
-        <Button @click="createNewToken">
-          <svg
-            width="16"
-            height="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="mr-2"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiPlus"
-            />
-          </svg>
-          Create Your First Token
-        </Button>
-      </div>
-
-      <!-- No Search Results -->
-      <div
-        v-else-if="filteredTokens.length === 0"
-        class="text-center py-12"
-      >
-        <h3 class="text-lg font-semibold mb-2">
-          No tokens found
-        </h3>
-        <p class="text-muted-foreground">
-          Try adjusting your search criteria
-        </p>
-      </div>
-
-      <!-- Token Grid -->
-      <div
-        v-else
-        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
-      >
-        <TokenCard
-          v-for="token in filteredTokens"
-          :key="token.nai"
-          :token="token"
-        />
-      </div>
+        </div>
 
-      <!-- Summary Stats -->
-      <div
-        v-if="tokensStore.tokenDefinitions.length > 0"
-        class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-6 border-t"
-      >
-        <Card>
-          <CardContent class="pt-6">
-            <div class="text-center">
-              <div class="text-2xl font-bold">
-                {{ tokensStore.tokenDefinitions.length }}
-              </div>
-              <div class="text-sm text-muted-foreground">
-                Total Tokens
+        <!-- Summary Stats -->
+        <div
+          v-if="tokensStore.tokenDefinitions.length > 0"
+          class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-6 border-t"
+        >
+          <Card>
+            <CardContent class="pt-6">
+              <div class="text-center">
+                <div class="text-2xl font-bold">
+                  {{ tokensStore.tokenDefinitions.length }}
+                </div>
+                <div class="text-sm text-muted-foreground">
+                  Total Tokens
+                </div>
               </div>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
 
-        <Card>
-          <CardContent class="pt-6">
-            <div class="text-center">
-              <div class="text-2xl font-bold text-green-600">
-                {{ tokensStore.tokenDefinitions.filter(t => t.active).length }}
+          <Card>
+            <CardContent class="pt-6">
+              <div class="text-center">
+                <div class="text-2xl font-bold text-green-600">
+                  {{ tokensStore.tokenDefinitions.filter(t => t.active).length }}
+                </div>
+                <div class="text-sm text-muted-foreground">
+                  Active Tokens
+                </div>
               </div>
-              <div class="text-sm text-muted-foreground">
-                Active Tokens
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
 
-        <Card>
-          <CardContent class="pt-6">
-            <div class="text-center">
-              <div class="text-2xl font-bold text-blue-600">
-                {{ tokensStore.tokenDefinitions.filter(t => t.can_stake).length }}
-              </div>
-              <div class="text-sm text-muted-foreground">
-                Stakeable Tokens
+          <Card>
+            <CardContent class="pt-6">
+              <div class="text-center">
+                <div class="text-2xl font-bold text-blue-600">
+                  {{ tokensStore.tokenDefinitions.filter(t => t.can_stake).length }}
+                </div>
+                <div class="text-sm text-muted-foreground">
+                  Stakeable Tokens
+                </div>
               </div>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
+        </div>
       </div>
     </div>
-  </div>
+  </HTMView>
 </template>
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index a6e1be0..9b777f8 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -1,21 +1,103 @@
 <script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { toast } from 'vue-sonner';
+
+import HTMLoginForm from '@/components/HTMLoginForm.vue';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+const router = useRouter();
+const showLoginForm = ref(false);
+
+// Show HTM login form
+const showHTMLogin = () => {
+  showLoginForm.value = true;
+};
+
+// Handle successful login
+const onLoginSuccess = () => {
+  showLoginForm.value = false;
+  // Redirect to my balance page after successful login
+  router.push('/tokens/my-balance');
+};
+
+// TODO: Implement actual HTM account registration
+const registerHTMAccount = () => {
+  // This will be implemented later - it's a more complex process
+  // For now, show a placeholder message
+  toast.info('HTM Account registration will be implemented soon!', {
+    description: 'This feature is coming in a future update.'
+  });
+};
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center h-full text-center px-4">
-    <h1 class="text-2xl font-bold mb-4">
-      Register HTM Account
-    </h1>
-    <p class="mb-6">
-      To manage your tokens, you need to register an HTM account. Click the button below to get started.
-    </p>
-    <Button
-      size="lg"
-      color="primary"
+  <div class="container mx-auto py-12 px-4 max-w-2xl">
+    <!-- Show HTM Login Form -->
+    <div
+      v-if="showLoginForm"
+      class="flex justify-center"
     >
-      <!-- TODO: Actual registration / Allow to log into HTM account -->
-      Register HTM Account
-    </Button>
+      <HTMLoginForm
+        :show-close-button="true"
+        title="HTM Login"
+        description="Login to your existing HTM account or create a new one"
+        @success="onLoginSuccess"
+        @close="showLoginForm = false"
+      />
+    </div>
+
+    <!-- Show registration options -->
+    <Card v-else>
+      <CardHeader class="text-center">
+        <CardTitle class="text-2xl">
+          Register HTM Account
+        </CardTitle>
+        <CardDescription>
+          Create an account on the Hive Token Machine to manage your custom tokens
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="space-y-6">
+        <div class="text-center space-y-4">
+          <p class="text-sm text-muted-foreground">
+            HTM accounts allow you to create, manage, and transfer custom tokens on the Hive blockchain.
+            You can create a new HTM account or login to an existing one.
+          </p>
+
+          <!-- Registration options -->
+          <div class="space-y-3">
+            <Button
+              size="lg"
+              class="w-full"
+              @click="registerHTMAccount"
+            >
+              <!-- TODO: Actual registration / Allow to log into HTM account -->
+              Register New HTM Account
+            </Button>
+
+            <div class="relative">
+              <div class="absolute inset-0 flex items-center">
+                <span class="w-full border-t" />
+              </div>
+              <div class="relative flex justify-center text-xs uppercase">
+                <span class="bg-background px-2 text-muted-foreground">
+                  Or
+                </span>
+              </div>
+            </div>
+
+            <Button
+              variant="outline"
+              size="lg"
+              class="w-full"
+              @click="showHTMLogin"
+            >
+              Login to Existing HTM Account
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
   </div>
 </template>
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index b2d1765..04196a2 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -33,6 +33,10 @@ export class CTokensProvider extends AEncryptionProvider {
     return !!CTokensProvider.#operationalWallet;
   }
 
+  public static getOperationalPublicKey (): string | undefined {
+    return CTokensProvider.#operationalWallet?.getPublicKeys()[0];
+  }
+
   private constructor (
     chain: IHiveChainInterface,
     public readonly role: TRole,
-- 
GitLab


From c3f91730018250486e20a4cddde70a97f45badb4 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Fri, 10 Oct 2025 15:09:27 +0200
Subject: [PATCH 012/102] Add all tokens list

---
 src/components/HTMView.vue               |   8 +-
 src/components/navigation/AppSidebar.vue |  19 +-
 src/pages/tokens/holders.vue             | 408 ----------------------
 src/pages/tokens/list.vue                | 421 +++++++++++++++++++++++
 src/utils/router.ts                      |   4 +-
 5 files changed, 440 insertions(+), 420 deletions(-)
 delete mode 100644 src/pages/tokens/holders.vue
 create mode 100644 src/pages/tokens/list.vue

diff --git a/src/components/HTMView.vue b/src/components/HTMView.vue
index 665adb4..9dc7961 100644
--- a/src/components/HTMView.vue
+++ b/src/components/HTMView.vue
@@ -12,8 +12,12 @@ const router = useRouter();
 
 const showLoginForm = ref(false);
 
+const props = defineProps<{
+  isPublicPage?: boolean;
+}>();
+
 // Check if user is authenticated (has wallet connected)
-const isAuthenticated = computed(() => tokensStore.wallet);
+const isAuthenticated = computed(() => tokensStore.wallet || props.isPublicPage);
 
 // Show HTM login form
 const showHTMLogin = () => {
@@ -33,7 +37,7 @@ const goToRegistration = () => {
 </script>
 
 <template>
-  <div>
+  <div class="p-8">
     <!-- Show login/registration page when not authenticated -->
     <div
       v-if="!isAuthenticated"
diff --git a/src/components/navigation/AppSidebar.vue b/src/components/navigation/AppSidebar.vue
index 37ffc27..ac6b449 100644
--- a/src/components/navigation/AppSidebar.vue
+++ b/src/components/navigation/AppSidebar.vue
@@ -19,6 +19,7 @@ const tokensStore = useTokensStore();
 const walletStore = useWalletStore();
 
 const isL1BasedView = computed(() => walletStore.hasWallet && !walletStore.isL2Wallet);
+const hasHTMWallet = computed(() => !!tokensStore.wallet);
 const hasNoHTMWallet = computed(() => !tokensStore.wallet);
 
 const groups: { title: string; items: Array<{ title: string; url: string; icon: string; badge?: string; visible?: Ref<boolean>; disabled?: Ref<boolean> }> }[] = [{
@@ -50,6 +51,11 @@ const groups: { title: string; items: Array<{ title: string; url: string; icon:
 }, {
   title: 'Tokens',
   items: [
+    {
+      title: 'Tokens List',
+      url: '/tokens/list',
+      icon: mdiAccountGroup
+    },
     {
       title: 'Register HTM Account',
       url: '/tokens/register-account',
@@ -57,19 +63,16 @@ const groups: { title: string; items: Array<{ title: string; url: string; icon:
       visible: hasNoHTMWallet
     },
     {
-      title: 'Token Balances',
+      title: 'My HTM Account',
       url: '/tokens/my-balance',
-      icon: mdiWallet
+      icon: mdiWallet,
+      visible: hasHTMWallet
     },
     {
       title: 'My Token Definitions',
       url: '/tokens/my-tokens',
-      icon: mdiViewList
-    },
-    {
-      title: 'Token Holders',
-      url: '/tokens/holders',
-      icon: mdiAccountGroup
+      icon: mdiViewList,
+      visible: hasHTMWallet
     }
   ]
 }, {
diff --git a/src/pages/tokens/holders.vue b/src/pages/tokens/holders.vue
deleted file mode 100644
index d479d6b..0000000
--- a/src/pages/tokens/holders.vue
+++ /dev/null
@@ -1,408 +0,0 @@
-<script setup lang="ts">
-import {
-  mdiAccountGroup,
-  mdiTrophy,
-  mdiCrown
-} from '@mdi/js';
-import { computed, onMounted, ref } from 'vue';
-
-import HTMView from '@/components/HTMView.vue';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Skeleton } from '@/components/ui/skeleton';
-import { useTokensStore } from '@/stores/tokens.store';
-import { formatCTokenAmount, type CTokenTopHolder } from '@/utils/ctokens-api';
-import { toastError } from '@/utils/parse-error';
-
-const tokensStore = useTokensStore();
-
-// State
-const holders = ref<CTokenTopHolder[]>([]);
-const isLoading = ref(false);
-const selectedToken = ref<string>('');
-const selectedPrecision = ref<number>(3);
-const currentPage = ref(1);
-const hasMorePages = ref(true);
-
-// Computed
-const availableTokens = computed(() => {
-  return tokensStore.tokenDefinitions.map(token => ({
-    value: `${token.nai}:${token.precision}`,
-    label: `${token.symbol} (${token.nai})`,
-    nai: token.nai,
-    precision: token.precision
-  }));
-});
-
-const selectedTokenInfo = computed(() => {
-  if (!selectedToken.value) return null;
-  const [nai] = selectedToken.value.split(':');
-  return tokensStore.tokenDefinitions.find(t => t.nai === nai);
-});
-
-const formattedHolders = computed(() => {
-  return holders.value.map(holder => ({
-    ...holder,
-    formattedAmount: formatCTokenAmount(holder.amount, selectedPrecision.value),
-    percentage: calculatePercentage(holder.amount),
-    displayName: getDisplayName(holder)
-  }));
-});
-
-// Methods
-const calculatePercentage = (amount: string): number => {
-  if (!selectedTokenInfo.value) return 0;
-  const totalSupply = parseFloat(selectedTokenInfo.value.current_supply);
-  const holderAmount = parseFloat(formatCTokenAmount(amount, selectedPrecision.value));
-  return totalSupply > 0 ? (holderAmount / totalSupply) * 100 : 0;
-};
-
-const getDisplayName = (holder: CTokenTopHolder): string => {
-  // Try to get name from metadata, fallback to user key
-  const metadata = holder.metadata as { name?: string; display_name?: string } | undefined;
-  return metadata?.display_name || metadata?.name || holder.user;
-};
-
-const loadTopHolders = async (page = 1) => {
-  if (!selectedToken.value) return;
-
-  try {
-    isLoading.value = true;
-
-    const [nai, precision] = selectedToken.value.split(':');
-    const newHolders = await tokensStore.getTopHolders(nai, parseInt(precision), page);
-
-    if (page === 1)
-      holders.value = newHolders;
-    else
-      holders.value.push(...newHolders);
-
-    hasMorePages.value = newHolders.length === 100; // API returns 100 results per page
-    currentPage.value = page;
-  } catch (error) {
-    toastError('Failed to load top holders', error);
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-const loadMore = async () => {
-  if (!hasMorePages.value || isLoading.value) return;
-  await loadTopHolders(currentPage.value + 1);
-};
-
-const refresh = async () => {
-  currentPage.value = 1;
-  hasMorePages.value = true;
-  await loadTopHolders(1);
-};
-
-const onTokenChange = (value: string) => {
-  selectedToken.value = value;
-  const [, precision] = value.split(':');
-  selectedPrecision.value = parseInt(precision);
-  holders.value = [];
-  currentPage.value = 1;
-  hasMorePages.value = true;
-  loadTopHolders(1);
-};
-
-// Initialize
-onMounted(async () => {
-  await tokensStore.loadTokenDefinitions();
-
-  // Auto-select first token if available
-  if (availableTokens.value.length > 0)
-    onTokenChange(availableTokens.value[0].value);
-});
-</script>
-
-<template>
-  <HTMView>
-    <div class="container mx-auto py-6 space-y-6">
-      <!-- Header -->
-      <div class="flex items-center justify-between">
-        <div>
-          <h1 class="text-3xl font-bold tracking-tight">
-            Top Token Holders
-          </h1>
-          <p class="text-muted-foreground">
-            View the largest holders of custom tokens on Hive Token Machine
-          </p>
-        </div>
-      </div>
-
-      <!-- Token Selection -->
-      <Card>
-        <CardHeader>
-          <CardTitle class="flex items-center gap-2">
-            <svg
-              width="20"
-              height="20"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiTrophy"
-              />
-            </svg>
-            Select Token
-          </CardTitle>
-          <CardDescription>
-            Choose a token to view its top holders
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div class="flex items-center gap-4">
-            <div class="flex-1">
-              <Select
-                :value="selectedToken"
-                @update:value="onTokenChange"
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Select a token..." />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem
-                    v-for="token in availableTokens"
-                    :key="token.value"
-                    :value="token.value"
-                  >
-                    {{ token.label }}
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <Button
-              variant="outline"
-              :disabled="!selectedToken || isLoading"
-              @click="refresh"
-            >
-              <svg
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="mr-1"
-                :class="{ 'animate-spin': isLoading }"
-              >
-                <path
-                  style="fill: currentColor"
-                  d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z"
-                />
-              </svg>
-              Refresh
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      <!-- Token Info -->
-      <Card v-if="selectedTokenInfo">
-        <CardContent class="pt-6">
-          <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-            <div class="text-center">
-              <div class="text-2xl font-bold">
-                {{ selectedTokenInfo.symbol }}
-              </div>
-              <div class="text-sm text-muted-foreground">
-                Token Symbol
-              </div>
-            </div>
-            <div class="text-center">
-              <div class="text-2xl font-bold">
-                {{ parseFloat(selectedTokenInfo.current_supply).toLocaleString() }}
-              </div>
-              <div class="text-sm text-muted-foreground">
-                Total Supply
-              </div>
-            </div>
-            <div class="text-center">
-              <div class="text-2xl font-bold">
-                {{ holders.length }}
-              </div>
-              <div class="text-sm text-muted-foreground">
-                Top Holders Shown
-              </div>
-            </div>
-            <div class="text-center">
-              <div class="text-2xl font-bold">
-                {{ selectedTokenInfo.precision }}
-              </div>
-              <div class="text-sm text-muted-foreground">
-                Decimal Places
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      <!-- Loading State -->
-      <div
-        v-if="isLoading && holders.length === 0"
-        class="space-y-3"
-      >
-        <Card
-          v-for="i in 10"
-          :key="i"
-        >
-          <CardContent class="p-4">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-3">
-                <Skeleton class="h-8 w-8 rounded-full" />
-                <div class="space-y-2">
-                  <Skeleton class="h-4 w-[150px]" />
-                  <Skeleton class="h-3 w-[100px]" />
-                </div>
-              </div>
-              <div class="text-right space-y-2">
-                <Skeleton class="h-4 w-[100px]" />
-                <Skeleton class="h-3 w-[60px]" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      <!-- Top Holders List -->
-      <div
-        v-else-if="formattedHolders.length > 0"
-        class="space-y-3"
-      >
-        <Card
-          v-for="holder in formattedHolders"
-          :key="holder.user"
-          class="hover:shadow-md transition-shadow"
-        >
-          <CardContent class="p-4">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-4">
-                <!-- Rank Badge -->
-                <div
-                  class="flex items-center justify-center w-10 h-10 rounded-full font-bold text-white"
-                  :class="{
-                    'bg-yellow-500': holder.rank === 1,
-                    'bg-gray-400': holder.rank === 2,
-                    'bg-orange-600': holder.rank === 3,
-                    'bg-blue-500': holder.rank > 3
-                  }"
-                >
-                  <svg
-                    v-if="holder.rank === 1"
-                    width="20"
-                    height="20"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      style="fill: currentColor"
-                      :d="mdiCrown"
-                    />
-                  </svg>
-                  <span v-else>{{ holder.rank }}</span>
-                </div>
-
-                <!-- Holder Info -->
-                <div>
-                  <div class="font-semibold">
-                    {{ holder.displayName }}
-                  </div>
-                  <div class="text-sm text-muted-foreground">
-                    Rank #{{ holder.rank }} • {{ holder.percentage.toFixed(2) }}% of supply
-                  </div>
-                </div>
-              </div>
-
-              <!-- Amount -->
-              <div class="text-right">
-                <div class="font-bold text-lg">
-                  {{ parseFloat(holder.formattedAmount).toLocaleString() }}
-                </div>
-                <div class="text-sm text-muted-foreground">
-                  {{ selectedTokenInfo?.symbol }}
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <!-- Load More Button -->
-        <div
-          v-if="hasMorePages"
-          class="text-center pt-4"
-        >
-          <Button
-            variant="outline"
-            :disabled="isLoading"
-            @click="loadMore"
-          >
-            <svg
-              v-if="isLoading"
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="mr-2 animate-spin"
-            >
-              <path
-                style="fill: currentColor"
-                d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-              />
-            </svg>
-            {{ isLoading ? 'Loading...' : 'Load More' }}
-          </Button>
-        </div>
-      </div>
-
-      <!-- Empty State -->
-      <Card v-else-if="selectedToken && !isLoading">
-        <CardContent class="text-center py-12">
-          <svg
-            width="64"
-            height="64"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="mx-auto text-muted-foreground mb-4"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiAccountGroup"
-            />
-          </svg>
-          <h3 class="text-lg font-semibold mb-2">
-            No Holders Found
-          </h3>
-          <p class="text-muted-foreground mb-4">
-            This token doesn't have any registered holders yet.
-          </p>
-        </CardContent>
-      </Card>
-
-      <!-- No Token Selected -->
-      <Card v-else-if="!selectedToken && !isLoading">
-        <CardContent class="text-center py-12">
-          <svg
-            width="64"
-            height="64"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="mx-auto text-muted-foreground mb-4"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiTrophy"
-            />
-          </svg>
-          <h3 class="text-lg font-semibold mb-2">
-            Select a Token
-          </h3>
-          <p class="text-muted-foreground">
-            Choose a token from the dropdown above to view its top holders.
-          </p>
-        </CardContent>
-      </Card>
-    </div>
-  </HTMView>
-</template>
diff --git a/src/pages/tokens/list.vue b/src/pages/tokens/list.vue
new file mode 100644
index 0000000..98828d3
--- /dev/null
+++ b/src/pages/tokens/list.vue
@@ -0,0 +1,421 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import HTMView from '@/components/HTMView.vue';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { toastError } from '@/utils/parse-error';
+import { getWax } from '@/stores/wax.store';
+import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
+import { mdiInfinity } from '@mdi/js';
+
+export interface CToken {
+  nai: string;
+  isStaked: boolean;
+  ownerPublicKey: string;
+  precision: number;
+  displayTotalSupply: string;
+  totalSupply: bigint;
+  maxSupply: bigint;
+  displayMaxSupply: string;
+  capped: boolean;
+  othersCanStake: boolean;
+  othersCanUnstake: boolean;
+  isNft: boolean;
+  metadata?: Record<string, unknown>;
+  // Parsed from the metadata
+  name?: string;
+  description?: string;
+  website?: string;
+  image?: string;
+}
+
+// State
+const tokensFullList = ref<CToken[]>([]);
+const isLoading = ref(false);
+const currentPage = ref(0);
+const hasMorePages = ref(true);
+
+// Get avatar fallback text
+const getAvatarFallback = (token: CToken): string => {
+  if (token.name) {
+    return token.name.slice(0, 2).toUpperCase();
+  }
+  return token.ownerPublicKey.slice(3, 5).toUpperCase();
+};
+
+// Navigate to token detail page (placeholder for now)
+const viewTokenDetails = (token: CToken) => {
+  // TODO: Navigate to token detail page when created
+  // router.push(`/tokens/${token.nai}`);
+  console.log('View token details:', token);
+};
+
+const loadTokens = async (page: number = 1) => {
+  try {
+    isLoading.value = true;
+
+    const wax = await getWax();
+    const formatAsset = (value: string | bigint, precision: number, name?: string): string => {
+      const formatted = wax.formatter.formatNumber(value, precision);
+
+      return name ? `${formatted} ${name}` : formatted;
+    };
+    // Temporary naive implementation of vesting space check
+    const isVesting = (nai: string, precision: number) => (((Number(nai.slice(2, -1)) << 5) | 0x10 | precision) & 0x20) != 0;
+
+    const tokens = await wax.restApi.ctokensApi.registeredTokens({}) as Required<CtokensAppToken>[];
+
+    tokensFullList.value.push(...tokens.map(token => {
+      const { name, description, website, image } = (token.metadata || {}) as Record<string, string>;
+
+      return {
+        nai: token.nai,
+        isStaked: isVesting(token.nai, token.precision),
+        displayMaxSupply: formatAsset(token.max_supply, token.precision, name),
+        ownerPublicKey: token.owner,
+        precision: token.precision,
+        displayTotalSupply: formatAsset(token.total_supply, token.precision, name),
+        totalSupply: BigInt(token.total_supply),
+        maxSupply: BigInt(token.max_supply),
+        capped: token.capped,
+        othersCanStake: token.others_can_stake,
+        othersCanUnstake: token.others_can_unstake,
+        isNft: token.is_nft,
+        metadata: token.metadata,
+        name,
+        description,
+        website,
+        image
+      } as CToken;
+    }));
+
+    hasMorePages.value = tokens.length === 100; // API returns 100 results per page
+    currentPage.value = page;
+  } catch (error) {
+    toastError('Failed to load tokens', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const loadMore = () => {
+  if (!hasMorePages.value || isLoading.value) return;
+  void loadTokens(currentPage.value + 1);
+};
+
+// Initialize
+onMounted(() => {
+  loadMore();
+});
+</script>
+
+<template>
+  <HTMView :is-public-page="true">
+    <div class="container mx-auto py-6 space-y-6">
+      <!-- Header -->
+      <div class="flex items-center justify-between">
+        <div>
+          <h1 class="text-3xl font-bold tracking-tight">
+            Custom Tokens
+          </h1>
+          <p class="text-muted-foreground">
+            Browse all registered tokens on Hive Token Machine
+          </p>
+        </div>
+      </div>
+
+      <!-- Loading Skeletons -->
+      <div
+        v-if="isLoading && tokensFullList.length === 0"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+      >
+        <Card
+          v-for="i in 9"
+          :key="i"
+        >
+          <CardHeader class="pb-3">
+            <div class="flex items-start gap-4">
+              <Skeleton class="h-12 w-12 rounded-full" />
+              <div class="flex-1 space-y-2">
+                <Skeleton class="h-5 w-3/4" />
+                <Skeleton class="h-4 w-1/2" />
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent class="space-y-3">
+            <Skeleton class="h-4 w-full" />
+            <Skeleton class="h-4 w-5/6" />
+            <div class="pt-3 space-y-2">
+              <Skeleton class="h-3 w-full" />
+              <Skeleton class="h-3 w-full" />
+              <Skeleton class="h-3 w-2/3" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Tokens Grid -->
+      <div
+        v-else-if="tokensFullList.length > 0"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+      >
+        <Card
+          v-for="token in tokensFullList"
+          :key="token.nai"
+          class="hover:shadow-lg transition-all cursor-pointer group"
+          @click="viewTokenDetails(token)"
+        >
+          <CardHeader class="pb-3">
+            <div class="flex items-start gap-4">
+              <!-- Token Avatar -->
+              <Avatar
+                size="sm"
+                shape="circle"
+              >
+                <AvatarImage
+                  v-if="token.image"
+                  :src="token.image"
+                  :alt="token.name || 'Token'"
+                />
+                <AvatarFallback>
+                  <svg
+                    v-if="!token.image"
+                    width="24"
+                    height="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="text-muted-foreground"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M11,7H13V17H11V7Z"
+                    />
+                  </svg>
+                  <span
+                    v-else
+                    class="text-sm font-semibold"
+                  >
+                    {{ getAvatarFallback(token) }}
+                  </span>
+                </AvatarFallback>
+              </Avatar>
+
+              <!-- Token Info -->
+              <div class="flex-1 min-w-0">
+                <CardTitle class="text-lg truncate flex items-center">
+                  <span>{{ token.name || 'Unnamed Token' }}</span>
+                  <span
+                    v-if="token.isStaked"
+                    class="ml-2 text-[11px]/[14px] inline-flex items-center rounded-md bg-green-500/10 px-1 font-medium text-green-500 border border-blue-500/20"
+                  >
+                    staked
+                  </span>
+                </CardTitle>
+                <CardDescription class="text-xs truncate">
+                  {{ token.nai }}
+                </CardDescription>
+              </div>
+
+              <!-- View Icon -->
+              <svg
+                width="20"
+                height="20"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0"
+              >
+                <path
+                  style="fill: currentColor"
+                  d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+                />
+              </svg>
+            </div>
+          </CardHeader>
+
+          <CardContent class="space-y-4">
+            <!-- Description -->
+            <p
+              v-if="token.description"
+              class="text-sm text-muted-foreground line-clamp-2 min-h-[2.5rem]"
+            >
+              {{ token.description }}
+            </p>
+            <p
+              v-else
+              class="text-sm text-muted-foreground italic min-h-[2.5rem]"
+            >
+              No description provided
+            </p>
+
+            <!-- Token Properties -->
+            <div class="space-y-2 text-sm">
+              <!-- Supply Info -->
+              <div class="flex items-center justify-between">
+                <span class="text-muted-foreground">Total Supply:</span>
+                <span class="font-semibold">
+                  {{ token.displayTotalSupply }}
+                </span>
+              </div>
+
+              <div class="flex items-center justify-between">
+                <span class="text-muted-foreground">Max Supply:</span>
+                <span class="font-semibold flex items-center gap-1">
+                  <template v-if="token.capped">
+                    {{ token.displayMaxSupply }}
+                  </template>
+                  <template v-else>
+                    <svg
+                      width="16"
+                      height="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        style="fill: currentColor"
+                        :d="mdiInfinity"
+                      />
+                    </svg>
+                    Unlimited
+                  </template>
+                </span>
+              </div>
+
+              <div class="flex items-center justify-between">
+                <span class="text-muted-foreground">Precision:</span>
+                <span class="font-semibold">{{ token.precision }}</span>
+              </div>
+            </div>
+
+            <!-- Token Badges -->
+            <div class="flex flex-wrap gap-2 pt-2">
+              <span
+                v-if="token.isNft"
+                class="inline-flex items-center rounded-md bg-purple-500/10 px-2 py-1 text-xs font-medium text-purple-500 border border-purple-500/20"
+              >
+                NFT
+              </span>
+              <span
+                v-if="token.othersCanStake"
+                class="inline-flex items-center rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-500 border border-green-500/20"
+              >
+                <svg
+                  width="12"
+                  height="12"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  class="mr-1"
+                >
+                  <path
+                    style="fill: currentColor"
+                    d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+                  />
+                </svg>
+                Stakeable
+              </span>
+              <span
+                v-if="token.othersCanUnstake"
+                class="inline-flex items-center rounded-md bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-500 border border-blue-500/20"
+              >
+                <svg
+                  width="12"
+                  height="12"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  class="mr-1"
+                >
+                  <path
+                    style="fill: currentColor"
+                    d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+                  />
+                </svg>
+                Unstakeable
+              </span>
+              <span
+                v-if="!token.capped"
+                class="inline-flex items-center rounded-md bg-orange-500/10 px-2 py-1 text-xs font-medium text-orange-500 border border-orange-500/20"
+              >
+                <svg
+                  class="mr-1"
+                  width="16"
+                  height="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    style="fill: currentColor"
+                    :d="mdiInfinity"
+                  />
+                </svg>
+                Uncapped
+              </span>
+            </div>
+
+            <!-- Owner -->
+            <div class="pt-2 border-t">
+              <div class="text-xs text-muted-foreground">
+                Owner:
+                <span class="font-mono text-foreground">
+                  {{ token.ownerPublicKey.slice(0, 8) }}...{{ token.ownerPublicKey.slice(-6) }}
+                </span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Load More Button -->
+      <div
+        v-if="tokensFullList.length > 0 && hasMorePages"
+        class="text-center pt-4"
+      >
+        <Button
+          variant="outline"
+          :disabled="isLoading"
+          @click="loadMore"
+        >
+          <svg
+            v-if="isLoading"
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mr-2 animate-spin"
+          >
+            <path
+              style="fill: currentColor"
+              d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+            />
+          </svg>
+          {{ isLoading ? 'Loading...' : 'Load More Tokens' }}
+        </Button>
+      </div>
+
+      <!-- Empty State -->
+      <Card v-else-if="tokensFullList.length === 0 && !isLoading">
+        <CardContent class="text-center py-12">
+          <svg
+            width="64"
+            height="64"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mx-auto text-muted-foreground mb-4"
+          >
+            <path
+              style="fill: currentColor"
+              d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M11,7H13V17H11V7Z"
+            />
+          </svg>
+          <h3 class="text-lg font-semibold mb-2">
+            No Tokens Found
+          </h3>
+          <p class="text-muted-foreground">
+            There are no registered tokens available at the moment.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  </HTMView>
+</template>
diff --git a/src/utils/router.ts b/src/utils/router.ts
index a486032..65545b8 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -6,7 +6,7 @@ import Index from '@/pages/index.vue';
 import SignMessage from '@/pages/sign/message.vue';
 import SignTransaction from '@/pages/sign/transaction.vue';
 import CreateToken from '@/pages/tokens/create.vue';
-import TokenHolders from '@/pages/tokens/holders.vue';
+import TokensList from '@/pages/tokens/list.vue';
 import AccountBalances from '@/pages/tokens/my-balance.vue';
 import TokenDefinitions from '@/pages/tokens/my-tokens.vue';
 import RegisterHTMAccount from '@/pages/tokens/register-account.vue';
@@ -22,6 +22,6 @@ export const routes = [
   { path: '/tokens/create', component: CreateToken },
   { path: '/tokens/my-tokens', component: TokenDefinitions },
   { path: '/tokens/my-balance', component: AccountBalances },
-  { path: '/tokens/holders', component: TokenHolders },
+  { path: '/tokens/list', component: TokensList },
   { path: '/automation/authorize', component: DappAuthorize }
 ];
-- 
GitLab


From 61ea64f1f70edae8f768a060a1d8cd3d41ff2ac0 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Fri, 10 Oct 2025 15:54:33 +0200
Subject: [PATCH 013/102] Allow to pass api endpoint and chain id in env file

---
 .env.example            | 2 ++
 src/stores/wax.store.ts | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index 78f9511..4c6dd00 100644
--- a/.env.example
+++ b/.env.example
@@ -9,6 +9,8 @@ VITE_SNAP_ORIGIN=
 # Example for remote server: https://api.example.com/ctokens-api
 # Leave empty to use default relative path /ctokens-api
 VITE_CTOKENS_API_URL=
+VITE_HIVE_NODE_ENDPOINT=
+VITE_HIVE_CHAIN_ID=
 
 # For development, you can set a mock server URL
 # VITE_CTOKENS_API_URL=http://localhost:8080/mock-ctokens-api
diff --git a/src/stores/wax.store.ts b/src/stores/wax.store.ts
index eae299d..0515620 100644
--- a/src/stores/wax.store.ts
+++ b/src/stores/wax.store.ts
@@ -142,7 +142,7 @@ let chain: TWaxRestExtended<typeof CTokensApi, TWaxExtended<WaxApi>>;
 
 export const getWax = async () => {
   if (!chain) {
-    chain = (await (await import('@hiveio/wax/vite')).createHiveChain()).extend<WaxApi>().extendRest(CTokensApi);
+    chain = (await (await import('@hiveio/wax/vite')).createHiveChain({ apiEndpoint: import.meta.env.VITE_HIVE_NODE_ENDPOINT, chainId: import.meta.env.VITE_HIVE_CHAIN_ID })).extend<WaxApi>().extendRest(CTokensApi);
 
     // These steps are repeated in the CtokensProvider constructor, but we need them here too as for now - maybe find a better way of handling this?
     chain.restApi.ctokensApi.endpointUrl = import.meta.env.VITE_CTOKENS_API_URL || DEFAULT_CTOKENS_API_URL;
-- 
GitLab


From fc94cd61435f296204ef1a33449990d603dddb67 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Fri, 10 Oct 2025 17:06:56 +0200
Subject: [PATCH 014/102] Implement all required HTM views

---
 src/components/HTMLoginContent.vue            | 138 ++++
 src/components/HTMLoginForm.vue               | 128 +--
 src/components/HTMTokenCard.vue               | 253 ++++++
 src/components/TokenCard.vue                  | 174 ----
 .../onboarding/wallets/htm/HTMConnect.vue     | 103 +--
 src/components/wallet/TokenBalanceHistory.vue | 268 ------
 src/pages/tokens/list.vue                     | 246 +-----
 src/pages/tokens/my-balance.vue               | 138 ++--
 src/pages/tokens/my-tokens.vue                | 404 ++++-----
 src/pages/tokens/register-account.vue         | 220 ++++-
 src/pages/tokens/token.vue                    | 782 ++++++++++++++++++
 src/stores/tokens.store.ts                    | 102 +--
 src/utils/ctokens-api.ts                      |  81 +-
 src/utils/nai-tokens.ts                       |  38 +-
 src/utils/router.ts                           |   2 +
 15 files changed, 1789 insertions(+), 1288 deletions(-)
 create mode 100644 src/components/HTMLoginContent.vue
 create mode 100644 src/components/HTMTokenCard.vue
 delete mode 100644 src/components/TokenCard.vue
 delete mode 100644 src/components/wallet/TokenBalanceHistory.vue
 create mode 100644 src/pages/tokens/token.vue

diff --git a/src/components/HTMLoginContent.vue b/src/components/HTMLoginContent.vue
new file mode 100644
index 0000000..afc80c2
--- /dev/null
+++ b/src/components/HTMLoginContent.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+interface Props {
+  showSteps?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  showSteps: true
+});
+
+const emit = defineEmits(['setaccount', 'close']);
+
+const isLoading = ref(false);
+
+const managementKey = ref('');
+const operationalKey = ref('');
+const password = ref('');
+const repeatPassword = ref('');
+
+const connect = async () => {
+  try {
+    if (password.value !== repeatPassword.value) {
+      toastError('Failed to connect to HTM', 'The provided passwords do not match');
+
+      return;
+    }
+
+    isLoading.value = true;
+
+    const { operational } = await CTokensProvider.createWallet(password.value, operationalKey.value, managementKey.value.length === 0 ? undefined : managementKey.value);
+
+    const wax = await getWax();
+
+    const users = await wax.restApi.ctokensApi.registeredUsers({ user: operational });
+    if (users.length === 0) {
+      toastError('Failed to connect to HTM', 'The provided operational key is not registered in HTM');
+
+      return;
+    }
+
+    await CTokensProvider.login(password.value);
+
+    emit('setaccount', operational);
+  } catch (error) {
+    toastError('Failed to connect to HTM', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="text-sm space-y-4">
+    <div class="space-y-4">
+      <p v-if="showSteps">
+        Step 1: Provide your login credentials:
+      </p>
+      <p
+        v-else
+        class="text-sm text-muted-foreground"
+      >
+        Create your HTM wallet by providing your keys and setting a password:
+      </p>
+
+      <div class="space-y-2">
+        <div class="space-y-1">
+          <Label for="operationalKey">Operational Private Key</Label>
+          <Input
+            id="operationalKey"
+            v-model="operationalKey"
+            type="text"
+            placeholder="Enter your operational key"
+          />
+        </div>
+        <div class="space-y-1">
+          <Label for="managementKey">Management Private Key (optional)</Label>
+          <Input
+            id="managementKey"
+            v-model="managementKey"
+            type="text"
+            placeholder="Enter your management key"
+          />
+        </div>
+        <div class="space-y-1">
+          <Label for="password">Password</Label>
+          <Input
+            id="password"
+            v-model="password"
+            type="password"
+            placeholder="Enter a password to encrypt the wallet"
+          />
+        </div>
+        <div class="space-y-1">
+          <Label for="repeatPassword">Repeat Password</Label>
+          <Input
+            id="repeatPassword"
+            v-model="repeatPassword"
+            type="password"
+            placeholder="Repeat the password"
+          />
+        </div>
+      </div>
+
+      <div v-if="showSteps">
+        <p>Step 2: Click this button to verify your configuration and connect to the wallet:</p>
+        <div class="flex justify-center">
+          <Button
+            :disabled="isLoading"
+            variant="outline"
+            size="lg"
+            class="px-8 py-4 border-[#FBA510] border-[2px]"
+            @click="connect"
+          >
+            <span class="text-md font-bold">Connect</span>
+          </Button>
+        </div>
+      </div>
+      <div v-else>
+        <Button
+          :disabled="isLoading || !operationalKey || !password || !repeatPassword"
+          class="w-full"
+          @click="connect"
+        >
+          <span v-if="isLoading">Creating Wallet...</span>
+          <span v-else>Create HTM Wallet</span>
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/HTMLoginForm.vue b/src/components/HTMLoginForm.vue
index c89cedf..53c1d23 100644
--- a/src/components/HTMLoginForm.vue
+++ b/src/components/HTMLoginForm.vue
@@ -3,6 +3,7 @@ import { mdiClose } from '@mdi/js';
 import { computed, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
+import HTMLoginContent from '@/components/HTMLoginContent.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -10,7 +11,6 @@ import { Label } from '@/components/ui/label';
 import { UsedWallet, getWalletIcon, useSettingsStore } from '@/stores/settings.store';
 import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
-import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
@@ -26,7 +26,7 @@ withDefaults(defineProps<Props>(), {
   description: 'Login to your Hive Token Machine account'
 });
 
-const emit = defineEmits(['success', 'close']);
+const emit = defineEmits(['success', 'close', 'setaccount']);
 
 const walletStore = useWalletStore();
 const userStore = useUserStore();
@@ -37,12 +37,6 @@ const isLoading = ref(false);
 // Existing account login
 const password = ref('');
 
-// New account creation
-const managementKey = ref('');
-const operationalKey = ref('');
-const newPassword = ref('');
-const repeatPassword = ref('');
-
 // Check if user already has HTM wallet configured (only needs password)
 const hasHTMWallet = computed(() => CTokensProvider.isLoggedIn());
 
@@ -50,75 +44,52 @@ const close = () => {
   emit('close');
 };
 
-// Login to existing HTM account
-const loginExisting = async () => {
+// Handle account creation from HTMLoginContent
+const handleSetAccount = async (account: string) => {
   try {
-    isLoading.value = true;
-
-    await CTokensProvider.login(password.value);
-
-    // Get operational key after successful login
-    const operationalKey = CTokensProvider.getOperationalPublicKey();
-    if (!operationalKey)
-      throw new Error('Failed to get operational key after login');
-
     // Set settings with the operational key as account and CTOKENS wallet
     await settingsStore.setSettings({
-      account: operationalKey,
+      account: account,
       wallet: UsedWallet.CTOKENS_IMPLEMENTATION
     });
 
     // Create wallet provider and parse user data
     await walletStore.createWalletFor(settingsStore.settings, 'posting');
-    await userStore.parseUserData(operationalKey);
+    await userStore.parseUserData(account);
 
-    toast.success('Logged in successfully!');
+    toast.success('HTM wallet created successfully!');
     emit('success');
+    emit('setaccount', account);
   } catch (error) {
-    toastError('Failed to connect to HTM', error);
-  } finally {
-    isLoading.value = false;
+    toastError('Failed to setup HTM wallet', error);
   }
 };
 
-// Create new HTM account
-const createNewAccount = async () => {
+// Login to existing HTM account
+const loginExisting = async () => {
   try {
-    if (newPassword.value !== repeatPassword.value) {
-      toastError('Failed to connect to HTM', 'The provided passwords do not match');
-      return;
-    }
-
     isLoading.value = true;
 
-    const { operational } = await CTokensProvider.createWallet(
-      newPassword.value,
-      operationalKey.value,
-      managementKey.value.length === 0 ? undefined : managementKey.value
-    );
-
-    const wax = await getWax();
-
-    const users = await wax.restApi.ctokensApi.registeredUsers({ user: operational });
-    if (users.length === 0) {
-      toastError('Failed to connect to HTM', 'The provided operational key is not registered in HTM');
-      return;
-    }
+    await CTokensProvider.login(password.value);
 
-    await CTokensProvider.login(newPassword.value);
+    // Get operational key after successful login
+    const operationalKey = CTokensProvider.getOperationalPublicKey();
+    if (!operationalKey)
+      throw new Error('Failed to get operational key after login');
 
     // Set settings with the operational key as account and CTOKENS wallet
     await settingsStore.setSettings({
-      account: operational,
+      account: operationalKey,
       wallet: UsedWallet.CTOKENS_IMPLEMENTATION
     });
 
     // Create wallet provider and parse user data
     await walletStore.createWalletFor(settingsStore.settings, 'posting');
-    await userStore.parseUserData(operational);
+    await userStore.parseUserData(operationalKey);
 
-    toast.success('HTM wallet created successfully!');
+    toast.success('Logged in successfully!');
     emit('success');
+    emit('setaccount', operationalKey);
   } catch (error) {
     toastError('Failed to connect to HTM', error);
   } finally {
@@ -200,61 +171,10 @@ const createNewAccount = async () => {
         v-else
         class="space-y-4"
       >
-        <div class="space-y-2">
-          <p class="text-sm text-muted-foreground">
-            Create your HTM wallet by providing your keys and setting a password:
-          </p>
-
-          <div class="space-y-1">
-            <Label for="operational-key">Operational Private Key</Label>
-            <Input
-              id="operational-key"
-              v-model="operationalKey"
-              type="text"
-              placeholder="Enter your operational key"
-            />
-          </div>
-
-          <div class="space-y-1">
-            <Label for="management-key">Management Private Key (optional)</Label>
-            <Input
-              id="management-key"
-              v-model="managementKey"
-              type="text"
-              placeholder="Enter your management key"
-            />
-          </div>
-
-          <div class="space-y-1">
-            <Label for="new-password">Wallet Password</Label>
-            <Input
-              id="new-password"
-              v-model="newPassword"
-              type="password"
-              placeholder="Create a password to encrypt your wallet"
-            />
-          </div>
-
-          <div class="space-y-1">
-            <Label for="repeat-password">Repeat Password</Label>
-            <Input
-              id="repeat-password"
-              v-model="repeatPassword"
-              type="password"
-              placeholder="Repeat the password"
-              @keyup.enter="createNewAccount"
-            />
-          </div>
-        </div>
-
-        <Button
-          :disabled="isLoading || !operationalKey || !newPassword || !repeatPassword"
-          class="w-full"
-          @click="createNewAccount"
-        >
-          <span v-if="isLoading">Creating Wallet...</span>
-          <span v-else>Create HTM Wallet</span>
-        </Button>
+        <HTMLoginContent
+          :show-steps="false"
+          @setaccount="handleSetAccount"
+        />
       </div>
     </CardContent>
   </Card>
diff --git a/src/components/HTMTokenCard.vue b/src/components/HTMTokenCard.vue
new file mode 100644
index 0000000..8b38c9c
--- /dev/null
+++ b/src/components/HTMTokenCard.vue
@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { mdiInfinity } from '@mdi/js';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+export interface CToken {
+  nai: string;
+  isStaked: boolean;
+  ownerPublicKey: string;
+  precision: number;
+  displayTotalSupply: string;
+  totalSupply: bigint;
+  maxSupply: bigint;
+  displayMaxSupply: string;
+  capped: boolean;
+  othersCanStake: boolean;
+  othersCanUnstake: boolean;
+  isNft: boolean;
+  metadata?: Record<string, unknown>;
+  // Parsed from the metadata
+  name?: string;
+  description?: string;
+  website?: string;
+  image?: string;
+}
+
+interface Props {
+  token: CToken;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  click: [token: CToken];
+}>();
+
+// Get avatar fallback text
+const getAvatarFallback = (token: CToken): string => {
+  if (token.name)
+    return token.name.slice(0, 2).toUpperCase();
+
+  return token.ownerPublicKey.slice(3, 5).toUpperCase();
+};
+
+// Handle card click
+const handleClick = () => {
+  emit('click', props.token);
+};
+</script>
+
+<template>
+  <Card
+    class="hover:shadow-lg transition-all cursor-pointer group"
+    @click="handleClick"
+  >
+    <CardHeader class="pb-3">
+      <div class="flex items-start gap-4">
+        <!-- Token Avatar -->
+        <Avatar
+          size="sm"
+          shape="circle"
+        >
+          <AvatarImage
+            v-if="token.image"
+            :src="token.image"
+            :alt="token.name || 'Token'"
+          />
+          <AvatarFallback>
+            <svg
+              v-if="!token.image"
+              width="24"
+              height="24"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="text-muted-foreground"
+            >
+              <path
+                style="fill: currentColor"
+                d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M11,7H13V17H11V7Z"
+              />
+            </svg>
+            <span
+              v-else
+              class="text-sm font-semibold"
+            >
+              {{ getAvatarFallback(token) }}
+            </span>
+          </AvatarFallback>
+        </Avatar>
+
+        <!-- Token Info -->
+        <div class="flex-1 min-w-0">
+          <CardTitle class="text-lg truncate flex items-center">
+            <span>{{ token.name || 'Unnamed Token' }}</span>
+            <span
+              v-if="token.isStaked"
+              class="ml-2 text-[11px]/[14px] inline-flex items-center rounded-md bg-green-500/10 px-1 font-medium text-green-500 border border-blue-500/20"
+            >
+              staked
+            </span>
+          </CardTitle>
+          <CardDescription class="text-xs truncate">
+            {{ token.nai }}
+          </CardDescription>
+        </div>
+
+        <!-- View Icon -->
+        <svg
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0"
+        >
+          <path
+            style="fill: currentColor"
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          />
+        </svg>
+      </div>
+    </CardHeader>
+
+    <CardContent class="space-y-4">
+      <!-- Description -->
+      <p
+        v-if="token.description"
+        class="text-sm text-muted-foreground line-clamp-2 min-h-[2.5rem]"
+      >
+        {{ token.description }}
+      </p>
+      <p
+        v-else
+        class="text-sm text-muted-foreground italic min-h-[2.5rem]"
+      >
+        No description provided
+      </p>
+
+      <!-- Token Properties -->
+      <div class="space-y-2 text-sm">
+        <!-- Supply Info -->
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">Total Supply:</span>
+          <span class="font-semibold">
+            {{ token.displayTotalSupply }}
+          </span>
+        </div>
+
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">Max Supply:</span>
+          <span class="font-semibold flex items-center gap-1">
+            <template v-if="token.capped">
+              {{ token.displayMaxSupply }}
+            </template>
+            <template v-else>
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="mdiInfinity"
+                />
+              </svg>
+              Unlimited
+            </template>
+          </span>
+        </div>
+
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">Precision:</span>
+          <span class="font-semibold">{{ token.precision }}</span>
+        </div>
+      </div>
+
+      <!-- Token Badges -->
+      <div class="flex flex-wrap gap-2 pt-2">
+        <span
+          v-if="token.isNft"
+          class="inline-flex items-center rounded-md bg-purple-500/10 px-2 py-1 text-xs font-medium text-purple-500 border border-purple-500/20"
+        >
+          NFT
+        </span>
+        <span
+          v-if="token.othersCanStake"
+          class="inline-flex items-center rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-500 border border-green-500/20"
+        >
+          <svg
+            width="12"
+            height="12"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mr-1"
+          >
+            <path
+              style="fill: currentColor"
+              d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+            />
+          </svg>
+          Stakeable
+        </span>
+        <span
+          v-if="token.othersCanUnstake"
+          class="inline-flex items-center rounded-md bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-500 border border-blue-500/20"
+        >
+          <svg
+            width="12"
+            height="12"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mr-1"
+          >
+            <path
+              style="fill: currentColor"
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          Unstakeable
+        </span>
+        <span
+          v-if="!token.capped"
+          class="inline-flex items-center rounded-md bg-orange-500/10 px-2 py-1 text-xs font-medium text-orange-500 border border-orange-500/20"
+        >
+          <svg
+            class="mr-1"
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiInfinity"
+            />
+          </svg>
+          Uncapped
+        </span>
+      </div>
+
+      <!-- Owner -->
+      <div class="pt-2 border-t">
+        <div class="text-xs text-muted-foreground">
+          Owner:
+          <span class="font-mono text-foreground">
+            {{ token.ownerPublicKey.slice(0, 8) }}...{{ token.ownerPublicKey.slice(-6) }}
+          </span>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/components/TokenCard.vue b/src/components/TokenCard.vue
deleted file mode 100644
index b9c3c3b..0000000
--- a/src/components/TokenCard.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<script setup lang="ts">
-import {
-  mdiContentCopy,
-  mdiEye,
-  mdiStar
-} from '@mdi/js';
-import { toast } from 'vue-sonner';
-
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { copyText } from '@/utils/copy';
-
-interface TokenDefinition {
-  nai: string;
-  name: string;
-  symbol: string;
-  description?: string;
-  can_stake: boolean;
-  initial_supply: string;
-  precision: number;
-  created_at: string;
-  active: boolean;
-}
-
-interface Props {
-  token: TokenDefinition;
-}
-
-defineProps<Props>();
-
-// Copy NAI to clipboard
-const copyNAI = async (nai: string) => {
-  try {
-    copyText(nai);
-    toast.success('NAI copied to clipboard');
-  } catch (_error) {
-    toast.error('Failed to copy NAI');
-  }
-};
-
-// Format date
-const formatDate = (dateString: string) => {
-  return new Date(dateString).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  });
-};
-
-// Format number with commas
-const formatNumber = (value: string) => {
-  const num = parseInt(value);
-  return isNaN(num) ? value : num.toLocaleString();
-};
-</script>
-
-<template>
-  <Card class="hover:shadow-md transition-shadow">
-    <CardHeader>
-      <div class="flex items-start justify-between">
-        <div class="space-y-1 flex-1">
-          <CardTitle class="text-lg">
-            {{ token.name }}
-          </CardTitle>
-          <CardDescription>
-            {{ token.symbol }}
-          </CardDescription>
-        </div>
-
-        <div class="flex items-center gap-2">
-          <span
-            v-if="token.can_stake"
-            class="inline-flex items-center rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground"
-          >
-            <svg
-              width="12"
-              height="12"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="mr-1"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiStar"
-              />
-            </svg>
-            Stakeable
-          </span>
-        </div>
-      </div>
-    </CardHeader>
-
-    <CardContent class="space-y-4">
-      <!-- Description -->
-      <p class="text-sm text-muted-foreground line-clamp-2">
-        {{ token.description || 'No description provided' }}
-      </p>
-
-      <!-- NAI -->
-      <div class="space-y-2">
-        <div class="flex items-center justify-between">
-          <span class="text-xs font-medium text-muted-foreground">NAI</span>
-          <Button
-            variant="ghost"
-            size="sm"
-            class="h-6 px-2"
-            @click="copyNAI(token.nai)"
-          >
-            <svg
-              width="12"
-              height="12"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiContentCopy"
-              />
-            </svg>
-          </Button>
-        </div>
-        <div class="font-mono text-sm bg-muted rounded px-2 py-1">
-          {{ token.nai }}
-        </div>
-      </div>
-
-      <!-- Token Details -->
-      <div class="grid grid-cols-2 gap-4 text-sm">
-        <div>
-          <span class="text-muted-foreground">Supply:</span>
-          <div class="font-medium">
-            {{ formatNumber(token.initial_supply) }}
-          </div>
-        </div>
-        <div>
-          <span class="text-muted-foreground">Precision:</span>
-          <div class="font-medium">
-            {{ token.precision }}
-          </div>
-        </div>
-      </div>
-
-      <!-- Created Date -->
-      <div class="text-xs text-muted-foreground">
-        Created {{ formatDate(token.created_at) }}
-      </div>
-
-      <!-- Actions -->
-      <div class="flex gap-2 pt-2">
-        <Button
-          variant="outline"
-          size="sm"
-          class="flex-1"
-        >
-          <svg
-            width="16"
-            height="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="mr-1"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiEye"
-            />
-          </svg>
-          View Details
-        </Button>
-      </div>
-    </CardContent>
-  </Card>
-</template>
diff --git a/src/components/onboarding/wallets/htm/HTMConnect.vue b/src/components/onboarding/wallets/htm/HTMConnect.vue
index 47349ce..a242aff 100644
--- a/src/components/onboarding/wallets/htm/HTMConnect.vue
+++ b/src/components/onboarding/wallets/htm/HTMConnect.vue
@@ -1,15 +1,10 @@
 <script setup lang="ts">
 import { mdiClose } from '@mdi/js';
-import { ref } from 'vue';
 
+import HTMLoginContent from '@/components/HTMLoginContent.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import { UsedWallet, getWalletIcon } from '@/stores/settings.store';
-import { getWax } from '@/stores/wax.store';
-import { toastError } from '@/utils/parse-error';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 const emit = defineEmits(['setaccount', 'close']);
 
@@ -17,42 +12,8 @@ const close = () => {
   emit('close');
 };
 
-const isLoading = ref(false);
-
-const managementKey = ref('');
-const operationalKey = ref('');
-const password = ref('');
-const repeatPassword = ref('');
-
-const connect = async () => {
-  try {
-    if (password.value !== repeatPassword.value) {
-      toastError('Failed to connect to HTM', 'The provided passwords do not match');
-
-      return;
-    }
-
-    isLoading.value = true;
-
-    const { operational } = await CTokensProvider.createWallet(password.value, operationalKey.value, managementKey.value.length === 0 ? undefined : managementKey.value);
-
-    const wax = await getWax();
-
-    const users = await wax.restApi.ctokensApi.registeredUsers({ user: operational });
-    if (users.length === 0) {
-      toastError('Failed to connect to HTM', 'The provided operational key is not registered in HTM');
-
-      return;
-    }
-
-    await CTokensProvider.login(password.value);
-
-    emit('setaccount', operational);
-  } catch (error) {
-    toastError('Failed to connect to HTM', error);
-  } finally {
-    isLoading.value = false;
-  }
+const handleSetAccount = (account: string) => {
+  emit('setaccount', account);
 };
 </script>
 
@@ -88,62 +49,8 @@ const connect = async () => {
       </CardTitle>
       <CardDescription>Follow these instructions to connect to Hive Token Machine</CardDescription>
     </CardHeader>
-    <CardContent class="text-sm space-y-4">
-      <div class="space-y-4">
-        <p>Step 1: Provide your login credentials:</p>
-
-        <div class="space-y-2">
-          <div class="space-y-1">
-            <Label for="operationalKey">Operational Private Key</Label>
-            <Input
-              id="operationalKey"
-              v-model="operationalKey"
-              type="text"
-              placeholder="Enter your operational key"
-            />
-          </div>
-          <div class="space-y-1">
-            <Label for="managementKey">Management Private Key (optional)</Label>
-            <Input
-              id="managementKey"
-              v-model="managementKey"
-              type="text"
-              placeholder="Enter your management key"
-            />
-          </div>
-          <div class="space-y-1">
-            <Label for="password">Password</Label>
-            <Input
-              id="password"
-              v-model="password"
-              type="password"
-              placeholder="Enter a password to encrypt the wallet"
-            />
-          </div>
-          <div class="space-y-1">
-            <Label for="repeatPassword">Repeat Password</Label>
-            <Input
-              id="repeatPassword"
-              v-model="repeatPassword"
-              type="password"
-              placeholder="Repeat the password"
-            />
-          </div>
-        </div>
-
-        <p>Step 2: Click this button to verify your configuration and connect to the wallet:</p>
-        <div class="flex justify-center">
-          <Button
-            :disabled="isLoading"
-            variant="outline"
-            size="lg"
-            class="px-8 py-4 border-[#FBA510] border-[2px]"
-            @click="connect"
-          >
-            <span class="text-md font-bold">Connect</span>
-          </Button>
-        </div>
-      </div>
+    <CardContent>
+      <HTMLoginContent @setaccount="handleSetAccount" />
     </CardContent>
     <CardFooter />
   </Card>
diff --git a/src/components/wallet/TokenBalanceHistory.vue b/src/components/wallet/TokenBalanceHistory.vue
deleted file mode 100644
index b812f9b..0000000
--- a/src/components/wallet/TokenBalanceHistory.vue
+++ /dev/null
@@ -1,268 +0,0 @@
-<script setup lang="ts">
-import {
-  mdiHistory,
-  mdiArrowUp,
-  mdiArrowDown,
-  mdiMinus
-} from '@mdi/js';
-import { computed, onMounted, ref } from 'vue';
-
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
-import { useTokensStore } from '@/stores/tokens.store';
-import { formatCTokenAmount, type CTokenBalanceHistory, type LegacyTokenBalance } from '@/utils/ctokens-api';
-import { toastError } from '@/utils/parse-error';
-
-interface Props {
-  token: LegacyTokenBalance;
-}
-
-const props = defineProps<Props>();
-const tokensStore = useTokensStore();
-
-// State
-const history = ref<CTokenBalanceHistory[]>([]);
-const isLoading = ref(false);
-const currentPage = ref(1);
-const hasMorePages = ref(true);
-
-// Computed
-const formattedHistory = computed(() => {
-  return history.value.map(entry => {
-    const balanceChange = parseFloat(entry.balance_change);
-    const isPositive = balanceChange > 0;
-    const isNegative = balanceChange < 0;
-
-    return {
-      ...entry,
-      formattedBalance: formatCTokenAmount(entry.balance, props.token.precision),
-      formattedPrevBalance: formatCTokenAmount(entry.prev_balance, props.token.precision),
-      formattedBalanceChange: formatCTokenAmount(Math.abs(balanceChange).toString(), props.token.precision),
-      changeDirection: isPositive ? 'increase' : isNegative ? 'decrease' : 'neutral',
-      changeIcon: isPositive ? mdiArrowUp : isNegative ? mdiArrowDown : mdiMinus,
-      changeColor: isPositive ? 'text-green-600' : isNegative ? 'text-red-600' : 'text-muted-foreground',
-      formattedDate: new Date(entry.timestamp).toLocaleDateString(),
-      formattedTime: new Date(entry.timestamp).toLocaleTimeString()
-    };
-  });
-});
-
-// Methods
-const loadHistory = async (page = 1) => {
-  try {
-    isLoading.value = true;
-
-    const newHistory = await tokensStore.getBalanceHistory(
-      props.token.nai,
-      props.token.precision,
-      page
-    );
-
-    if (page === 1)
-      history.value = newHistory;
-    else
-      history.value.push(...newHistory);
-
-    hasMorePages.value = newHistory.length === 100; // API returns 100 results per page
-    currentPage.value = page;
-  } catch (error) {
-    toastError('Failed to load balance history', error);
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-const loadMore = async () => {
-  if (!hasMorePages.value || isLoading.value) return;
-  await loadHistory(currentPage.value + 1);
-};
-
-const refresh = async () => {
-  currentPage.value = 1;
-  hasMorePages.value = true;
-  await loadHistory(1);
-};
-
-// Initialize
-onMounted(() => {
-  loadHistory();
-});
-</script>
-
-<template>
-  <Card>
-    <CardHeader>
-      <div class="flex items-center justify-between">
-        <div>
-          <CardTitle class="flex items-center gap-2">
-            <svg
-              width="20"
-              height="20"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiHistory"
-              />
-            </svg>
-            Balance History
-          </CardTitle>
-          <CardDescription>
-            Transaction history for {{ token.symbol }} ({{ token.nai }})
-          </CardDescription>
-        </div>
-        <Button
-          variant="outline"
-          size="sm"
-          :disabled="isLoading"
-          @click="refresh"
-        >
-          <svg
-            width="16"
-            height="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="mr-1"
-            :class="{ 'animate-spin': isLoading }"
-          >
-            <path
-              style="fill: currentColor"
-              d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z"
-            />
-          </svg>
-          Refresh
-        </Button>
-      </div>
-    </CardHeader>
-    <CardContent>
-      <!-- Loading State -->
-      <div
-        v-if="isLoading && history.length === 0"
-        class="space-y-3"
-      >
-        <div
-          v-for="i in 5"
-          :key="i"
-          class="flex items-center justify-between p-3 border rounded-lg"
-        >
-          <div class="space-y-2">
-            <Skeleton class="h-4 w-[120px]" />
-            <Skeleton class="h-3 w-[80px]" />
-          </div>
-          <div class="text-right space-y-2">
-            <Skeleton class="h-4 w-[100px]" />
-            <Skeleton class="h-3 w-[60px]" />
-          </div>
-        </div>
-      </div>
-
-      <!-- History Items -->
-      <div
-        v-else-if="formattedHistory.length > 0"
-        class="space-y-3"
-      >
-        <div
-          v-for="entry in formattedHistory"
-          :key="entry.history_seq_no"
-          class="flex items-center justify-between p-3 border rounded-lg hover:bg-muted/50 transition-colors"
-        >
-          <div class="flex items-center gap-3">
-            <div
-              class="p-2 rounded-full"
-              :class="entry.changeDirection === 'increase' ? 'bg-green-100 text-green-600' :
-                entry.changeDirection === 'decrease' ? 'bg-red-100 text-red-600' :
-                'bg-gray-100 text-gray-600'"
-            >
-              <svg
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  style="fill: currentColor"
-                  :d="entry.changeIcon"
-                />
-              </svg>
-            </div>
-            <div>
-              <div class="font-medium">
-                <span v-if="entry.changeDirection === 'increase'">Received</span>
-                <span v-else-if="entry.changeDirection === 'decrease'">Sent</span>
-                <span v-else>No Change</span>
-                <span
-                  class="ml-1"
-                  :class="entry.changeColor"
-                >
-                  {{ entry.formattedBalanceChange }} {{ token.symbol }}
-                </span>
-              </div>
-              <div class="text-sm text-muted-foreground">
-                {{ entry.formattedDate }} at {{ entry.formattedTime }}
-              </div>
-            </div>
-          </div>
-          <div class="text-right">
-            <div class="font-medium">
-              {{ entry.formattedBalance }} {{ token.symbol }}
-            </div>
-            <div class="text-sm text-muted-foreground">
-              Balance
-            </div>
-          </div>
-        </div>
-
-        <!-- Load More Button -->
-        <div
-          v-if="hasMorePages"
-          class="text-center pt-4"
-        >
-          <Button
-            variant="outline"
-            :disabled="isLoading"
-            @click="loadMore"
-          >
-            <svg
-              v-if="isLoading"
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="mr-2 animate-spin"
-            >
-              <path
-                style="fill: currentColor"
-                d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-              />
-            </svg>
-            {{ isLoading ? 'Loading...' : 'Load More' }}
-          </Button>
-        </div>
-      </div>
-
-      <!-- Empty State -->
-      <div
-        v-else
-        class="text-center py-8"
-      >
-        <svg
-          width="48"
-          height="48"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          class="mx-auto text-muted-foreground mb-3"
-        >
-          <path
-            style="fill: currentColor"
-            :d="mdiHistory"
-          />
-        </svg>
-        <p class="text-muted-foreground">
-          No transaction history found for this token.
-        </p>
-      </div>
-    </CardContent>
-  </Card>
-</template>
diff --git a/src/pages/tokens/list.vue b/src/pages/tokens/list.vue
index 98828d3..d3f2840 100644
--- a/src/pages/tokens/list.vue
+++ b/src/pages/tokens/list.vue
@@ -1,36 +1,18 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
+import HTMTokenCard, { type CToken } from '@/components/HTMTokenCard.vue';
 import HTMView from '@/components/HTMView.vue';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { toastError } from '@/utils/parse-error';
 import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
-import { mdiInfinity } from '@mdi/js';
 
-export interface CToken {
-  nai: string;
-  isStaked: boolean;
-  ownerPublicKey: string;
-  precision: number;
-  displayTotalSupply: string;
-  totalSupply: bigint;
-  maxSupply: bigint;
-  displayMaxSupply: string;
-  capped: boolean;
-  othersCanStake: boolean;
-  othersCanUnstake: boolean;
-  isNft: boolean;
-  metadata?: Record<string, unknown>;
-  // Parsed from the metadata
-  name?: string;
-  description?: string;
-  website?: string;
-  image?: string;
-}
+// Router
+const router = useRouter();
 
 // State
 const tokensFullList = ref<CToken[]>([]);
@@ -38,19 +20,9 @@ const isLoading = ref(false);
 const currentPage = ref(0);
 const hasMorePages = ref(true);
 
-// Get avatar fallback text
-const getAvatarFallback = (token: CToken): string => {
-  if (token.name) {
-    return token.name.slice(0, 2).toUpperCase();
-  }
-  return token.ownerPublicKey.slice(3, 5).toUpperCase();
-};
-
 // Navigate to token detail page (placeholder for now)
 const viewTokenDetails = (token: CToken) => {
-  // TODO: Navigate to token detail page when created
-  // router.push(`/tokens/${token.nai}`);
-  console.log('View token details:', token);
+  router.push(`/tokens/token?nai=${token.nai}&precision=${token.precision}`);
 };
 
 const loadTokens = async (page: number = 1) => {
@@ -162,208 +134,12 @@ onMounted(() => {
         v-else-if="tokensFullList.length > 0"
         class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
       >
-        <Card
+        <HTMTokenCard
           v-for="token in tokensFullList"
           :key="token.nai"
-          class="hover:shadow-lg transition-all cursor-pointer group"
-          @click="viewTokenDetails(token)"
-        >
-          <CardHeader class="pb-3">
-            <div class="flex items-start gap-4">
-              <!-- Token Avatar -->
-              <Avatar
-                size="sm"
-                shape="circle"
-              >
-                <AvatarImage
-                  v-if="token.image"
-                  :src="token.image"
-                  :alt="token.name || 'Token'"
-                />
-                <AvatarFallback>
-                  <svg
-                    v-if="!token.image"
-                    width="24"
-                    height="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    class="text-muted-foreground"
-                  >
-                    <path
-                      style="fill: currentColor"
-                      d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M11,7H13V17H11V7Z"
-                    />
-                  </svg>
-                  <span
-                    v-else
-                    class="text-sm font-semibold"
-                  >
-                    {{ getAvatarFallback(token) }}
-                  </span>
-                </AvatarFallback>
-              </Avatar>
-
-              <!-- Token Info -->
-              <div class="flex-1 min-w-0">
-                <CardTitle class="text-lg truncate flex items-center">
-                  <span>{{ token.name || 'Unnamed Token' }}</span>
-                  <span
-                    v-if="token.isStaked"
-                    class="ml-2 text-[11px]/[14px] inline-flex items-center rounded-md bg-green-500/10 px-1 font-medium text-green-500 border border-blue-500/20"
-                  >
-                    staked
-                  </span>
-                </CardTitle>
-                <CardDescription class="text-xs truncate">
-                  {{ token.nai }}
-                </CardDescription>
-              </div>
-
-              <!-- View Icon -->
-              <svg
-                width="20"
-                height="20"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0"
-              >
-                <path
-                  style="fill: currentColor"
-                  d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-                />
-              </svg>
-            </div>
-          </CardHeader>
-
-          <CardContent class="space-y-4">
-            <!-- Description -->
-            <p
-              v-if="token.description"
-              class="text-sm text-muted-foreground line-clamp-2 min-h-[2.5rem]"
-            >
-              {{ token.description }}
-            </p>
-            <p
-              v-else
-              class="text-sm text-muted-foreground italic min-h-[2.5rem]"
-            >
-              No description provided
-            </p>
-
-            <!-- Token Properties -->
-            <div class="space-y-2 text-sm">
-              <!-- Supply Info -->
-              <div class="flex items-center justify-between">
-                <span class="text-muted-foreground">Total Supply:</span>
-                <span class="font-semibold">
-                  {{ token.displayTotalSupply }}
-                </span>
-              </div>
-
-              <div class="flex items-center justify-between">
-                <span class="text-muted-foreground">Max Supply:</span>
-                <span class="font-semibold flex items-center gap-1">
-                  <template v-if="token.capped">
-                    {{ token.displayMaxSupply }}
-                  </template>
-                  <template v-else>
-                    <svg
-                      width="16"
-                      height="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        style="fill: currentColor"
-                        :d="mdiInfinity"
-                      />
-                    </svg>
-                    Unlimited
-                  </template>
-                </span>
-              </div>
-
-              <div class="flex items-center justify-between">
-                <span class="text-muted-foreground">Precision:</span>
-                <span class="font-semibold">{{ token.precision }}</span>
-              </div>
-            </div>
-
-            <!-- Token Badges -->
-            <div class="flex flex-wrap gap-2 pt-2">
-              <span
-                v-if="token.isNft"
-                class="inline-flex items-center rounded-md bg-purple-500/10 px-2 py-1 text-xs font-medium text-purple-500 border border-purple-500/20"
-              >
-                NFT
-              </span>
-              <span
-                v-if="token.othersCanStake"
-                class="inline-flex items-center rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-500 border border-green-500/20"
-              >
-                <svg
-                  width="12"
-                  height="12"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  class="mr-1"
-                >
-                  <path
-                    style="fill: currentColor"
-                    d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-                  />
-                </svg>
-                Stakeable
-              </span>
-              <span
-                v-if="token.othersCanUnstake"
-                class="inline-flex items-center rounded-md bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-500 border border-blue-500/20"
-              >
-                <svg
-                  width="12"
-                  height="12"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  class="mr-1"
-                >
-                  <path
-                    style="fill: currentColor"
-                    d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
-                  />
-                </svg>
-                Unstakeable
-              </span>
-              <span
-                v-if="!token.capped"
-                class="inline-flex items-center rounded-md bg-orange-500/10 px-2 py-1 text-xs font-medium text-orange-500 border border-orange-500/20"
-              >
-                <svg
-                  class="mr-1"
-                  width="16"
-                  height="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    style="fill: currentColor"
-                    :d="mdiInfinity"
-                  />
-                </svg>
-                Uncapped
-              </span>
-            </div>
-
-            <!-- Owner -->
-            <div class="pt-2 border-t">
-              <div class="text-xs text-muted-foreground">
-                Owner:
-                <span class="font-mono text-foreground">
-                  {{ token.ownerPublicKey.slice(0, 8) }}...{{ token.ownerPublicKey.slice(-6) }}
-                </span>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+          :token="token"
+          @click="viewTokenDetails"
+        />
       </div>
 
       <!-- Load More Button -->
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 34d76ff..2047d01 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -21,20 +21,10 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { useTokensStore } from '@/stores/tokens.store';
 import { transferNAIToken, stakeNAIToken } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
+import type { CtokensAppBalance } from '@/utils/wallet/ctokens/api';
 
 const tokensStore = useTokensStore();
 
-interface TokenBalance {
-  symbol: string;
-  name: string;
-  nai: string;
-  liquid_balance: string;
-  staked_balance: string;
-  total_balance: string;
-  precision: number;
-  logo_url?: string;
-}
-
 // State
 const isLoading = ref(false);
 const searchQuery = ref('');
@@ -43,25 +33,62 @@ const searchQuery = ref('');
 const isTransferDialogOpen = ref(false);
 const transferAmount = ref('');
 const transferRecipient = ref('');
-const selectedTokenForTransfer = ref<TokenBalance | null>(null);
+const selectedTokenForTransfer = ref<CtokensAppBalance | null>(null);
 const isTransferLoading = ref(false);
 
 // Transform dialog state
 const isTransformDialogOpen = ref(false);
 const transformAmount = ref('');
 const transformDirection = ref<'liquid-to-staked' | 'staked-to-liquid'>('liquid-to-staked');
-const selectedToken = ref<TokenBalance | null>(null);
+const selectedToken = ref<CtokensAppBalance | null>(null);
 const isTransformLoading = ref(false);
 
+// Helper functions for extracting data from metadata
+const getTokenSymbol = (balance: CtokensAppBalance): string => {
+  const metadata = balance.metadata as { symbol?: string; name?: string } | undefined;
+  return metadata?.symbol || balance.nai?.replace('@@', '') || 'Unknown';
+};
+
+const getTokenName = (balance: CtokensAppBalance): string => {
+  const metadata = balance.metadata as { name?: string; display_name?: string } | undefined;
+  return metadata?.display_name || metadata?.name || getTokenSymbol(balance);
+};
+
+const getTokenLogoUrl = (balance: CtokensAppBalance): string | undefined => {
+  const metadata = balance.metadata as { logo_url?: string; image?: string } | undefined;
+  return metadata?.logo_url || metadata?.image;
+};
+
+// For now, since the API doesn't distinguish between liquid and staked,
+// we'll treat all balance as liquid (this may need to be updated based on actual API behavior)
+const getLiquidBalance = (balance: CtokensAppBalance): string => {
+  return balance.amount || '0';
+};
+
+const getStakedBalance = (_balance: CtokensAppBalance): string => {
+  // TODO: Update this when staked balance info is available from API
+  return '0';
+};
+
+const getTotalBalance = (balance: CtokensAppBalance): string => {
+  const liquid = parseFloat(getLiquidBalance(balance));
+  const staked = parseFloat(getStakedBalance(balance));
+  return (liquid + staked).toString();
+};
+
 // Computed
 const filteredBalances = computed(() => {
   if (!searchQuery.value) return tokensStore.balances;
 
-  return tokensStore.balances.filter(balance =>
-    balance.symbol.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
-    balance.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
-    balance.nai.includes(searchQuery.value)
-  );
+  return tokensStore.balances.filter(balance => {
+    const symbol = getTokenSymbol(balance);
+    const name = getTokenName(balance);
+    const nai = balance.nai || '';
+
+    return symbol.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      nai.includes(searchQuery.value);
+  });
 });
 
 const totalValue = computed(() => {
@@ -81,7 +108,7 @@ const loadAccountBalances = async () => {
   }
 };
 
-const openTransferDialog = (balance: TokenBalance) => {
+const openTransferDialog = (balance: CtokensAppBalance) => {
   selectedTokenForTransfer.value = balance;
   transferAmount.value = '';
   transferRecipient.value = '';
@@ -100,10 +127,11 @@ const transferTokens = async () => {
     await transferNAIToken({
       to: transferRecipient.value,
       amount: transferAmount.value,
-      symbol: selectedTokenForTransfer.value.symbol
+      symbol: getTokenSymbol(selectedTokenForTransfer.value)
     });
 
-    toast.success(`Successfully transferred ${transferAmount.value} ${selectedTokenForTransfer.value.symbol} to ${transferRecipient.value}`);
+    const symbol = getTokenSymbol(selectedTokenForTransfer.value);
+    toast.success(`Successfully transferred ${transferAmount.value} ${symbol} to ${transferRecipient.value}`);
 
     // Refresh balances
     await loadAccountBalances();
@@ -116,7 +144,7 @@ const transferTokens = async () => {
   }
 };
 
-const openTransformDialog = (balance: TokenBalance, direction: 'liquid-to-staked' | 'staked-to-liquid') => {
+const openTransformDialog = (balance: CtokensAppBalance, direction: 'liquid-to-staked' | 'staked-to-liquid') => {
   selectedToken.value = balance;
   transformDirection.value = direction;
   transformAmount.value = '';
@@ -134,12 +162,13 @@ const transformTokens = async () => {
 
     await stakeNAIToken({
       amount: transformAmount.value,
-      symbol: selectedToken.value.symbol,
+      symbol: getTokenSymbol(selectedToken.value),
       direction: transformDirection.value === 'liquid-to-staked' ? 'stake' : 'unstake'
     });
 
     const action = transformDirection.value === 'liquid-to-staked' ? 'staked' : 'unstaked';
-    toast.success(`Successfully ${action} ${transformAmount.value} ${selectedToken.value.symbol}`);
+    const symbol = getTokenSymbol(selectedToken.value);
+    toast.success(`Successfully ${action} ${transformAmount.value} ${symbol}`);
 
     // Refresh balances
     await loadAccountBalances();
@@ -151,14 +180,15 @@ const transformTokens = async () => {
     isTransformLoading.value = false;
   }
 };
-const getMaxTransferAmount = (balance: TokenBalance) => {
-  return parseFloat(balance.liquid_balance);
+
+const getMaxTransferAmount = (balance: CtokensAppBalance) => {
+  return parseFloat(getLiquidBalance(balance));
 };
 
-const getMaxTransformAmount = (balance: TokenBalance, direction: 'liquid-to-staked' | 'staked-to-liquid') => {
+const getMaxTransformAmount = (balance: CtokensAppBalance, direction: 'liquid-to-staked' | 'staked-to-liquid') => {
   return direction === 'liquid-to-staked'
-    ? parseFloat(balance.liquid_balance)
-    : parseFloat(balance.staked_balance);
+    ? parseFloat(getLiquidBalance(balance))
+    : parseFloat(getStakedBalance(balance));
 };
 
 // Initialize
@@ -282,7 +312,7 @@ onMounted(() => {
           </CardHeader>
           <CardContent>
             <div class="text-2xl font-bold">
-              {{ tokensStore.balances.reduce((sum, b) => sum + parseFloat(b.liquid_balance), 0).toFixed(3) }}
+              {{ tokensStore.balances.reduce((sum, b) => sum + parseFloat(getLiquidBalance(b)), 0).toFixed(3) }}
             </div>
             <p class="text-xs text-muted-foreground">
               Available for transfer
@@ -310,7 +340,7 @@ onMounted(() => {
           </CardHeader>
           <CardContent>
             <div class="text-2xl font-bold">
-              {{ tokensStore.balances.reduce((sum, b) => sum + parseFloat(b.staked_balance), 0).toFixed(3) }}
+              {{ tokensStore.balances.reduce((sum, b) => sum + parseFloat(getStakedBalance(b)), 0).toFixed(3) }}
             </div>
             <p class="text-xs text-muted-foreground">
               Earning rewards
@@ -409,24 +439,24 @@ onMounted(() => {
                       <div class="flex items-center gap-3">
                         <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
                           <img
-                            v-if="balance.logo_url"
-                            :src="balance.logo_url"
-                            :alt="balance.symbol"
+                            v-if="getTokenLogoUrl(balance)"
+                            :src="getTokenLogoUrl(balance)"
+                            :alt="getTokenSymbol(balance)"
                             class="h-6 w-6 rounded-full"
                           >
                           <span
                             v-else
                             class="text-sm font-medium text-primary"
                           >
-                            {{ balance.symbol.charAt(0) }}
+                            {{ getTokenSymbol(balance).charAt(0) }}
                           </span>
                         </div>
                         <div>
                           <div class="font-semibold">
-                            {{ balance.symbol }}
+                            {{ getTokenSymbol(balance) }}
                           </div>
                           <div class="text-sm text-muted-foreground">
-                            {{ balance.name }}
+                            {{ getTokenName(balance) }}
                           </div>
                           <div class="text-xs text-muted-foreground font-mono">
                             {{ balance.nai }}
@@ -448,30 +478,30 @@ onMounted(() => {
                     <!-- Liquid Balance -->
                     <td class="p-4 text-right">
                       <div class="font-medium">
-                        {{ balance.liquid_balance }}
+                        {{ getLiquidBalance(balance) }}
                       </div>
                       <div class="text-sm text-muted-foreground">
-                        ${{ (parseFloat(balance.liquid_balance) * 0.01).toFixed(2) }}
+                        ${{ (parseFloat(getLiquidBalance(balance)) * 0.01).toFixed(2) }}
                       </div>
                     </td>
 
                     <!-- Staked Balance -->
                     <td class="p-4 text-right">
                       <div class="font-medium">
-                        {{ balance.staked_balance }}
+                        {{ getStakedBalance(balance) }}
                       </div>
                       <div class="text-sm text-muted-foreground">
-                        ${{ (parseFloat(balance.staked_balance) * 0.01).toFixed(2) }}
+                        ${{ (parseFloat(getStakedBalance(balance)) * 0.01).toFixed(2) }}
                       </div>
                     </td>
 
                     <!-- Total Balance -->
                     <td class="p-4 text-right">
                       <div class="font-medium">
-                        {{ balance.total_balance }}
+                        {{ getTotalBalance(balance) }}
                       </div>
                       <div class="text-sm text-muted-foreground">
-                        ${{ (parseFloat(balance.total_balance) * 0.01).toFixed(2) }}
+                        ${{ (parseFloat(getTotalBalance(balance)) * 0.01).toFixed(2) }}
                       </div>
                     </td>
 
@@ -481,7 +511,7 @@ onMounted(() => {
                         <Button
                           variant="ghost"
                           size="sm"
-                          :disabled="parseFloat(balance.liquid_balance) === 0"
+                          :disabled="parseFloat(getLiquidBalance(balance)) === 0"
                           title="Transfer tokens"
                           @click="openTransferDialog(balance)"
                         >
@@ -501,7 +531,7 @@ onMounted(() => {
                         <Button
                           variant="ghost"
                           size="sm"
-                          :disabled="parseFloat(balance.liquid_balance) === 0"
+                          :disabled="parseFloat(getLiquidBalance(balance)) === 0"
                           title="Stake tokens"
                           @click="openTransformDialog(balance, 'liquid-to-staked')"
                         >
@@ -521,7 +551,7 @@ onMounted(() => {
                         <Button
                           variant="ghost"
                           size="sm"
-                          :disabled="parseFloat(balance.staked_balance) === 0"
+                          :disabled="parseFloat(getStakedBalance(balance)) === 0"
                           title="Unstake tokens"
                           @click="openTransformDialog(balance, 'staked-to-liquid')"
                         >
@@ -594,9 +624,9 @@ onMounted(() => {
       <Dialog v-model:open="isTransferDialogOpen">
         <DialogContent class="sm:max-w-[425px]">
           <DialogHeader>
-            <DialogTitle>Transfer {{ selectedTokenForTransfer?.symbol }}</DialogTitle>
+            <DialogTitle>Transfer {{ selectedTokenForTransfer ? getTokenSymbol(selectedTokenForTransfer) : '' }}</DialogTitle>
             <DialogDescription>
-              Send tokens to another account. Available balance: {{ selectedTokenForTransfer?.liquid_balance }} {{ selectedTokenForTransfer?.symbol }}
+              Send tokens to another account. Available balance: {{ selectedTokenForTransfer ? getLiquidBalance(selectedTokenForTransfer) : '0' }} {{ selectedTokenForTransfer ? getTokenSymbol(selectedTokenForTransfer) : '' }}
             </DialogDescription>
           </DialogHeader>
 
@@ -623,7 +653,7 @@ onMounted(() => {
                 />
                 <Button
                   variant="outline"
-                  @click="transferAmount = selectedTokenForTransfer?.liquid_balance || ''"
+                  @click="transferAmount = selectedTokenForTransfer ? getLiquidBalance(selectedTokenForTransfer) : ''"
                 >
                   Max
                 </Button>
@@ -679,12 +709,12 @@ onMounted(() => {
         <DialogContent class="sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>
-              {{ transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake' }} {{ selectedToken?.symbol }}
+              {{ transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake' }} {{ selectedToken ? getTokenSymbol(selectedToken) : '' }}
             </DialogTitle>
             <DialogDescription>
               {{ transformDirection === 'liquid-to-staked'
-                ? `Stake tokens to earn rewards. Available: ${selectedToken?.liquid_balance} ${selectedToken?.symbol}`
-                : `Unstake tokens to make them liquid. Available: ${selectedToken?.staked_balance} ${selectedToken?.symbol}`
+                ? `Stake tokens to earn rewards. Available: ${selectedToken ? getLiquidBalance(selectedToken) : '0'} ${selectedToken ? getTokenSymbol(selectedToken) : ''}`
+                : `Unstake tokens to make them liquid. Available: ${selectedToken ? getStakedBalance(selectedToken) : '0'} ${selectedToken ? getTokenSymbol(selectedToken) : ''}`
               }}
             </DialogDescription>
           </DialogHeader>
@@ -704,8 +734,8 @@ onMounted(() => {
                 <Button
                   variant="outline"
                   @click="transformAmount = (transformDirection === 'liquid-to-staked'
-                    ? selectedToken?.liquid_balance
-                    : selectedToken?.staked_balance) || ''"
+                    ? (selectedToken ? getLiquidBalance(selectedToken) : '')
+                    : (selectedToken ? getStakedBalance(selectedToken) : '')) || ''"
                 >
                   Max
                 </Button>
diff --git a/src/pages/tokens/my-tokens.vue b/src/pages/tokens/my-tokens.vue
index e26ad86..1b9437b 100644
--- a/src/pages/tokens/my-tokens.vue
+++ b/src/pages/tokens/my-tokens.vue
@@ -7,159 +7,265 @@ import {
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import HTMTokenCard, { type CToken } from '@/components/HTMTokenCard.vue';
 import HTMView from '@/components/HTMView.vue';
-import TokenCard from '@/components/TokenCard.vue';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useTokensStore } from '@/stores/tokens.store';
+import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
+import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 const router = useRouter();
 const settingsStore = useSettingsStore();
-const tokensStore = useTokensStore();
 
 // State
-const isLoading = ref(true);
-const searchQuery = ref('');
+const tokensFullList = ref<CToken[]>([]);
+const isLoading = ref(false);
+const currentPage = ref(0);
+const hasMorePages = ref(true);
 
-// Computed
-const filteredTokens = computed(() => {
-  if (!searchQuery.value.trim()) return tokensStore.tokenDefinitions;
+// Get user's public key for filtering
+const getUserPublicKey = async (): Promise<string | undefined> => {
+  try {
+    // First try to get from CTokens provider if logged in
+    if (CTokensProvider.isLoggedIn())
+      return CTokensProvider.getOperationalPublicKey();
 
-  const query = searchQuery.value.toLowerCase();
-  return tokensStore.tokenDefinitions.filter(token =>
-    token.name.toLowerCase().includes(query) ||
-    token.symbol.toLowerCase().includes(query) ||
-    token.nai.toLowerCase().includes(query)
-  );
-});
+    // If no CTokens wallet, get from account data
+    if (settingsStore.account) {
+      const wax = await getWax();
+      const response = await wax.api.database_api.find_accounts({
+        accounts: [settingsStore.account],
+        delayed_votes_active: true
+      });
+      if (response.accounts.length > 0)
+        return response.accounts[0].posting.key_auths[0][0]; // Get the first posting key
+    }
+
+    return undefined;
+  } catch (error) {
+    console.error('Failed to get user public key:', error);
+    return undefined;
+  }
+};
 
-// Load token definitions
-const loadTokenDefinitions = async () => {
-  isLoading.value = true;
+// Navigate to token detail page
+const viewTokenDetails = (token: CToken) => {
+  router.push(`/tokens/token?nai=${token.nai}&precision=${token.precision}`);
+};
 
+// Load tokens filtered by user's public key
+const loadTokens = async (page: number = 1) => {
   try {
-    await tokensStore.loadTokenDefinitions(settingsStore.settings.account, true);
+    isLoading.value = true;
+
+    const userPublicKey = await getUserPublicKey();
+    if (!userPublicKey) {
+      toastError('Unable to determine your public key', 'Please make sure you are connected to a wallet');
+      return;
+    }
+
+    const wax = await getWax();
+    const formatAsset = (value: string | bigint, precision: number, name?: string): string => {
+      const formatted = wax.formatter.formatNumber(value, precision);
+      return name ? `${formatted} ${name}` : formatted;
+    };
+
+    // Temporary naive implementation of vesting space check
+    const isVesting = (nai: string, precision: number) => (((Number(nai.slice(2, -1)) << 5) | 0x10 | precision) & 0x20) != 0;
+
+    const tokens = await wax.restApi.ctokensApi.registeredTokens({}) as Required<CtokensAppToken>[];
+
+    // Filter tokens by user's public key
+    const userTokens = tokens.filter(token => token.owner === userPublicKey);
+
+    if (page === 1)
+      tokensFullList.value = [];
+
+    tokensFullList.value.push(...userTokens.map(token => {
+      const { name, description, website, image } = (token.metadata || {}) as Record<string, string>;
+
+      return {
+        nai: token.nai,
+        isStaked: isVesting(token.nai, token.precision),
+        displayMaxSupply: formatAsset(token.max_supply, token.precision, name),
+        ownerPublicKey: token.owner,
+        precision: token.precision,
+        displayTotalSupply: formatAsset(token.total_supply, token.precision, name),
+        totalSupply: BigInt(token.total_supply),
+        maxSupply: BigInt(token.max_supply),
+        capped: token.capped,
+        othersCanStake: token.others_can_stake,
+        othersCanUnstake: token.others_can_unstake,
+        isNft: token.is_nft,
+        metadata: token.metadata,
+        name,
+        description,
+        website,
+        image
+      } as CToken;
+    }));
+
+    hasMorePages.value = userTokens.length === 100; // API returns 100 results per page
+    currentPage.value = page;
   } catch (error) {
-    toastError('Failed to load token definitions', error);
+    toastError('Failed to load tokens', error);
   } finally {
     isLoading.value = false;
   }
 };
 
+const loadMore = () => {
+  if (!hasMorePages.value || isLoading.value) return;
+  void loadTokens(currentPage.value + 1);
+};
+
+// Computed
+const filteredTokens = computed(() => {
+  return tokensFullList.value; // No additional filtering needed since we already filter by owner
+});
+
 // Navigate to create token page
 const createNewToken = () => {
-  router.push('/finances/create-token');
+  router.push('/tokens/create');
 };
 
 // Lifecycle
 onMounted(() => {
-  loadTokenDefinitions();
+  loadMore();
 });
 </script>
 
 <template>
   <HTMView>
-    <div class="container mx-auto p-6 max-w-6xl">
-      <div class="space-y-6">
-        <!-- Header -->
-        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-          <div>
-            <h1 class="text-3xl font-bold tracking-tight">
-              My Token Definitions
-            </h1>
-            <p class="text-muted-foreground">
-              Manage and view your custom tokens on Hive Token Machine
-            </p>
-          </div>
+    <div class="container mx-auto py-6 space-y-6">
+      <!-- Header -->
+      <div class="flex items-center justify-between">
+        <div>
+          <h1 class="text-3xl font-bold tracking-tight">
+            My Custom Tokens
+          </h1>
+          <p class="text-muted-foreground">
+            View your custom tokens on Hive Token Machine
+          </p>
+        </div>
 
-          <div class="flex gap-2">
-            <Button
-              variant="outline"
-              :disabled="isLoading"
-              @click="loadTokenDefinitions"
+        <div class="flex gap-2">
+          <Button
+            variant="outline"
+            :disabled="isLoading"
+            @click="loadMore"
+          >
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              :class="{ 'animate-spin': isLoading }"
+              class="mr-2"
             >
-              <svg
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                :class="{ 'animate-spin': isLoading }"
-                class="mr-2"
-              >
-                <path
-                  style="fill: currentColor"
-                  :d="mdiRefresh"
-                />
-              </svg>
-              Refresh
-            </Button>
-
-            <Button @click="createNewToken">
-              <svg
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="mr-2"
-              >
-                <path
-                  style="fill: currentColor"
-                  :d="mdiPlus"
-                />
-              </svg>
-              Create Token
-            </Button>
-          </div>
-        </div>
+              <path
+                style="fill: currentColor"
+                :d="mdiRefresh"
+              />
+            </svg>
+            Refresh
+          </Button>
 
-        <!-- Search -->
-        <div class="max-w-md">
-          <Input
-            v-model="searchQuery"
-            placeholder="Search tokens by name, symbol, or NAI..."
-            class="w-full"
-          />
+          <Button @click="createNewToken">
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-2"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiPlus"
+              />
+            </svg>
+            Create Token
+          </Button>
         </div>
+      </div>
 
-        <!-- Loading State -->
-        <div
-          v-if="isLoading"
-          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+      <!-- Loading Skeletons -->
+      <div
+        v-if="isLoading && tokensFullList.length === 0"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+      >
+        <Card
+          v-for="i in 9"
+          :key="i"
         >
-          <Card
-            v-for="i in 3"
-            :key="i"
-          >
-            <CardHeader>
-              <div class="flex items-center justify-between">
-                <div class="space-y-2 flex-1">
-                  <Skeleton class="h-4 w-[200px]" />
-                  <Skeleton class="h-3 w-[100px]" />
-                </div>
-                <Skeleton class="h-6 w-[80px]" />
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div class="space-y-3">
-                <Skeleton class="h-3 w-full" />
-                <Skeleton class="h-3 w-2/3" />
-                <div class="flex justify-between">
-                  <Skeleton class="h-3 w-[80px]" />
-                  <Skeleton class="h-3 w-[60px]" />
-                </div>
+          <CardHeader class="pb-3">
+            <div class="flex items-start gap-4">
+              <Skeleton class="h-12 w-12 rounded-full" />
+              <div class="flex-1 space-y-2">
+                <Skeleton class="h-5 w-3/4" />
+                <Skeleton class="h-4 w-1/2" />
               </div>
-            </CardContent>
-          </Card>
-        </div>
+            </div>
+          </CardHeader>
+          <CardContent class="space-y-3">
+            <Skeleton class="h-4 w-full" />
+            <Skeleton class="h-4 w-5/6" />
+            <div class="pt-3 space-y-2">
+              <Skeleton class="h-3 w-full" />
+              <Skeleton class="h-3 w-full" />
+              <Skeleton class="h-3 w-2/3" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Tokens Grid -->
+      <div
+        v-else-if="tokensFullList.length > 0"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+      >
+        <HTMTokenCard
+          v-for="token in filteredTokens"
+          :key="token.nai"
+          :token="token"
+          @click="viewTokenDetails"
+        />
+      </div>
 
-        <div
-          v-else-if="tokensStore.tokenDefinitions.length === 0"
-          class="text-center py-12"
+      <!-- Load More Button -->
+      <div
+        v-if="tokensFullList.length > 0 && hasMorePages"
+        class="text-center pt-4"
+      >
+        <Button
+          variant="outline"
+          :disabled="isLoading"
+          @click="loadMore"
         >
+          <svg
+            v-if="isLoading"
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mr-2 animate-spin"
+          >
+            <path
+              style="fill: currentColor"
+              d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+            />
+          </svg>
+          {{ isLoading ? 'Loading...' : 'Load More Tokens' }}
+        </Button>
+      </div>
+
+      <!-- Empty State -->
+      <Card v-else-if="tokensFullList.length === 0 && !isLoading">
+        <CardContent class="text-center py-12">
           <svg
             width="64"
             height="64"
@@ -193,78 +299,8 @@ onMounted(() => {
             </svg>
             Create Your First Token
           </Button>
-        </div>
-
-        <!-- No Search Results -->
-        <div
-          v-else-if="filteredTokens.length === 0"
-          class="text-center py-12"
-        >
-          <h3 class="text-lg font-semibold mb-2">
-            No tokens found
-          </h3>
-          <p class="text-muted-foreground">
-            Try adjusting your search criteria
-          </p>
-        </div>
-
-        <!-- Token Grid -->
-        <div
-          v-else
-          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
-        >
-          <TokenCard
-            v-for="token in filteredTokens"
-            :key="token.nai"
-            :token="token"
-          />
-        </div>
-
-        <!-- Summary Stats -->
-        <div
-          v-if="tokensStore.tokenDefinitions.length > 0"
-          class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-6 border-t"
-        >
-          <Card>
-            <CardContent class="pt-6">
-              <div class="text-center">
-                <div class="text-2xl font-bold">
-                  {{ tokensStore.tokenDefinitions.length }}
-                </div>
-                <div class="text-sm text-muted-foreground">
-                  Total Tokens
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent class="pt-6">
-              <div class="text-center">
-                <div class="text-2xl font-bold text-green-600">
-                  {{ tokensStore.tokenDefinitions.filter(t => t.active).length }}
-                </div>
-                <div class="text-sm text-muted-foreground">
-                  Active Tokens
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent class="pt-6">
-              <div class="text-center">
-                <div class="text-2xl font-bold text-blue-600">
-                  {{ tokensStore.tokenDefinitions.filter(t => t.can_stake).length }}
-                </div>
-                <div class="text-sm text-muted-foreground">
-                  Stakeable Tokens
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
+        </CardContent>
+      </Card>
     </div>
   </HTMView>
 </template>
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index 9b777f8..3ffef4c 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -1,20 +1,53 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import HTMLoginForm from '@/components/HTMLoginForm.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { toastError } from '@/utils/parse-error';
 
 const router = useRouter();
 const showLoginForm = ref(false);
+const showRegistrationForm = ref(false);
+const isLoading = ref(false);
+
+// Registration form data - following the same structure as userStore posting JSON metadata
+const registrationData = ref({
+  name: '',           // Account display name
+  about: '',          // Description/bio
+  website: '',        // Website URL
+  profile_image: ''   // Profile image URL (for now, will be replaced with image hoster in future)
+});
+
+// Form validation
+const isFormValid = computed(() => {
+  return registrationData.value.name.trim().length > 0 &&
+         registrationData.value.about.trim().length > 0;
+});
 
 // Show HTM login form
 const showHTMLogin = () => {
   showLoginForm.value = true;
 };
 
+// Go back to main options
+const goBack = () => {
+  showLoginForm.value = false;
+  showRegistrationForm.value = false;
+  // Reset form data
+  registrationData.value = {
+    name: '',
+    about: '',
+    website: '',
+    profile_image: ''
+  };
+};
+
 // Handle successful login
 const onLoginSuccess = () => {
   showLoginForm.value = false;
@@ -22,13 +55,68 @@ const onLoginSuccess = () => {
   router.push('/tokens/my-balance');
 };
 
-// TODO: Implement actual HTM account registration
-const registerHTMAccount = () => {
-  // This will be implemented later - it's a more complex process
-  // For now, show a placeholder message
-  toast.info('HTM Account registration will be implemented soon!', {
-    description: 'This feature is coming in a future update.'
-  });
+// Validate URL format
+const isValidUrl = (url: string): boolean => {
+  if (!url) return true; // Empty URL is valid (optional field)
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+// Handle HTM account registration
+const registerHTMAccount = async () => {
+  try {
+    isLoading.value = true;
+
+    // Validate form data
+    if (!isFormValid.value) {
+      toast.error('Please fill in all required fields');
+      return;
+    }
+
+    // Validate website URL if provided
+    if (registrationData.value.website && !isValidUrl(registrationData.value.website)) {
+      toast.error('Please enter a valid website URL');
+      return;
+    }
+
+    // Validate profile image URL if provided
+    if (registrationData.value.profile_image && !isValidUrl(registrationData.value.profile_image)) {
+      toast.error('Please enter a valid profile image URL');
+      return;
+    }
+
+    // Prepare metadata following the same structure as userStore posting JSON metadata
+    const metadata = {
+      profile: {
+        name: registrationData.value.name.trim(),
+        about: registrationData.value.about.trim(),
+        website: registrationData.value.website.trim() || undefined,
+        profile_image: registrationData.value.profile_image.trim() || undefined
+      }
+    };
+
+    console.log('HTM Registration Data:', metadata);
+
+    // TODO: Implement actual HTM account registration API call
+    // This will need to integrate with the CTokens system
+    // For now, show a detailed message about what would be registered
+    toast.info('HTM Account registration prepared!', {
+      description: `Registration data prepared for: ${metadata.profile.name}. API integration coming soon.`
+    });
+
+    // After successful registration, could redirect to login or automatically log in
+    // For now, go back to main options
+    goBack();
+
+  } catch (error) {
+    toastError('Failed to register HTM account', error);
+  } finally {
+    isLoading.value = false;
+  }
 };
 </script>
 
@@ -44,11 +132,120 @@ const registerHTMAccount = () => {
         title="HTM Login"
         description="Login to your existing HTM account or create a new one"
         @success="onLoginSuccess"
-        @close="showLoginForm = false"
+        @close="goBack"
       />
     </div>
 
-    <!-- Show registration options -->
+    <!-- Show HTM Registration Form -->
+    <Card
+      v-else-if="showRegistrationForm"
+      class="w-full"
+    >
+      <CardHeader>
+        <CardTitle class="text-2xl">
+          Register New HTM Account
+        </CardTitle>
+        <CardDescription>
+          Create your HTM account profile. This information will be stored as metadata following the same structure as Hive posting JSON metadata.
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="space-y-6">
+        <form
+          class="space-y-4"
+          @submit.prevent="registerHTMAccount"
+        >
+          <!-- Account Name (required) -->
+          <div class="space-y-2">
+            <Label for="account-name">
+              Account Name *
+            </Label>
+            <Input
+              id="account-name"
+              v-model="registrationData.name"
+              type="text"
+              placeholder="Enter your display name"
+              required
+              maxlength="50"
+            />
+            <p class="text-xs text-muted-foreground">
+              This will be your display name (max 50 characters)
+            </p>
+          </div>
+
+          <!-- About/Description (required) -->
+          <div class="space-y-2">
+            <Label for="account-about">
+              About *
+            </Label>
+            <Textarea
+              id="account-about"
+              v-model="registrationData.about"
+              placeholder="Tell us about yourself or your project..."
+              required
+              rows="4"
+              maxlength="500"
+            />
+            <p class="text-xs text-muted-foreground">
+              Brief description about you or your project (max 500 characters)
+            </p>
+          </div>
+
+          <!-- Website (optional) -->
+          <div class="space-y-2">
+            <Label for="account-website">
+              Website
+            </Label>
+            <Input
+              id="account-website"
+              v-model="registrationData.website"
+              type="url"
+              placeholder="https://your-website.com"
+            />
+            <p class="text-xs text-muted-foreground">
+              Your website or project URL (optional)
+            </p>
+          </div>
+
+          <!-- Profile Image (optional) -->
+          <div class="space-y-2">
+            <Label for="account-profile-image">
+              Profile Image URL
+            </Label>
+            <Input
+              id="account-profile-image"
+              v-model="registrationData.profile_image"
+              type="url"
+              placeholder="https://example.com/your-image.jpg"
+            />
+            <p class="text-xs text-muted-foreground">
+              Profile image URL (optional) - in the future this will be handled by our image hosting service
+            </p>
+          </div>
+
+          <!-- Form Actions -->
+          <div class="flex gap-3 pt-4">
+            <Button
+              type="button"
+              variant="outline"
+              class="flex-1"
+              @click="goBack"
+            >
+              Back
+            </Button>
+            <Button
+              type="submit"
+              :disabled="isLoading || !isFormValid"
+              class="flex-1"
+            >
+              <span v-if="isLoading">Registering...</span>
+              <span v-else>Register HTM Account</span>
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+
+    <!-- Show main registration options -->
     <Card v-else>
       <CardHeader class="text-center">
         <CardTitle class="text-2xl">
@@ -70,9 +267,8 @@ const registerHTMAccount = () => {
             <Button
               size="lg"
               class="w-full"
-              @click="registerHTMAccount"
+              @click="showRegistrationForm = true"
             >
-              <!-- TODO: Actual registration / Allow to log into HTM account -->
               Register New HTM Account
             </Button>
 
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
new file mode 100644
index 0000000..98626e6
--- /dev/null
+++ b/src/pages/tokens/token.vue
@@ -0,0 +1,782 @@
+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import HTMView from '@/components/HTMView.vue';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Textarea } from '@/components/ui/textarea';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
+import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
+import type { CtokensAppToken, CtokensAppBalance, CtokensAppTopHolder } from '@/utils/wallet/ctokens/api';
+
+// Router
+const route = useRoute();
+const router = useRouter();
+
+// Stores
+const tokensStore = useTokensStore();
+const settingsStore = useSettingsStore();
+
+// State
+const token = ref<CtokensAppToken | null>(null);
+const userBalance = ref<CtokensAppBalance | null>(null);
+const topHolders = ref<CtokensAppTopHolder[]>([]);
+const isLoading = ref(true);
+const isLoadingHolders = ref(false);
+const isTransferring = ref(false);
+
+// Transfer form
+const transferForm = ref({
+  to: '',
+  amount: '',
+  memo: ''
+});
+
+// Get NAI from route parameter
+const nai = computed(() => route.query.nai as string);
+const precision = computed(() => route.query.precision);
+
+// Check if user is logged in
+const isLoggedIn = computed(() => !!settingsStore.settings.account);
+
+// Computed properties
+const tokenName = computed(() => {
+  if (!token.value) return 'Unknown Token';
+  const metadata = token.value.metadata as { name?: string } | undefined;
+  return metadata?.name || token.value.nai || 'Unknown Token';
+});
+
+const tokenSymbol = computed(() => {
+  if (!token.value) return '';
+  const metadata = token.value.metadata as { symbol?: string } | undefined;
+  return metadata?.symbol || '';
+});
+
+const tokenDescription = computed(() => {
+  if (!token.value) return '';
+  const metadata = token.value.metadata as { description?: string } | undefined;
+  return metadata?.description || '';
+});
+
+const tokenImage = computed(() => {
+  if (!token.value) return '';
+  const metadata = token.value.metadata as { image?: string } | undefined;
+  return metadata?.image || '';
+});
+
+const formattedTotalSupply = ref('0');
+const formattedMaxSupply = ref('0');
+const formattedUserBalance = ref('0.000');
+
+// Helper function to update formatted values
+const updateFormattedValues = async () => {
+  if (!token.value) return;
+
+  const wax = await getWax();
+
+  formattedTotalSupply.value = wax.formatter.formatNumber(
+    token.value.total_supply || '0',
+    token.value.precision || 0
+  );
+
+  if (token.value.max_supply === '0')
+    formattedMaxSupply.value = '∞';
+  else {
+    formattedMaxSupply.value = wax.formatter.formatNumber(
+      token.value.max_supply || '0',
+      token.value.precision || 0
+    );
+  }
+
+  if (userBalance.value) {
+    formattedUserBalance.value = wax.formatter.formatNumber(
+      userBalance.value.amount || '0',
+      userBalance.value.precision || 0
+    );
+  }
+};
+
+// Load token details
+const loadTokenDetails = async () => {
+  try {
+    isLoading.value = true;
+
+    const wax = await getWax();
+
+    // Fetch token details by NAI
+    // First try with just NAI, if that doesn't work, get all tokens and filter
+    let tokens = await wax.restApi.ctokensApi.registeredTokens({ nai: nai.value, precision: Number(precision.value!) });
+
+    // If no token found with just NAI, try getting all tokens and filtering
+    if (!tokens || tokens.length === 0) {
+      const allTokens = await wax.restApi.ctokensApi.registeredTokens({});
+      tokens = allTokens.filter(token => token.nai === nai.value);
+    }
+
+    if (!tokens || tokens.length === 0)
+      throw new Error(`Token with NAI ${nai.value} not found`);
+
+    token.value = tokens[0];
+
+    // Update formatted values
+    await updateFormattedValues();
+
+    // Load user balance if user is logged in
+    if (isLoggedIn.value) {
+      try {
+        // Get user balances from the store
+        await tokensStore.loadBalances();
+        userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
+        if (userBalance.value)
+          await updateFormattedValues();
+
+      } catch (error) {
+        console.warn('Failed to load user balance:', error);
+      }
+    }
+
+  } catch (error) {
+    toastError('Failed to load token details', error);
+    // Redirect back to tokens list on error
+    router.push('/tokens/list');
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// Load top holders
+const loadTopHolders = async () => {
+  if (!token.value) return;
+
+  try {
+    isLoadingHolders.value = true;
+    topHolders.value = await tokensStore.getTopHolders(
+      token.value.nai!,
+      token.value.precision || 0
+    );
+  } catch (error) {
+    console.warn('Failed to load top holders:', error);
+    toastError('Failed to load top holders', error);
+  } finally {
+    isLoadingHolders.value = false;
+  }
+};
+
+// Handle transfer (simplified for now)
+const handleTransfer = async () => {
+  if (!token.value || !isLoggedIn.value) {
+    toastError('You must be logged in to transfer tokens', new Error('Not logged in'));
+    return;
+  }
+
+  if (!transferForm.value.to || !transferForm.value.amount) {
+    toastError('Please fill in recipient and amount', new Error('Missing fields'));
+    return;
+  }
+
+  try {
+    isTransferring.value = true;
+
+    // For now, just show a placeholder message
+    // In a real implementation, this would use the transfer API
+    console.log('Transfer:', {
+      token: token.value.nai,
+      to: transferForm.value.to,
+      amount: transferForm.value.amount,
+      memo: transferForm.value.memo
+    });
+
+    // TODO: Implement actual transfer functionality
+    throw new Error('Transfer functionality not yet implemented');
+
+  } catch (error) {
+    toastError('Transfer failed', error);
+  } finally {
+    isTransferring.value = false;
+  }
+};
+
+// Navigate back to token list
+const goBack = () => {
+  router.push('/tokens/list');
+};
+
+// Initialize
+onMounted(async () => {
+  await loadTokenDetails();
+  await loadTopHolders();
+});
+</script>
+
+<template>
+  <HTMView :is-public-page="false">
+    <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4">
+      <!-- Header with back button -->
+      <div class="flex items-center gap-4">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="gap-2 hover:bg-accent"
+          @click="goBack"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
+          >
+            <path
+              style="fill: currentColor"
+              d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+            />
+          </svg>
+          Back to Tokens
+        </Button>
+      </div>
+
+      <!-- Loading State -->
+      <div
+        v-if="isLoading"
+        class="space-y-6"
+      >
+        <div class="flex items-center gap-4">
+          <Skeleton class="h-16 w-16 rounded-full" />
+          <div class="space-y-2">
+            <Skeleton class="h-8 w-48" />
+            <Skeleton class="h-4 w-32" />
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <Card
+            v-for="i in 3"
+            :key="i"
+          >
+            <CardHeader>
+              <Skeleton class="h-5 w-24" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton class="h-8 w-32" />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      <!-- Token Details -->
+      <div
+        v-else-if="token"
+        class="space-y-6"
+      >
+        <!-- Token Header -->
+        <div class="flex flex-col sm:flex-row items-start gap-6 p-6 bg-card rounded-xl border">
+          <Avatar class="h-20 w-20 sm:h-24 sm:w-24 flex-shrink-0">
+            <AvatarImage
+              v-if="tokenImage"
+              :src="tokenImage"
+              :alt="tokenName"
+            />
+            <AvatarFallback class="text-xl sm:text-2xl font-bold bg-primary/10 text-primary">
+              {{ tokenSymbol ? tokenSymbol.slice(0, 2).toUpperCase() : tokenName.slice(0, 2).toUpperCase() }}
+            </AvatarFallback>
+          </Avatar>
+
+          <div class="flex-1 min-w-0">
+            <div class="flex flex-col sm:flex-row sm:items-center gap-3 mb-3">
+              <h1 class="text-2xl sm:text-3xl font-bold text-foreground">
+                {{ tokenName }}
+              </h1>
+              <div class="flex flex-wrap gap-2">
+                <span
+                  v-if="tokenSymbol"
+                  class="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary border border-primary/20"
+                >
+                  {{ tokenSymbol }}
+                </span>
+                <span
+                  v-if="token.is_nft"
+                  class="inline-flex items-center rounded-md bg-purple-500/10 px-2 py-1 text-xs font-medium text-purple-500 border border-purple-500/20"
+                >
+                  NFT
+                </span>
+              </div>
+            </div>
+
+            <p
+              v-if="tokenDescription"
+              class="text-muted-foreground text-base sm:text-lg mb-3 leading-relaxed"
+            >
+              {{ tokenDescription }}
+            </p>
+
+            <div class="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
+              <div class="flex items-center gap-2">
+                <span class="font-medium">NAI:</span>
+                <code class="bg-muted px-2 py-1 rounded font-mono text-xs">{{ token.nai }}</code>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="font-medium">Precision:</span>
+                <span class="bg-muted px-2 py-1 rounded text-xs">{{ token.precision }} decimals</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Token Stats -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6">
+          <!-- Total Supply -->
+          <Card class="hover:shadow-md transition-shadow duration-200">
+            <CardHeader class="pb-3">
+              <CardTitle class="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                <div class="w-4 h-4 rounded-full bg-blue-500" />
+                Total Supply
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div class="text-xl sm:text-2xl font-bold text-foreground">
+                {{ formattedTotalSupply }}
+              </div>
+              <p class="text-xs text-muted-foreground mt-1">
+                Current circulating supply
+              </p>
+            </CardContent>
+          </Card>
+
+          <!-- Max Supply -->
+          <Card class="hover:shadow-md transition-shadow duration-200">
+            <CardHeader class="pb-3">
+              <CardTitle class="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                <div class="w-4 h-4 rounded-full bg-orange-500" />
+                Max Supply
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div class="text-xl sm:text-2xl font-bold text-foreground">
+                {{ formattedMaxSupply }}
+              </div>
+              <p class="text-xs text-muted-foreground mt-1">
+                {{ token.max_supply === '0' ? 'No maximum limit' : 'Maximum possible supply' }}
+              </p>
+            </CardContent>
+          </Card>
+
+          <!-- Your Balance -->
+          <Card class="hover:shadow-md transition-shadow duration-200">
+            <CardHeader class="pb-3">
+              <CardTitle class="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                <div class="w-4 h-4 rounded-full bg-green-500" />
+                Your Balance
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div class="text-xl sm:text-2xl font-bold text-foreground">
+                {{ isLoggedIn ? formattedUserBalance : '—' }}
+              </div>
+              <p class="text-xs text-muted-foreground mt-1">
+                {{ isLoggedIn ? 'Current balance' : 'Connect wallet to view' }}
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <!-- Actions Section -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
+          <!-- Transfer Section -->
+          <Card class="h-fit">
+            <CardHeader>
+              <CardTitle class="flex items-center gap-2">
+                <svg
+                  width="20"
+                  height="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  class="text-primary"
+                >
+                  <path
+                    style="fill: currentColor"
+                    d="M2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12M18,11H10L13.5,7.5L12.08,6.08L6.16,12L12.08,17.92L13.5,16.5L10,13H18V11Z"
+                  />
+                </svg>
+                Transfer Tokens
+              </CardTitle>
+              <CardDescription>
+                Send {{ tokenSymbol || tokenName }} to another account
+              </CardDescription>
+            </CardHeader>
+            <CardContent class="space-y-6">
+              <div
+                v-if="!isLoggedIn"
+                class="text-center py-12 space-y-4"
+              >
+                <div class="w-16 h-16 mx-auto bg-muted rounded-full flex items-center justify-center">
+                  <svg
+                    width="24"
+                    height="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="text-muted-foreground"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+                    />
+                  </svg>
+                </div>
+                <p class="text-muted-foreground font-medium">
+                  Connect your wallet to transfer tokens
+                </p>
+                <Button
+                  size="lg"
+                  @click="$router.push('/')"
+                >
+                  Connect Wallet
+                </Button>
+              </div>
+
+              <div
+                v-else
+                class="space-y-5"
+              >
+                <div class="space-y-2">
+                  <Label
+                    for="recipient"
+                    class="text-sm font-medium text-foreground"
+                  >
+                    Recipient Account
+                  </Label>
+                  <Input
+                    id="recipient"
+                    v-model="transferForm.to"
+                    placeholder="Enter recipient account or address"
+                    :disabled="isTransferring"
+                    class="transition-colors"
+                    :class="transferForm.to && transferForm.to.length > 2 ? 'border-green-500 focus-visible:ring-green-500' : ''"
+                  />
+                  <p class="text-xs text-muted-foreground">
+                    Enter the account name or address to send tokens to
+                  </p>
+                </div>
+
+                <div class="space-y-2">
+                  <Label
+                    for="amount"
+                    class="text-sm font-medium text-foreground"
+                  >
+                    Amount
+                  </Label>
+                  <div class="relative">
+                    <Input
+                      id="amount"
+                      v-model="transferForm.amount"
+                      type="number"
+                      step="any"
+                      min="0"
+                      :placeholder="`Amount in ${tokenSymbol || tokenName}`"
+                      :disabled="isTransferring"
+                      class="pr-20 transition-colors"
+                      :class="transferForm.amount && Number(transferForm.amount) > 0 ? 'border-green-500 focus-visible:ring-green-500' : ''"
+                    />
+                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground font-medium">
+                      {{ tokenSymbol || 'TOK' }}
+                    </span>
+                  </div>
+                  <div class="flex justify-between text-xs">
+                    <span class="text-muted-foreground">
+                      Available: {{ formattedUserBalance }}
+                    </span>
+                    <button
+                      v-if="userBalance && Number(userBalance.amount) > 0"
+                      type="button"
+                      class="text-primary hover:text-primary/80 font-medium"
+                      @click="transferForm.amount = formattedUserBalance"
+                    >
+                      Max
+                    </button>
+                  </div>
+                </div>
+
+                <div class="space-y-2">
+                  <Label
+                    for="memo"
+                    class="text-sm font-medium text-foreground"
+                  >
+                    Memo (Optional)
+                  </Label>
+                  <Textarea
+                    id="memo"
+                    v-model="transferForm.memo"
+                    placeholder="Optional transfer memo or note"
+                    rows="3"
+                    :disabled="isTransferring"
+                    class="resize-none"
+                  />
+                  <p class="text-xs text-muted-foreground">
+                    Add an optional note for this transaction
+                  </p>
+                </div>
+
+                <Button
+                  class="w-full"
+                  size="lg"
+                  :disabled="isTransferring || !transferForm.to || !transferForm.amount || Number(transferForm.amount) <= 0"
+                  @click="handleTransfer"
+                >
+                  <svg
+                    v-if="isTransferring"
+                    width="16"
+                    height="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="mr-2 animate-spin"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+                    />
+                  </svg>
+                  <svg
+                    v-else
+                    width="16"
+                    height="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="mr-2"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      d="M2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12M18,11H10L13.5,7.5L12.08,6.08L6.16,12L12.08,17.92L13.5,16.5L10,13H18V11Z"
+                    />
+                  </svg>
+                  {{ isTransferring ? 'Processing Transfer...' : 'Send Transfer' }}
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          <!-- Top Holders Section -->
+          <Card class="h-fit">
+            <CardHeader>
+              <CardTitle class="flex items-center gap-2">
+                <svg
+                  width="20"
+                  height="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  class="text-primary"
+                >
+                  <path
+                    style="fill: currentColor"
+                    d="M16,4C18.11,4 19.81,5.69 19.81,7.8C19.81,9.91 18.11,11.6 16,11.6C13.89,11.6 12.19,9.91 12.19,7.8C12.19,5.69 13.89,4 16,4M16,13.4C18.67,13.4 24,14.73 24,17.4V20H8V17.4C8,14.73 13.33,13.4 16,13.4M8.31,12.7C7.75,12.26 7.12,11.96 6.44,11.84C6.95,11.11 7.31,10.3 7.31,9.36C7.31,7.93 6.75,6.64 5.44,5.9C4.95,5.66 4.41,5.5 3.91,5.44C4.2,5.16 4.53,4.93 4.9,4.76C5.27,4.6 5.66,4.5 6.06,4.5C7.84,4.5 9.19,5.96 9.19,7.8C9.19,9.64 7.84,11.1 6.06,11.1C5.66,11.1 5.27,11 4.9,10.84C5.27,11.01 5.66,11.1 6.06,11.1C6.75,11.1 7.39,10.9 7.94,10.54C8.07,11.13 8.18,11.88 8.31,12.7M6.56,13.4C4.17,13.4 0,14.73 0,17.4V20H6V17.4C6,15.77 6.91,14.32 8.31,13.4H6.56Z"
+                  />
+                </svg>
+                Top Holders
+              </CardTitle>
+              <CardDescription>
+                Accounts with the largest {{ tokenSymbol || tokenName }} balances
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div
+                v-if="isLoadingHolders"
+                class="space-y-4"
+              >
+                <div
+                  v-for="i in 5"
+                  :key="i"
+                  class="flex items-center gap-4 p-3 rounded-lg border animate-pulse"
+                >
+                  <Skeleton class="h-10 w-10 rounded-full flex-shrink-0" />
+                  <div class="flex-1 space-y-2">
+                    <Skeleton class="h-4 w-32" />
+                    <Skeleton class="h-3 w-24" />
+                  </div>
+                  <div class="text-right space-y-2">
+                    <Skeleton class="h-4 w-20" />
+                    <Skeleton class="h-3 w-16" />
+                  </div>
+                </div>
+              </div>
+
+              <div
+                v-else-if="topHolders.length > 0"
+                class="space-y-2"
+              >
+                <div
+                  v-for="(holder, index) in topHolders.slice(0, 10)"
+                  :key="holder.user"
+                  class="flex items-center gap-4 p-3 rounded-lg border hover:border-primary/20 hover:bg-accent/50 transition-colors"
+                >
+                  <div class="relative flex-shrink-0">
+                    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-primary/20 to-primary/10 text-sm font-bold text-primary border-2 border-primary/20">
+                      {{ index + 1 }}
+                    </div>
+                    <div
+                      v-if="index < 3"
+                      class="absolute -top-1 -right-1 w-4 h-4 rounded-full flex items-center justify-center text-xs"
+                      :class="{
+                        'bg-yellow-500 text-yellow-50': index === 0,
+                        'bg-gray-400 text-gray-50': index === 1,
+                        'bg-amber-600 text-amber-50': index === 2
+                      }"
+                    >
+                      <svg
+                        width="8"
+                        height="8"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                      >
+                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                      </svg>
+                    </div>
+                  </div>
+
+                  <div class="flex-1 min-w-0">
+                    <p class="font-semibold text-foreground truncate">
+                      {{ holder.user }}
+                    </p>
+                    <p class="text-sm text-muted-foreground">
+                      Rank #{{ holder.rank }}
+                    </p>
+                  </div>
+
+                  <div class="text-right flex-shrink-0">
+                    <p class="font-bold text-foreground">
+                      {{ holder.amount }}
+                    </p>
+                    <p class="text-xs text-muted-foreground">
+                      {{ tokenSymbol || 'tokens' }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                v-else
+                class="text-center py-12 space-y-4"
+              >
+                <div class="w-16 h-16 mx-auto bg-muted rounded-full flex items-center justify-center">
+                  <svg
+                    width="24"
+                    height="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="text-muted-foreground"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,17.3C9.5,17.3 7.45,15.25 7.45,12.75C7.45,10.25 9.5,8.2 12,8.2C14.5,8.2 16.55,10.25 16.55,12.75C16.55,15.25 14.5,17.3 12,17.3M12,10.7C10.83,10.7 9.95,11.58 9.95,12.75C9.95,13.92 10.83,14.8 12,14.8C13.17,14.8 14.05,13.92 14.05,12.75C14.05,11.58 13.17,10.7 12,10.7Z"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <p class="font-medium text-foreground mb-1">
+                    No holder data available
+                  </p>
+                  <p class="text-sm text-muted-foreground">
+                    Top holders information is not available for this token
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <!-- Additional Token Info -->
+        <Card>
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <svg
+                width="20"
+                height="20"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="text-primary"
+              >
+                <path
+                  style="fill: currentColor"
+                  d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+                />
+              </svg>
+              Token Information
+            </CardTitle>
+            <CardDescription>
+              Detailed properties and configuration for this token
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+              <div class="space-y-6">
+                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 rounded-lg border bg-accent/30">
+                  <span class="text-sm font-medium text-muted-foreground">Token Owner</span>
+                  <code class="text-sm font-mono bg-muted px-2 py-1 rounded break-all">{{ token.owner }}</code>
+                </div>
+
+                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 rounded-lg border bg-accent/30">
+                  <span class="text-sm font-medium text-muted-foreground">Decimal Precision</span>
+                  <span class="font-semibold">{{ token.precision }} decimals</span>
+                </div>
+
+                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 rounded-lg border bg-accent/30">
+                  <span class="text-sm font-medium text-muted-foreground">Supply Capped</span>
+                  <span
+                    class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border"
+                    :class="token.capped
+                      ? 'bg-green-50 text-green-700 border-green-200'
+                      : 'bg-gray-50 text-gray-700 border-gray-200'"
+                  >
+                    {{ token.capped ? 'Yes' : 'No' }}
+                  </span>
+                </div>
+              </div>
+
+              <div class="space-y-6">
+                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 rounded-lg border bg-accent/30">
+                  <span class="text-sm font-medium text-muted-foreground">Others Can Stake</span>
+                  <span
+                    class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border"
+                    :class="token.others_can_stake
+                      ? 'bg-blue-50 text-blue-700 border-blue-200'
+                      : 'bg-gray-50 text-gray-700 border-gray-200'"
+                  >
+                    {{ token.others_can_stake ? 'Enabled' : 'Disabled' }}
+                  </span>
+                </div>
+
+                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 rounded-lg border bg-accent/30">
+                  <span class="text-sm font-medium text-muted-foreground">Others Can Unstake</span>
+                  <span
+                    class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border"
+                    :class="token.others_can_unstake
+                      ? 'bg-blue-50 text-blue-700 border-blue-200'
+                      : 'bg-gray-50 text-gray-700 border-gray-200'"
+                  >
+                    {{ token.others_can_unstake ? 'Enabled' : 'Disabled' }}
+                  </span>
+                </div>
+
+                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 rounded-lg border bg-accent/30">
+                  <span class="text-sm font-medium text-muted-foreground">Token Type</span>
+                  <span
+                    class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border"
+                    :class="token.is_nft
+                      ? 'bg-purple-50 text-purple-700 border-purple-200'
+                      : 'bg-emerald-50 text-emerald-700 border-emerald-200'"
+                  >
+                    {{ token.is_nft ? 'NFT' : 'Fungible' }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  </HTMView>
+</template>
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index fa4ee27..cb41ee1 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -2,23 +2,25 @@ import { defineStore } from 'pinia';
 import { shallowRef } from 'vue';
 
 import {
-  cTokensApi,
-  getUserOperationalKey,
-  transformCTokenBalanceToLegacy,
-  transformCTokenToLegacy,
-  type CTokenBalanceHistory,
-  type CTokenTopHolder,
-  type LegacyTokenBalance,
-  type LegacyTokenDefinition
+  getCTokensApi,
+  getUserOperationalKey
 } from '@/utils/ctokens-api';
+import type {
+  CtokensAppArrayOfBalances,
+  CtokensAppArrayOfTokens,
+  CtokensAppBalance,
+  CtokensAppToken,
+  CtokensAppBalanceHistory,
+  CtokensAppTopHolder
+} from '@/utils/wallet/ctokens/api';
 import type CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 const cTokensProvider = shallowRef<CTokensProvider | undefined>(undefined);
 
 export const useTokensStore = defineStore('tokens', {
   state: () => ({
-    balances: [] as LegacyTokenBalance[],
-    tokenDefinitions: [] as LegacyTokenDefinition[],
+    balances: [] as CtokensAppArrayOfBalances,
+    tokenDefinitions: [] as CtokensAppArrayOfTokens,
     isLoadingBalances: false,
     isLoadingTokens: false,
     lastError: null as string | null
@@ -29,7 +31,7 @@ export const useTokensStore = defineStore('tokens', {
       return state.balances.reduce((total, balance) => {
         // Mock price of $0.01 per token for now
         const price = 0.01;
-        const amount = parseFloat(balance.total_balance);
+        const amount = parseFloat(balance.amount!);
         return total + (amount * price);
       }, 0);
     },
@@ -53,6 +55,7 @@ export const useTokensStore = defineStore('tokens', {
 
       try {
         // Test API connectivity first
+        const cTokensApi = await getCTokensApi();
         const isApiAvailable = await cTokensApi.testConnection();
 
         if (!isApiAvailable)
@@ -61,19 +64,7 @@ export const useTokensStore = defineStore('tokens', {
         // Get balances from ctokens-api
         const cTokenBalances = await cTokensApi.getAccountBalances(operationalKey);
 
-        // Get all registered tokens to map metadata
-        const tokens = await cTokensApi.getRegisteredTokens();
-
-        // Transform to legacy format
-        const legacyBalances: LegacyTokenBalance[] = [];
-
-        for (const balance of cTokenBalances) {
-          const token = tokens.find(t => t.nai === balance.nai && t.precision === balance.precision);
-          if (token)
-            legacyBalances.push(transformCTokenBalanceToLegacy(balance, token));
-        }
-
-        this.balances = legacyBalances;
+        this.balances = cTokenBalances;
       } catch (error) {
         console.error('Failed to load balances:', error);
         this.lastError = error instanceof Error ? error.message : 'Failed to load balances';
@@ -82,34 +73,19 @@ export const useTokensStore = defineStore('tokens', {
         console.log('Using fallback mock data for development');
         this.balances = [
           {
-            symbol: 'HIVE',
-            name: 'Hive',
             nai: '@@000000021',
-            liquid_balance: '150.500',
-            staked_balance: '0.000',
-            total_balance: '150.500',
             precision: 3,
-            logo_url: undefined
+            amount: '150.500'
           },
           {
-            symbol: 'HBD',
-            name: 'Hive Backed Dollar',
             nai: '@@000000013',
-            liquid_balance: '75.250',
-            staked_balance: '0.000',
-            total_balance: '75.250',
             precision: 3,
-            logo_url: undefined
+            amount: '75.250'
           },
           {
-            symbol: 'MAT',
-            name: 'My Awesome Token',
             nai: '@@123456789',
-            liquid_balance: '1000.000',
-            staked_balance: '500.000',
-            total_balance: '1500.000',
             precision: 3,
-            logo_url: undefined
+            amount: '0.000'
           }
         ];
       } finally {
@@ -124,6 +100,7 @@ export const useTokensStore = defineStore('tokens', {
 
       try {
         // Test API connectivity first
+        const cTokensApi = await getCTokensApi();
         const isApiAvailable = await cTokensApi.testConnection();
 
         if (!isApiAvailable)
@@ -133,12 +110,7 @@ export const useTokensStore = defineStore('tokens', {
         const tokens = await cTokensApi.getRegisteredTokens();
 
         // Filter by creator if provided
-        const filteredTokens = creator
-          ? tokens.filter(token => token.owner === creator)
-          : tokens;
-
-        // Transform to legacy format
-        this.tokenDefinitions = filteredTokens.map(token => transformCTokenToLegacy(token));
+        this.tokenDefinitions = creator ? tokens.filter((token: CtokensAppToken) => token.owner === creator) : tokens;
       } catch (error) {
         console.error('Failed to load token definitions:', error);
         this.lastError = error instanceof Error ? error.message : 'Failed to load token definitions';
@@ -147,37 +119,45 @@ export const useTokensStore = defineStore('tokens', {
         console.log('Using fallback mock data for token definitions');
         this.tokenDefinitions = [
           {
-            symbol: 'MAT',
-            name: 'My Awesome Token',
-            description: 'A test token for demonstration purposes',
             nai: '@@123456789',
-            initial_supply: '1000000',
-            current_supply: '1000000',
+            owner: creator || 'testaccount',
             precision: 3,
-            can_stake: true,
-            creator: creator || 'testaccount',
-            created_at: '2024-01-15T10:30:00Z',
-            active: true
+            total_supply: '1000000',
+            max_supply: '0',
+            capped: false,
+            others_can_stake: true,
+            others_can_unstake: true,
+            is_nft: false,
+            metadata: {
+              symbol: 'MAT',
+              name: 'My Awesome Token',
+              description: 'A test token for demonstration purposes',
+              initial_supply: '1000000',
+              created_at: '2024-01-15T10:30:00Z',
+              active: true
+            }
           }
         ];
       } finally {
         this.isLoadingTokens = false;
       }
     },
-    async getBalanceHistory (nai: string, precision: number, page = 1): Promise<CTokenBalanceHistory[]> {
+    async getBalanceHistory (nai: string, precision: number, page = 1): Promise<CtokensAppBalanceHistory[]> {
       const operationalKey = getUserOperationalKey();
       if (!operationalKey)
         throw new Error('No operational key available');
 
+      const cTokensApi = await getCTokensApi();
       return cTokensApi.getBalanceHistory(operationalKey, nai, precision, page);
     },
-    async getTopHolders (nai: string, precision: number, page = 1): Promise<CTokenTopHolder[]> {
+    async getTopHolders (nai: string, precision: number, page = 1): Promise<CtokensAppTopHolder[]> {
+      const cTokensApi = await getCTokensApi();
       return cTokensApi.getTopHolders(nai, precision, page);
     },
-    getTokenByNAI (nai: string): LegacyTokenBalance | undefined {
+    getTokenByNAI (nai: string): CtokensAppBalance | undefined {
       return this.balances.find(balance => balance.nai === nai);
     },
-    getTokenDefinitionByNAI (nai: string): LegacyTokenDefinition | undefined {
+    getTokenDefinitionByNAI (nai: string): CtokensAppToken | undefined {
       return this.tokenDefinitions.find(token => token.nai === nai);
     },
     async refreshAll () {
diff --git a/src/utils/ctokens-api.ts b/src/utils/ctokens-api.ts
index 99362ab..7cad43b 100644
--- a/src/utils/ctokens-api.ts
+++ b/src/utils/ctokens-api.ts
@@ -8,8 +8,7 @@ import type {
   CtokensAppTransactionStatusResponse,
   CtokensAppArrayOfTokens,
   CtokensAppArrayOfUsers,
-  CtokensAppArrayOfTopHolders,
-  CtokensAppToken
+  CtokensAppArrayOfTopHolders
 } from '@/utils/wallet/ctokens/api';
 
 import type RestApi from '../utils/wallet/ctokens/api';
@@ -180,8 +179,17 @@ export class CTokensApiService {
   }
 }
 
-// Create singleton instance
-export const cTokensApi = new CTokensApiService(await getWax());
+// Lazy initialization to avoid top-level await
+let _cTokensApiInstance: CTokensApiService | null = null;
+
+// Get or create singleton instance
+export const getCTokensApi = async (): Promise<CTokensApiService> => {
+  if (!_cTokensApiInstance) {
+    const wax = await getWax();
+    _cTokensApiInstance = new CTokensApiService(wax);
+  }
+  return _cTokensApiInstance;
+};
 
 // Factory function to create instance with specific wax instance
 export const createCTokensApiService = (waxInstance: Awaited<ReturnType<typeof getWax>>): CTokensApiService => {
@@ -264,71 +272,6 @@ export const getUserOperationalKey = (): string => {
   return account;
 };
 
-/**
- * Transform CTokenBalance to legacy TokenBalance format
- */
-export interface LegacyTokenBalance {
-  symbol: string;
-  name: string;
-  nai: string;
-  liquid_balance: string;
-  staked_balance: string;
-  total_balance: string;
-  precision: number;
-  logo_url?: string;
-}
-
-export const transformCTokenBalanceToLegacy = (
-  balance: CtokensAppBalance,
-  token: CtokensAppToken
-): LegacyTokenBalance => {
-  const formattedAmount = formatCTokenAmount(balance.amount, balance.precision);
-
-  return {
-    symbol: getTokenSymbol(token),
-    name: getTokenName(token),
-    nai: balance.nai,
-    liquid_balance: formattedAmount,
-    staked_balance: '0.000', // ctokens-api doesn't distinguish liquid vs staked in balances endpoint
-    total_balance: formattedAmount,
-    precision: balance.precision,
-    logo_url: getTokenLogoUrl(token)
-  };
-};
-
-/**
- * Transform CToken to legacy TokenDefinition format
- */
-export interface LegacyTokenDefinition {
-  symbol: string;
-  name: string;
-  description: string;
-  nai: string;
-  initial_supply: string;
-  current_supply: string;
-  precision: number;
-  can_stake: boolean;
-  creator: string;
-  created_at: string;
-  active: boolean;
-}
-
-export const transformCTokenToLegacy = (token: CToken): LegacyTokenDefinition => {
-  return {
-    symbol: getTokenSymbol(token),
-    name: getTokenName(token),
-    description: getTokenDescription(token),
-    nai: token.nai,
-    initial_supply: formatCTokenAmount(token.total_supply, token.precision),
-    current_supply: formatCTokenAmount(token.total_supply, token.precision),
-    precision: token.precision,
-    can_stake: canTokenStake(token),
-    creator: token.owner,
-    created_at: new Date().toISOString(), // ctokens-api doesn't provide creation date
-    active: true // assume all registered tokens are active
-  };
-};
-
 /**
  * Get user-friendly status message
  */
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index 87e3664..ca1c0ec 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -3,13 +3,10 @@ import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 
 import {
-  cTokensApi,
-  getUserOperationalKey,
-  transformCTokenBalanceToLegacy,
-  transformCTokenToLegacy,
-  type LegacyTokenBalance,
-  type LegacyTokenDefinition
+  getCTokensApi,
+  getUserOperationalKey
 } from './ctokens-api';
+import type { CtokensAppArrayOfTokens } from './wallet/ctokens/api';
 
 export interface TokenCreationParams {
   symbol: string;
@@ -202,18 +199,14 @@ export const stakeNAIToken = async (params: TokenStakeParams) => {
 /**
  * Get token definitions for an account - now using ctokens-api
  */
-export const getTokenDefinitions = async (creator?: string): Promise<LegacyTokenDefinition[]> => {
+export const getTokenDefinitions = async (creator?: string): Promise<CtokensAppArrayOfTokens> => {
   try {
     // Get registered tokens from ctokens-api
+    const cTokensApi = await getCTokensApi();
     const tokens = await cTokensApi.getRegisteredTokens();
 
     // Filter by creator if provided
-    const filteredTokens = creator
-      ? tokens.filter(token => token.owner === creator)
-      : tokens;
-
-    // Transform to legacy format
-    return filteredTokens.map(token => transformCTokenToLegacy(token));
+    return creator ? tokens.filter(token => token.owner === creator) : tokens;
   } catch (error) {
     console.error('Failed to get token definitions:', error);
     // Fallback to mock data for development
@@ -240,28 +233,15 @@ export const getTokenDefinitions = async (creator?: string): Promise<LegacyToken
 /**
  * Get account balances - now using ctokens-api
  */
-export const getAccountBalances = async (_account: string): Promise<LegacyTokenBalance[]> => {
+export const getAccountBalances = async (): Promise<CtokensAppArrayOfTokens> => {
   try {
     const operationalKey = getUserOperationalKey();
     if (!operationalKey)
       throw new Error('No operational key available');
 
     // Get balances from ctokens-api
-    const balances = await cTokensApi.getAccountBalances(operationalKey);
-
-    // Get all registered tokens to map metadata
-    const tokens = await cTokensApi.getRegisteredTokens();
-
-    // Transform to legacy format
-    const legacyBalances: LegacyTokenBalance[] = [];
-
-    for (const balance of balances) {
-      const token = tokens.find(t => t.nai === balance.nai && t.precision === balance.precision);
-      if (token)
-        legacyBalances.push(transformCTokenBalanceToLegacy(balance, token));
-    }
-
-    return legacyBalances;
+    const cTokensApi = await getCTokensApi();
+    return await cTokensApi.getAccountBalances(operationalKey);
   } catch (error) {
     console.error('Failed to get account balances:', error);
     // Fallback to mock data for development
diff --git a/src/utils/router.ts b/src/utils/router.ts
index 65545b8..f8ec065 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -10,6 +10,7 @@ import TokensList from '@/pages/tokens/list.vue';
 import AccountBalances from '@/pages/tokens/my-balance.vue';
 import TokenDefinitions from '@/pages/tokens/my-tokens.vue';
 import RegisterHTMAccount from '@/pages/tokens/register-account.vue';
+import TokenDetail from '@/pages/tokens/token.vue';
 
 export const routes = [
   { path: '/', component: Index },
@@ -23,5 +24,6 @@ export const routes = [
   { path: '/tokens/my-tokens', component: TokenDefinitions },
   { path: '/tokens/my-balance', component: AccountBalances },
   { path: '/tokens/list', component: TokensList },
+  { path: '/tokens/token', component: TokenDetail },
   { path: '/automation/authorize', component: DappAuthorize }
 ];
-- 
GitLab


From c8de1ec5c74d26357a115e7359b6104495280c32 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Fri, 10 Oct 2025 17:12:12 +0200
Subject: [PATCH 015/102] Fix encrypt model-value

---
 src/components/utilcards/MemoEncryptCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/utilcards/MemoEncryptCard.vue b/src/components/utilcards/MemoEncryptCard.vue
index 17563cd..1b7fe89 100644
--- a/src/components/utilcards/MemoEncryptCard.vue
+++ b/src/components/utilcards/MemoEncryptCard.vue
@@ -112,7 +112,7 @@ const encryptOrDecrypt = async () => {
     <CardContent>
       <Tabs
         default-value="decrypt"
-        @update:model-value="(value: string) => isEncrypt = value === 'encrypt'"
+        @update:model-value="(value: string | number) => isEncrypt = value === 'encrypt'"
       >
         <TabsList>
           <TabsTrigger value="decrypt">
-- 
GitLab


From 0d287692092bd20aa02d6d8774ebb16535b24a99 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Fri, 10 Oct 2025 18:01:34 +0200
Subject: [PATCH 016/102] Add env variables to docker file

---
 Dockerfile | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Dockerfile b/Dockerfile
index d7d170a..63f8b17 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -33,3 +33,7 @@ LABEL io.hive.image.branch="$GIT_CURRENT_BRANCH"
 LABEL io.hive.image.commit.log_message="$GIT_LAST_LOG_MESSAGE"
 LABEL io.hive.image.commit.author="$GIT_LAST_COMMITTER"
 LABEL io.hive.image.commit.date="$GIT_LAST_COMMIT_DATE"
+
+ENV VITE_CTOKENS_API_URL=
+ENV VITE_HIVE_NODE_ENDPOINT=
+ENV VITE_HIVE_CHAIN_ID=
-- 
GitLab


From 74a5ebe393764044337886e2c6c0ba92f8094796 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Fri, 10 Oct 2025 18:38:31 +0200
Subject: [PATCH 017/102] Update vite config

---
 vite.config.ts | 55 +++++++++++++++++++++++++++++++++-----------------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index b56a7b3..667e662 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,7 +4,7 @@ import vue from '@vitejs/plugin-vue'
 import eslint from '@nabla/vite-plugin-eslint'
 import autoprefixer from 'autoprefixer'
 import tailwind from 'tailwindcss'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 
 const getCommitHash = () => {
   const rev = fs.readFileSync('.git/HEAD').toString().trim();
@@ -16,24 +16,41 @@ const getCommitHash = () => {
 };
 
 // https://vite.dev/config/
-export default defineConfig({
-  css: {
-    postcss: {
-      plugins: [tailwind(), autoprefixer()],
+export default defineConfig(({ mode }) => {
+  // Load environment variables based on the current mode
+  const env = loadEnv(mode, process.cwd(), '')
+  
+  // Define default values that can be overridden by environment variables
+  const envDefaults = {
+    VITE_CTOKENS_API_URL: env.VITE_CTOKENS_API_URL || 'http://localhost:3000',
+    VITE_HIVE_NODE_ENDPOINT: env.VITE_HIVE_NODE_ENDPOINT || 'https://api.hive.blog',
+    VITE_HIVE_CHAIN_ID: env.VITE_HIVE_CHAIN_ID || '42'
+  }
+
+  return {
+    css: {
+      postcss: {
+        plugins: [tailwind(), autoprefixer()],
+      },
+    },
+    plugins: [
+      vue(),
+      eslint({
+        shouldLint: (path) => path.includes('src/') && (path.endsWith('.vue') || path.endsWith('.ts') || path.endsWith('.js'))
+      })
+    ],
+    resolve: {
+      alias: {
+        '@': path.resolve(import.meta.dirname, './src'),
+      },
     },
-  },
-  plugins: [
-    vue(),
-    eslint({
-      shouldLint: (path) => path.includes('src/') && (path.endsWith('.vue') || path.endsWith('.ts') || path.endsWith('.js'))
-    })
-  ],
-  resolve: {
-    alias: {
-      '@': path.resolve(import.meta.dirname, './src'),
+    define: {
+      __COMMIT_HASH__: JSON.stringify(getCommitHash()),
+      // Make environment variables available in the application
+      ...Object.keys(envDefaults).reduce((acc, key) => {
+        acc[`import.meta.env.${key}`] = JSON.stringify(envDefaults[key as keyof typeof envDefaults])
+        return acc
+      }, {} as Record<string, string>)
     },
-  },
-  define: {
-    __COMMIT_HASH__: JSON.stringify(getCommitHash()),
-  },
+  }
 })
-- 
GitLab


From 0568e7212a5783cc78da4c5a1dd5372ff4ef1ac9 Mon Sep 17 00:00:00 2001
From: Bartek Wrona <bwrona@syncad.com>
Date: Fri, 10 Oct 2025 16:42:16 +0000
Subject: [PATCH 018/102] .env file placeholder must be added to the app image

---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 63f8b17..164ed23 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,6 +1,6 @@
 FROM caddy AS app
 COPY ./dist/ /usr/share/caddy/
-
+COPY ./.env.example /usr/share/caddy/.env
 
 RUN cat > /etc/caddy/Caddyfile <<EOF
 
-- 
GitLab


From 481f6ad648d089427552e6ff0face12d88931a22 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Mon, 13 Oct 2025 03:38:50 +0200
Subject: [PATCH 019/102] Change token view

---
 src/components/HTMTokenCard.vue |  28 +-
 src/pages/tokens/list.vue       |  75 ++----
 src/pages/tokens/my-tokens.vue  |   9 +-
 src/pages/tokens/token.vue      | 440 ++++++++++++++++----------------
 src/stores/tokens.store.ts      | 134 +++++++++-
 5 files changed, 374 insertions(+), 312 deletions(-)

diff --git a/src/components/HTMTokenCard.vue b/src/components/HTMTokenCard.vue
index 8b38c9c..a9c82ca 100644
--- a/src/components/HTMTokenCard.vue
+++ b/src/components/HTMTokenCard.vue
@@ -3,40 +3,20 @@ import { mdiInfinity } from '@mdi/js';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-
-export interface CToken {
-  nai: string;
-  isStaked: boolean;
-  ownerPublicKey: string;
-  precision: number;
-  displayTotalSupply: string;
-  totalSupply: bigint;
-  maxSupply: bigint;
-  displayMaxSupply: string;
-  capped: boolean;
-  othersCanStake: boolean;
-  othersCanUnstake: boolean;
-  isNft: boolean;
-  metadata?: Record<string, unknown>;
-  // Parsed from the metadata
-  name?: string;
-  description?: string;
-  website?: string;
-  image?: string;
-}
+import type { CTokenDisplay } from '@/stores/tokens.store';
 
 interface Props {
-  token: CToken;
+  token: CTokenDisplay;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-  click: [token: CToken];
+  click: [token: CTokenDisplay];
 }>();
 
 // Get avatar fallback text
-const getAvatarFallback = (token: CToken): string => {
+const getAvatarFallback = (token: CTokenDisplay): string => {
   if (token.name)
     return token.name.slice(0, 2).toUpperCase();
 
diff --git a/src/pages/tokens/list.vue b/src/pages/tokens/list.vue
index d3f2840..81c20be 100644
--- a/src/pages/tokens/list.vue
+++ b/src/pages/tokens/list.vue
@@ -2,79 +2,44 @@
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import HTMTokenCard, { type CToken } from '@/components/HTMTokenCard.vue';
+import HTMTokenCard from '@/components/HTMTokenCard.vue';
 import HTMView from '@/components/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { getWax } from '@/stores/wax.store';
+import { useTokensStore, type CTokenDisplay } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
-import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 
 // Router
 const router = useRouter();
 
+// Store
+const tokensStore = useTokensStore();
+
 // State
-const tokensFullList = ref<CToken[]>([]);
-const isLoading = ref(false);
 const currentPage = ref(0);
 const hasMorePages = ref(true);
 
 // Navigate to token detail page (placeholder for now)
-const viewTokenDetails = (token: CToken) => {
+const viewTokenDetails = (token: CTokenDisplay) => {
   router.push(`/tokens/token?nai=${token.nai}&precision=${token.precision}`);
 };
 
 const loadTokens = async (page: number = 1) => {
   try {
-    isLoading.value = true;
-
-    const wax = await getWax();
-    const formatAsset = (value: string | bigint, precision: number, name?: string): string => {
-      const formatted = wax.formatter.formatNumber(value, precision);
-
-      return name ? `${formatted} ${name}` : formatted;
-    };
-    // Temporary naive implementation of vesting space check
-    const isVesting = (nai: string, precision: number) => (((Number(nai.slice(2, -1)) << 5) | 0x10 | precision) & 0x20) != 0;
-
-    const tokens = await wax.restApi.ctokensApi.registeredTokens({}) as Required<CtokensAppToken>[];
-
-    tokensFullList.value.push(...tokens.map(token => {
-      const { name, description, website, image } = (token.metadata || {}) as Record<string, string>;
-
-      return {
-        nai: token.nai,
-        isStaked: isVesting(token.nai, token.precision),
-        displayMaxSupply: formatAsset(token.max_supply, token.precision, name),
-        ownerPublicKey: token.owner,
-        precision: token.precision,
-        displayTotalSupply: formatAsset(token.total_supply, token.precision, name),
-        totalSupply: BigInt(token.total_supply),
-        maxSupply: BigInt(token.max_supply),
-        capped: token.capped,
-        othersCanStake: token.others_can_stake,
-        othersCanUnstake: token.others_can_unstake,
-        isNft: token.is_nft,
-        metadata: token.metadata,
-        name,
-        description,
-        website,
-        image
-      } as CToken;
-    }));
+    const result = await tokensStore.loadRegisteredTokens(undefined, undefined, page);
 
-    hasMorePages.value = tokens.length === 100; // API returns 100 results per page
-    currentPage.value = page;
+    if (result) {
+      hasMorePages.value = result.hasMore;
+      currentPage.value = page;
+    }
   } catch (error) {
     toastError('Failed to load tokens', error);
-  } finally {
-    isLoading.value = false;
   }
 };
 
 const loadMore = () => {
-  if (!hasMorePages.value || isLoading.value) return;
+  if (!hasMorePages.value || tokensStore.isLoadingRegisteredTokens) return;
   void loadTokens(currentPage.value + 1);
 };
 
@@ -101,7 +66,7 @@ onMounted(() => {
 
       <!-- Loading Skeletons -->
       <div
-        v-if="isLoading && tokensFullList.length === 0"
+        v-if="tokensStore.isLoadingRegisteredTokens && tokensStore.registeredTokens.length === 0"
         class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
       >
         <Card
@@ -131,11 +96,11 @@ onMounted(() => {
 
       <!-- Tokens Grid -->
       <div
-        v-else-if="tokensFullList.length > 0"
+        v-else-if="tokensStore.registeredTokens.length > 0"
         class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
       >
         <HTMTokenCard
-          v-for="token in tokensFullList"
+          v-for="token in tokensStore.registeredTokens"
           :key="token.nai"
           :token="token"
           @click="viewTokenDetails"
@@ -144,16 +109,16 @@ onMounted(() => {
 
       <!-- Load More Button -->
       <div
-        v-if="tokensFullList.length > 0 && hasMorePages"
+        v-if="tokensStore.registeredTokens.length > 0 && hasMorePages"
         class="text-center pt-4"
       >
         <Button
           variant="outline"
-          :disabled="isLoading"
+          :disabled="tokensStore.isLoadingRegisteredTokens"
           @click="loadMore"
         >
           <svg
-            v-if="isLoading"
+            v-if="tokensStore.isLoadingRegisteredTokens"
             width="16"
             height="16"
             xmlns="http://www.w3.org/2000/svg"
@@ -165,12 +130,12 @@ onMounted(() => {
               d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
             />
           </svg>
-          {{ isLoading ? 'Loading...' : 'Load More Tokens' }}
+          {{ tokensStore.isLoadingRegisteredTokens ? 'Loading...' : 'Load More Tokens' }}
         </Button>
       </div>
 
       <!-- Empty State -->
-      <Card v-else-if="tokensFullList.length === 0 && !isLoading">
+      <Card v-else-if="tokensStore.registeredTokens.length === 0 && !tokensStore.isLoadingRegisteredTokens">
         <CardContent class="text-center py-12">
           <svg
             width="64"
diff --git a/src/pages/tokens/my-tokens.vue b/src/pages/tokens/my-tokens.vue
index 1b9437b..723696e 100644
--- a/src/pages/tokens/my-tokens.vue
+++ b/src/pages/tokens/my-tokens.vue
@@ -7,12 +7,13 @@ import {
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import HTMTokenCard, { type CToken } from '@/components/HTMTokenCard.vue';
+import HTMTokenCard from '@/components/HTMTokenCard.vue';
 import HTMView from '@/components/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useSettingsStore } from '@/stores/settings.store';
+import type { CTokenDisplay } from '@/stores/tokens.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
@@ -22,7 +23,7 @@ const router = useRouter();
 const settingsStore = useSettingsStore();
 
 // State
-const tokensFullList = ref<CToken[]>([]);
+const tokensFullList = ref<CTokenDisplay[]>([]);
 const isLoading = ref(false);
 const currentPage = ref(0);
 const hasMorePages = ref(true);
@@ -53,7 +54,7 @@ const getUserPublicKey = async (): Promise<string | undefined> => {
 };
 
 // Navigate to token detail page
-const viewTokenDetails = (token: CToken) => {
+const viewTokenDetails = (token: CTokenDisplay) => {
   router.push(`/tokens/token?nai=${token.nai}&precision=${token.precision}`);
 };
 
@@ -106,7 +107,7 @@ const loadTokens = async (page: number = 1) => {
         description,
         website,
         image
-      } as CToken;
+      } as CTokenDisplay;
     }));
 
     hasMorePages.value = userTokens.length === 100; // API returns 100 results per page
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 98626e6..aff02dc 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { mdiPencilOutline } from '@mdi/js';
 import { onMounted, ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -75,39 +76,32 @@ const formattedTotalSupply = ref('0');
 const formattedMaxSupply = ref('0');
 const formattedUserBalance = ref('0.000');
 
-// Helper function to update formatted values
+// Update formatted values
 const updateFormattedValues = async () => {
   if (!token.value) return;
 
-  const wax = await getWax();
-
-  formattedTotalSupply.value = wax.formatter.formatNumber(
-    token.value.total_supply || '0',
-    token.value.precision || 0
-  );
-
-  if (token.value.max_supply === '0')
-    formattedMaxSupply.value = '∞';
-  else {
-    formattedMaxSupply.value = wax.formatter.formatNumber(
-      token.value.max_supply || '0',
-      token.value.precision || 0
-    );
-  }
-
-  if (userBalance.value) {
-    formattedUserBalance.value = wax.formatter.formatNumber(
-      userBalance.value.amount || '0',
-      userBalance.value.precision || 0
-    );
+  try {
+    const wax = await getWax();
+    const formatAsset = (value: string, precision: number, name?: string): string => {
+      const formatted = wax.formatter.formatNumber(value, precision);
+      return name ? `${formatted} ${name}` : formatted;
+    };
+
+    formattedTotalSupply.value = formatAsset(token.value.total_supply!, token.value.precision || 0, tokenSymbol.value);
+    formattedMaxSupply.value = token.value.max_supply === '0'
+      ? '∞ (Unlimited)'
+      : formatAsset(token.value.max_supply!, token.value.precision || 0, tokenSymbol.value);
+
+    if (userBalance.value)
+      formattedUserBalance.value = formatAsset(userBalance.value.amount!, token.value.precision || 0, tokenSymbol.value);
+  } catch (error) {
+    console.error('Failed to format values:', error);
   }
 };
 
 // Load token details
 const loadTokenDetails = async () => {
   try {
-    isLoading.value = true;
-
     const wax = await getWax();
 
     // Fetch token details by NAI
@@ -144,10 +138,6 @@ const loadTokenDetails = async () => {
 
   } catch (error) {
     toastError('Failed to load token details', error);
-    // Redirect back to tokens list on error
-    router.push('/tokens/list');
-  } finally {
-    isLoading.value = false;
   }
 };
 
@@ -208,18 +198,30 @@ const goBack = () => {
   router.push('/tokens/list');
 };
 
+// Navigate to edit token (placeholder for now)
+const editToken = () => {
+  // TODO: Implement token editing functionality
+  console.log('Edit token:', token.value?.nai);
+};
+
 // Initialize
 onMounted(async () => {
-  await loadTokenDetails();
-  await loadTopHolders();
+  isLoading.value = true;
+
+  await Promise.allSettled([
+    loadTokenDetails(),
+    loadTopHolders()
+  ]);
+
+  isLoading.value = false;
 });
 </script>
 
 <template>
-  <HTMView :is-public-page="false">
+  <HTMView is-public-page>
     <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4">
       <!-- Header with back button -->
-      <div class="flex items-center gap-4">
+      <div class="flex items-center justify-between gap-4">
         <Button
           variant="ghost"
           size="sm"
@@ -240,6 +242,26 @@ onMounted(async () => {
           </svg>
           Back to Tokens
         </Button>
+        <Button
+          variant="default"
+          size="sm"
+          class="gap-2"
+          @click="editToken"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiPencilOutline"
+            />
+          </svg>
+          Edit Token Definition
+        </Button>
       </div>
 
       <!-- Loading State -->
@@ -275,121 +297,174 @@ onMounted(async () => {
         v-else-if="token"
         class="space-y-6"
       >
-        <!-- Token Header -->
-        <div class="flex flex-col sm:flex-row items-start gap-6 p-6 bg-card rounded-xl border">
-          <Avatar class="h-20 w-20 sm:h-24 sm:w-24 flex-shrink-0">
-            <AvatarImage
-              v-if="tokenImage"
-              :src="tokenImage"
-              :alt="tokenName"
-            />
-            <AvatarFallback class="text-xl sm:text-2xl font-bold bg-primary/10 text-primary">
-              {{ tokenSymbol ? tokenSymbol.slice(0, 2).toUpperCase() : tokenName.slice(0, 2).toUpperCase() }}
-            </AvatarFallback>
-          </Avatar>
-
-          <div class="flex-1 min-w-0">
-            <div class="flex flex-col sm:flex-row sm:items-center gap-3 mb-3">
-              <h1 class="text-2xl sm:text-3xl font-bold text-foreground">
-                {{ tokenName }}
-              </h1>
-              <div class="flex flex-wrap gap-2">
-                <span
-                  v-if="tokenSymbol"
-                  class="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary border border-primary/20"
-                >
-                  {{ tokenSymbol }}
-                </span>
-                <span
-                  v-if="token.is_nft"
-                  class="inline-flex items-center rounded-md bg-purple-500/10 px-2 py-1 text-xs font-medium text-purple-500 border border-purple-500/20"
+        <!-- Token Information Card -->
+        <Card class="overflow-hidden">
+          <CardContent class="p-6">
+            <!-- Main Token Info -->
+            <div class="flex flex-col sm:flex-row items-start gap-6 mb-6">
+              <Avatar class="h-20 w-20 sm:h-24 sm:w-24 flex-shrink-0">
+                <AvatarImage
+                  v-if="tokenImage"
+                  :src="tokenImage"
+                  :alt="tokenName"
+                />
+                <AvatarFallback class="text-xl sm:text-2xl font-bold bg-primary/10 text-primary">
+                  {{ tokenSymbol ? tokenSymbol.slice(0, 2).toUpperCase() : tokenName.slice(0, 2).toUpperCase() }}
+                </AvatarFallback>
+              </Avatar>
+
+              <div class="flex-1 min-w-0">
+                <div class="flex flex-col sm:flex-row sm:items-center gap-3 mb-3">
+                  <h1 class="text-2xl sm:text-3xl font-bold text-foreground">
+                    {{ tokenName }}
+                  </h1>
+                  <div class="flex flex-wrap gap-2">
+                    <span
+                      v-if="tokenSymbol"
+                      class="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary border border-primary/20"
+                    >
+                      {{ tokenSymbol }}
+                    </span>
+                    <span
+                      v-if="token.is_nft"
+                      class="inline-flex items-center rounded-md bg-purple-500/10 px-2 py-1 text-xs font-medium text-purple-500 border border-purple-500/20"
+                    >
+                      NFT
+                    </span>
+                    <span
+                      :class="[
+                        'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
+                        token.capped ? 'bg-orange-500/10 text-orange-500 border-orange-500/20' : 'bg-gray-500/10 text-gray-500 border-gray-500/20'
+                      ]"
+                    >
+                      {{ token.capped ? 'Capped' : 'Uncapped' }}
+                    </span>
+                  </div>
+                </div>
+
+                <p
+                  v-if="tokenDescription"
+                  class="text-muted-foreground text-base mb-4 leading-relaxed"
                 >
-                  NFT
-                </span>
-              </div>
-            </div>
+                  {{ tokenDescription }}
+                </p>
 
-            <p
-              v-if="tokenDescription"
-              class="text-muted-foreground text-base sm:text-lg mb-3 leading-relaxed"
-            >
-              {{ tokenDescription }}
-            </p>
-
-            <div class="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
-              <div class="flex items-center gap-2">
-                <span class="font-medium">NAI:</span>
-                <code class="bg-muted px-2 py-1 rounded font-mono text-xs">{{ token.nai }}</code>
-              </div>
-              <div class="flex items-center gap-2">
-                <span class="font-medium">Precision:</span>
-                <span class="bg-muted px-2 py-1 rounded text-xs">{{ token.precision }} decimals</span>
+                <!-- Technical Details - Compact -->
+                <div class="flex flex-wrap items-center gap-3 text-sm text-muted-foreground mb-4">
+                  <div class="flex items-center gap-1">
+                    <span class="font-medium">NAI:</span>
+                    <code class="bg-muted px-1.5 py-0.5 rounded font-mono text-xs">{{ token.nai }}</code>
+                  </div>
+                  <div class="flex items-center gap-1">
+                    <span class="font-medium">Precision:</span>
+                    <span class="bg-muted px-1.5 py-0.5 rounded text-xs">{{ token.precision }}</span>
+                  </div>
+                  <div class="flex items-center gap-1">
+                    <span class="font-medium">Owner:</span>
+                    <span class="bg-muted px-1.5 py-0.5 rounded text-xs max-w-32 truncate">{{ token.owner }}</span>
+                  </div>
+                </div>
+
+                <!-- Token Properties - Compact -->
+                <div class="flex flex-wrap items-center gap-2 mb-6">
+                  <span
+                    :class="[
+                      'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
+                      token.is_nft ? 'bg-purple-50 text-purple-700 border-purple-200' : 'bg-emerald-50 text-emerald-700 border-emerald-200'
+                    ]"
+                  >
+                    {{ token.is_nft ? 'NFT' : 'Fungible' }}
+                  </span>
+                  <span
+                    :class="[
+                      'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
+                      token.others_can_stake ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
+                    ]"
+                  >
+                    {{ token.others_can_stake ? 'Staking ✓' : 'Staking ✗' }}
+                  </span>
+                  <span
+                    :class="[
+                      'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
+                      token.others_can_unstake ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
+                    ]"
+                  >
+                    {{ token.others_can_unstake ? 'Unstaking ✓' : 'Unstaking ✗' }}
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
 
-        <!-- Token Stats -->
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6">
-          <!-- Total Supply -->
-          <Card class="hover:shadow-md transition-shadow duration-200">
-            <CardHeader class="pb-3">
-              <CardTitle class="text-sm font-medium text-muted-foreground flex items-center gap-2">
-                <div class="w-4 h-4 rounded-full bg-blue-500" />
-                Total Supply
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div class="text-xl sm:text-2xl font-bold text-foreground">
-                {{ formattedTotalSupply }}
-              </div>
-              <p class="text-xs text-muted-foreground mt-1">
-                Current circulating supply
-              </p>
-            </CardContent>
-          </Card>
+            <!-- Stats Grid - Dense Layout -->
+            <div class="border-t pt-6">
+              <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
+                <svg
+                  width="20"
+                  height="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  class="text-primary"
+                >
+                  <path
+                    style="fill: currentColor"
+                    d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z"
+                  />
+                </svg>
+                Token Statistics
+              </h3>
+              <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+                <!-- Total Supply -->
+                <div class="bg-accent/30 rounded-lg p-4 border">
+                  <div class="flex items-center gap-2 mb-2">
+                    <div class="w-3 h-3 rounded-full bg-blue-500" />
+                    <span class="text-xs font-medium text-muted-foreground">Total Supply</span>
+                  </div>
+                  <div class="text-sm font-bold text-foreground truncate">
+                    {{ formattedTotalSupply }}
+                  </div>
+                </div>
 
-          <!-- Max Supply -->
-          <Card class="hover:shadow-md transition-shadow duration-200">
-            <CardHeader class="pb-3">
-              <CardTitle class="text-sm font-medium text-muted-foreground flex items-center gap-2">
-                <div class="w-4 h-4 rounded-full bg-orange-500" />
-                Max Supply
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div class="text-xl sm:text-2xl font-bold text-foreground">
-                {{ formattedMaxSupply }}
-              </div>
-              <p class="text-xs text-muted-foreground mt-1">
-                {{ token.max_supply === '0' ? 'No maximum limit' : 'Maximum possible supply' }}
-              </p>
-            </CardContent>
-          </Card>
+                <!-- Max Supply -->
+                <div class="bg-accent/30 rounded-lg p-4 border">
+                  <div class="flex items-center gap-2 mb-2">
+                    <div class="w-3 h-3 rounded-full bg-orange-500" />
+                    <span class="text-xs font-medium text-muted-foreground">Max Supply</span>
+                  </div>
+                  <div class="text-sm font-bold text-foreground truncate">
+                    {{ formattedMaxSupply }}
+                  </div>
+                </div>
 
-          <!-- Your Balance -->
-          <Card class="hover:shadow-md transition-shadow duration-200">
-            <CardHeader class="pb-3">
-              <CardTitle class="text-sm font-medium text-muted-foreground flex items-center gap-2">
-                <div class="w-4 h-4 rounded-full bg-green-500" />
-                Your Balance
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div class="text-xl sm:text-2xl font-bold text-foreground">
-                {{ isLoggedIn ? formattedUserBalance : '—' }}
+                <!-- Your Balance -->
+                <div class="bg-accent/30 rounded-lg p-4 border">
+                  <div class="flex items-center gap-2 mb-2">
+                    <div class="w-3 h-3 rounded-full bg-green-500" />
+                    <span class="text-xs font-medium text-muted-foreground">Your Balance</span>
+                  </div>
+                  <div class="text-sm font-bold text-foreground truncate">
+                    {{ isLoggedIn ? formattedUserBalance : '—' }}
+                  </div>
+                </div>
+
+                <!-- Market Cap Placeholder -->
+                <div class="bg-accent/30 rounded-lg p-4 border">
+                  <div class="flex items-center gap-2 mb-2">
+                    <div class="w-3 h-3 rounded-full bg-purple-500" />
+                    <span class="text-xs font-medium text-muted-foreground">Market Cap</span>
+                  </div>
+                  <div class="text-sm font-bold text-foreground">
+                    —
+                  </div>
+                </div>
               </div>
-              <p class="text-xs text-muted-foreground mt-1">
-                {{ isLoggedIn ? 'Current balance' : 'Connect wallet to view' }}
-              </p>
-            </CardContent>
-          </Card>
-        </div>
+            </div>
+          </CardContent>
+        </Card>
 
         <!-- Actions Section -->
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
           <!-- Transfer Section -->
-          <Card class="h-fit">
+          <Card class="flex flex-col h-full">
             <CardHeader>
               <CardTitle class="flex items-center gap-2">
                 <svg
@@ -410,7 +485,7 @@ onMounted(async () => {
                 Send {{ tokenSymbol || tokenName }} to another account
               </CardDescription>
             </CardHeader>
-            <CardContent class="space-y-6">
+            <CardContent class="space-y-6 flex-1">
               <div
                 v-if="!isLoggedIn"
                 class="text-center py-12 space-y-4"
@@ -561,7 +636,7 @@ onMounted(async () => {
           </Card>
 
           <!-- Top Holders Section -->
-          <Card class="h-fit">
+          <Card class="flex flex-col h-full">
             <CardHeader>
               <CardTitle class="flex items-center gap-2">
                 <svg
@@ -582,7 +657,7 @@ onMounted(async () => {
                 Accounts with the largest {{ tokenSymbol || tokenName }} balances
               </CardDescription>
             </CardHeader>
-            <CardContent>
+            <CardContent class="flex-1">
               <div
                 v-if="isLoadingHolders"
                 class="space-y-4"
@@ -687,95 +762,6 @@ onMounted(async () => {
             </CardContent>
           </Card>
         </div>
-
-        <!-- Additional Token Info -->
-        <Card>
-          <CardHeader>
-            <CardTitle class="flex items-center gap-2">
-              <svg
-                width="20"
-                height="20"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="text-primary"
-              >
-                <path
-                  style="fill: currentColor"
-                  d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-                />
-              </svg>
-              Token Information
-            </CardTitle>
-            <CardDescription>
-              Detailed properties and configuration for this token
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-              <div class="space-y-6">
-                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 rounded-lg border bg-accent/30">
-                  <span class="text-sm font-medium text-muted-foreground">Token Owner</span>
-                  <code class="text-sm font-mono bg-muted px-2 py-1 rounded break-all">{{ token.owner }}</code>
-                </div>
-
-                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 rounded-lg border bg-accent/30">
-                  <span class="text-sm font-medium text-muted-foreground">Decimal Precision</span>
-                  <span class="font-semibold">{{ token.precision }} decimals</span>
-                </div>
-
-                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 rounded-lg border bg-accent/30">
-                  <span class="text-sm font-medium text-muted-foreground">Supply Capped</span>
-                  <span
-                    class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border"
-                    :class="token.capped
-                      ? 'bg-green-50 text-green-700 border-green-200'
-                      : 'bg-gray-50 text-gray-700 border-gray-200'"
-                  >
-                    {{ token.capped ? 'Yes' : 'No' }}
-                  </span>
-                </div>
-              </div>
-
-              <div class="space-y-6">
-                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 rounded-lg border bg-accent/30">
-                  <span class="text-sm font-medium text-muted-foreground">Others Can Stake</span>
-                  <span
-                    class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border"
-                    :class="token.others_can_stake
-                      ? 'bg-blue-50 text-blue-700 border-blue-200'
-                      : 'bg-gray-50 text-gray-700 border-gray-200'"
-                  >
-                    {{ token.others_can_stake ? 'Enabled' : 'Disabled' }}
-                  </span>
-                </div>
-
-                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 rounded-lg border bg-accent/30">
-                  <span class="text-sm font-medium text-muted-foreground">Others Can Unstake</span>
-                  <span
-                    class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border"
-                    :class="token.others_can_unstake
-                      ? 'bg-blue-50 text-blue-700 border-blue-200'
-                      : 'bg-gray-50 text-gray-700 border-gray-200'"
-                  >
-                    {{ token.others_can_unstake ? 'Enabled' : 'Disabled' }}
-                  </span>
-                </div>
-
-                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 rounded-lg border bg-accent/30">
-                  <span class="text-sm font-medium text-muted-foreground">Token Type</span>
-                  <span
-                    class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border"
-                    :class="token.is_nft
-                      ? 'bg-purple-50 text-purple-700 border-purple-200'
-                      : 'bg-emerald-50 text-emerald-700 border-emerald-200'"
-                  >
-                    {{ token.is_nft ? 'NFT' : 'Fungible' }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
       </div>
     </div>
   </HTMView>
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index cb41ee1..ecaf90c 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { shallowRef } from 'vue';
 
+import { getWax } from '@/stores/wax.store';
 import {
   getCTokensApi,
   getUserOperationalKey
@@ -15,14 +16,71 @@ import type {
 } from '@/utils/wallet/ctokens/api';
 import type CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+export interface CTokenDisplay {
+  nai: string;
+  isStaked: boolean;
+  ownerPublicKey: string;
+  precision: number;
+  displayTotalSupply: string;
+  totalSupply: bigint;
+  maxSupply: bigint;
+  displayMaxSupply: string;
+  capped: boolean;
+  othersCanStake: boolean;
+  othersCanUnstake: boolean;
+  isNft: boolean;
+  metadata?: Record<string, unknown>;
+  // Parsed from the metadata
+  name?: string;
+  description?: string;
+  website?: string;
+  image?: string;
+}
+
 const cTokensProvider = shallowRef<CTokensProvider | undefined>(undefined);
 
+// Helper functions for token transformation
+const isVesting = (nai: string, precision: number): boolean =>
+  (((Number(nai.slice(2, -1)) << 5) | 0x10 | precision) & 0x20) !== 0;
+
+const formatAsset = async (value: string | bigint, precision: number, name?: string): Promise<string> => {
+  const wax = await getWax();
+  const formatted = wax.formatter.formatNumber(value, precision);
+  return name ? `${formatted} ${name}` : formatted;
+};
+
+const transformTokenToDisplayFormat = async (token: Required<CtokensAppToken>): Promise<CTokenDisplay> => {
+  const { name, description, website, image } = (token.metadata || {}) as Record<string, string>;
+
+  return {
+    nai: token.nai,
+    isStaked: isVesting(token.nai, token.precision),
+    displayMaxSupply: await formatAsset(token.max_supply, token.precision, name),
+    ownerPublicKey: token.owner,
+    precision: token.precision,
+    displayTotalSupply: await formatAsset(token.total_supply, token.precision, name),
+    totalSupply: BigInt(token.total_supply),
+    maxSupply: BigInt(token.max_supply),
+    capped: token.capped,
+    othersCanStake: token.others_can_stake,
+    othersCanUnstake: token.others_can_unstake,
+    isNft: token.is_nft,
+    metadata: token.metadata as Record<string, unknown>,
+    name,
+    description,
+    website,
+    image
+  };
+};
+
 export const useTokensStore = defineStore('tokens', {
   state: () => ({
     balances: [] as CtokensAppArrayOfBalances,
     tokenDefinitions: [] as CtokensAppArrayOfTokens,
+    registeredTokens: [] as CTokenDisplay[],
     isLoadingBalances: false,
     isLoadingTokens: false,
+    isLoadingRegisteredTokens: false,
     lastError: null as string | null
   }),
   getters: {
@@ -37,7 +95,24 @@ export const useTokensStore = defineStore('tokens', {
     },
     tokenCount: (state) => state.balances.length,
     hasBalances: (state) => state.balances.length > 0,
-    hasTokenDefinitions: (state) => state.tokenDefinitions.length > 0
+    hasTokenDefinitions: (state) => state.tokenDefinitions.length > 0,
+    hasRegisteredTokens: (state) => state.registeredTokens.length > 0,
+    // Filtered getters for registered tokens
+    filteredTokens: (state) => (nai?: string, precision?: number) => {
+      let filtered = state.registeredTokens;
+
+      if (nai)
+        filtered = filtered.filter((token: CTokenDisplay) => token.nai === nai);
+
+      if (precision !== undefined)
+        filtered = filtered.filter((token: CTokenDisplay) => token.precision === precision);
+
+      return filtered;
+    },
+    stakedTokens: (state) => state.registeredTokens.filter((token: CTokenDisplay) => token.isStaked),
+    unstakedTokens: (state) => state.registeredTokens.filter((token: CTokenDisplay) => !token.isStaked),
+    nftTokens: (state) => state.registeredTokens.filter((token: CTokenDisplay) => token.isNft),
+    fungibleTokens: (state) => state.registeredTokens.filter((token: CTokenDisplay) => !token.isNft)
   },
   actions: {
     async loadBalances (forceRefresh = false) {
@@ -142,6 +217,60 @@ export const useTokensStore = defineStore('tokens', {
         this.isLoadingTokens = false;
       }
     },
+    /**
+     * Load registered tokens with pre-formatted display data
+     */
+    async loadRegisteredTokens (nai?: string, precision?: number, page = 1, forceRefresh = false) {
+      if (this.isLoadingRegisteredTokens && !forceRefresh) return;
+
+      this.isLoadingRegisteredTokens = true;
+      this.lastError = null;
+
+      try {
+        const cTokensApi = await getCTokensApi();
+
+        // Get raw tokens from API
+        const tokens = await cTokensApi.getRegisteredTokens(nai, precision) as Required<CtokensAppToken>[];
+
+        console.log(tokens);
+
+        // Transform tokens to display format
+        const transformedTokens = await Promise.all(
+          tokens.map(token => transformTokenToDisplayFormat(token))
+        );
+
+        // For pagination, we append or replace based on page
+        if (page === 1)
+          this.registeredTokens = transformedTokens;
+        else
+          this.registeredTokens.push(...transformedTokens);
+
+        return {
+          tokens: transformedTokens,
+          hasMore: tokens.length === 100 // API returns 100 results per page
+        };
+      } catch (error) {
+        console.error('Failed to load registered tokens:', error);
+        this.lastError = error instanceof Error ? error.message : 'Failed to load registered tokens';
+        throw error;
+      } finally {
+        this.isLoadingRegisteredTokens = false;
+      }
+    },
+    /**
+     * Get filtered registered tokens list
+     */
+    getFilteredRegisteredTokens (nai?: string, precision?: number): CTokenDisplay[] {
+      return this.filteredTokens(nai, precision);
+    },
+    /**
+     * Get single registered token by NAI and precision
+     */
+    getRegisteredTokenByNAI (nai: string, precision?: number): CTokenDisplay | undefined {
+      return this.registeredTokens.find((token: CTokenDisplay) =>
+        token.nai === nai && (precision === undefined || token.precision === precision)
+      );
+    },
     async getBalanceHistory (nai: string, precision: number, page = 1): Promise<CtokensAppBalanceHistory[]> {
       const operationalKey = getUserOperationalKey();
       if (!operationalKey)
@@ -163,7 +292,8 @@ export const useTokensStore = defineStore('tokens', {
     async refreshAll () {
       await Promise.all([
         this.loadBalances(true),
-        this.loadTokenDefinitions(undefined, true)
+        this.loadTokenDefinitions(undefined, true),
+        this.loadRegisteredTokens(undefined, undefined, 1, true)
       ]);
     },
     clearError () {
-- 
GitLab


From 4bf75f8d0e48b76f1a33f008e3a7fa0794f41c2b Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Mon, 13 Oct 2025 14:56:32 +0200
Subject: [PATCH 020/102] Integrate real htm functionality

---
 src/pages/tokens/create.vue           |  50 ++--
 src/pages/tokens/register-account.vue | 128 ++++++++--
 src/utils/htm-utils.ts                | 193 ++++++++++++++++
 src/utils/htm.ts                      | 321 ++++++++++++++++++++++++++
 src/utils/wallet/ctokens/signer.ts    |   8 +
 5 files changed, 666 insertions(+), 34 deletions(-)
 create mode 100644 src/utils/htm-utils.ts
 create mode 100644 src/utils/htm.ts

diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index af882b2..b32f6ea 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -20,9 +20,13 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
+import { useTokensStore } from '@/stores/tokens.store';
 import { copyText } from '@/utils/copy';
-import { createNAIToken, generateNAI as generateNAIUtil, type TokenCreationParams } from '@/utils/nai-tokens';
+import { createHTMAsset, generateNAI as generateHTMNAI, parseAssetAmount } from '@/utils/htm-utils';
 import { toastError } from '@/utils/parse-error';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+const tokensStore = useTokensStore();
 
 // Form state
 const tokenName = ref('');
@@ -31,6 +35,7 @@ const tokenDescription = ref('');
 const initialSupply = ref('1000000');
 const precision = ref('3');
 const canStake = ref(false);
+const capped = ref(true);
 const agreedToDisclaimer = ref(false);
 
 // Loading states
@@ -118,7 +123,7 @@ const generateNAI = () => {
     return;
 
   try {
-    generatedNAI.value = generateNAIUtil(tokenSymbol.value.trim());
+    generatedNAI.value = generateHTMNAI();
     naiGenerated.value = true;
     toast.success('Token ID generated successfully!');
   } catch (error) {
@@ -142,14 +147,25 @@ const copyNAI = async () => {
   }
 };
 
-// Create token
+// Create token using HTM
 const createToken = async () => {
   if (!isFormValid.value) {
     toast.error('Please fill all required fields and agree to disclaimer');
     return;
   }
 
-  // Ensure NAI is generated before creating token
+  // Check if user has a wallet connected
+  if (!tokensStore.wallet) {
+    toast.error('Please connect your HTM wallet first');
+    return;
+  }
+
+  // Get the beekeeper wallet from CTokensProvider
+  const beekeeperWallet = CTokensProvider.getOperationalWallet();
+  if (!beekeeperWallet) {
+    toast.error('Beekeeper wallet not available. Please ensure you are logged in with HTM wallet.');
+    return;
+  }  // Ensure NAI is generated before creating token
   if (!generatedNAI.value) {
     generateNAI();
     // Wait a moment for generation to complete
@@ -164,17 +180,25 @@ const createToken = async () => {
   isCreatingToken.value = true;
 
   try {
-    const params: TokenCreationParams = {
-      symbol: tokenSymbol.value.trim(),
-      name: tokenName.value.trim(),
-      description: tokenDescription.value.trim(),
-      nai: generatedNAI.value,
-      initial_supply: initialSupply.value,
-      precision: parseInt(precision.value),
-      can_stake: canStake.value
+    // Prepare HTM asset definition data
+    const assetData = {
+      identifier: {
+        amount: parseAssetAmount(initialSupply.value, parseInt(precision.value)),
+        nai: generatedNAI.value,
+        precision: parseInt(precision.value)
+      },
+      capped: capped.value,
+      maxSupply: capped.value ? parseAssetAmount(initialSupply.value, parseInt(precision.value)) : '0',
+      owner: tokensStore.wallet.publicKey
     };
 
-    await createNAIToken(params);
+    // Create the HTM asset
+    await createHTMAsset(
+      assetData,
+      beekeeperWallet,
+      'token-creator', // This should be the operational account
+      1.0 // Fee amount
+    );
 
     toast.success('Token created successfully!', {
       description: `Token ${tokenSymbol.value} has been created and deployed to the Hive Token Machine.`
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index 3ffef4c..55ab984 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -9,9 +9,11 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
+import { isValidPublicKey } from '@/utils/htm-utils';
 import { toastError } from '@/utils/parse-error';
 
 const router = useRouter();
+
 const showLoginForm = ref(false);
 const showRegistrationForm = ref(false);
 const isLoading = ref(false);
@@ -21,13 +23,19 @@ const registrationData = ref({
   name: '',           // Account display name
   about: '',          // Description/bio
   website: '',        // Website URL
-  profile_image: ''   // Profile image URL (for now, will be replaced with image hoster in future)
+  profile_image: '',  // Profile image URL (for now, will be replaced with image hoster in future)
+  hiveAccount: '',    // Hive account name
+  managementKey: '',  // Management public key
+  operationalKey: ''  // Operational public key
 });
 
 // Form validation
 const isFormValid = computed(() => {
   return registrationData.value.name.trim().length > 0 &&
-         registrationData.value.about.trim().length > 0;
+         registrationData.value.about.trim().length > 0 &&
+         registrationData.value.hiveAccount.trim().length > 0 &&
+         isValidPublicKey(registrationData.value.managementKey.trim()) &&
+         isValidPublicKey(registrationData.value.operationalKey.trim());
 });
 
 // Show HTM login form
@@ -44,7 +52,10 @@ const goBack = () => {
     name: '',
     about: '',
     website: '',
-    profile_image: ''
+    profile_image: '',
+    hiveAccount: '',
+    managementKey: '',
+    operationalKey: ''
   };
 };
 
@@ -89,28 +100,38 @@ const registerHTMAccount = async () => {
       return;
     }
 
-    // Prepare metadata following the same structure as userStore posting JSON metadata
-    const metadata = {
-      profile: {
-        name: registrationData.value.name.trim(),
-        about: registrationData.value.about.trim(),
-        website: registrationData.value.website.trim() || undefined,
-        profile_image: registrationData.value.profile_image.trim() || undefined
-      }
-    };
+    // Validate public keys
+    if (!isValidPublicKey(registrationData.value.managementKey.trim())) {
+      toast.error('Please enter a valid management public key');
+      return;
+    }
 
-    console.log('HTM Registration Data:', metadata);
+    if (!isValidPublicKey(registrationData.value.operationalKey.trim())) {
+      toast.error('Please enter a valid operational public key');
+      return;
+    }
 
-    // TODO: Implement actual HTM account registration API call
-    // This will need to integrate with the CTokens system
-    // For now, show a detailed message about what would be registered
-    toast.info('HTM Account registration prepared!', {
-      description: `Registration data prepared for: ${metadata.profile.name}. API integration coming soon.`
+    // For now, we'll just show a success message and store the registration data
+    // In a full implementation, this would call the HTM registration
+    toast.success('HTM Account registration prepared!', {
+      description: `Account data for ${registrationData.value.hiveAccount} has been prepared for HTM registration`
+    });
+
+    console.log('HTM Registration Data:', {
+      hiveAccount: registrationData.value.hiveAccount,
+      managementKey: registrationData.value.managementKey,
+      operationalKey: registrationData.value.operationalKey,
+      profile: {
+        name: registrationData.value.name,
+        about: registrationData.value.about,
+        website: registrationData.value.website || undefined,
+        profile_image: registrationData.value.profile_image || undefined
+      }
     });
 
-    // After successful registration, could redirect to login or automatically log in
-    // For now, go back to main options
-    goBack();
+    // After successful registration, redirect to login
+    showRegistrationForm.value = false;
+    showHTMLogin();
 
   } catch (error) {
     toastError('Failed to register HTM account', error);
@@ -222,6 +243,71 @@ const registerHTMAccount = async () => {
             </p>
           </div>
 
+          <!-- HTM Account Configuration -->
+          <div class="border-t pt-6 space-y-4">
+            <h3 class="text-lg font-semibold">
+              HTM Account Configuration
+            </h3>
+            <p class="text-sm text-muted-foreground">
+              Configure your Hive account and cryptographic keys for HTM access
+            </p>
+
+            <!-- Hive Account (required) -->
+            <div class="space-y-2">
+              <Label for="hive-account">
+                Hive Account Name *
+              </Label>
+              <Input
+                id="hive-account"
+                v-model="registrationData.hiveAccount"
+                type="text"
+                placeholder="your-hive-account"
+                required
+                pattern="[a-z0-9\-\.]+"
+                maxlength="16"
+              />
+              <p class="text-xs text-muted-foreground">
+                Your existing Hive blockchain account name
+              </p>
+            </div>
+
+            <!-- Management Key (required) -->
+            <div class="space-y-2">
+              <Label for="management-key">
+                Management Public Key *
+              </Label>
+              <Input
+                id="management-key"
+                v-model="registrationData.managementKey"
+                type="text"
+                placeholder="STM..."
+                required
+                class="font-mono text-sm"
+              />
+              <p class="text-xs text-muted-foreground">
+                Your management public key (used for account authority and token creation)
+              </p>
+            </div>
+
+            <!-- Operational Key (required) -->
+            <div class="space-y-2">
+              <Label for="operational-key">
+                Operational Public Key *
+              </Label>
+              <Input
+                id="operational-key"
+                v-model="registrationData.operationalKey"
+                type="text"
+                placeholder="STM..."
+                required
+                class="font-mono text-sm"
+              />
+              <p class="text-xs text-muted-foreground">
+                Your operational public key (used for day-to-day operations and transfers)
+              </p>
+            </div>
+          </div>
+
           <!-- Form Actions -->
           <div class="flex gap-3 pt-4">
             <Button
diff --git a/src/utils/htm-utils.ts b/src/utils/htm-utils.ts
new file mode 100644
index 0000000..d08cb81
--- /dev/null
+++ b/src/utils/htm-utils.ts
@@ -0,0 +1,193 @@
+import type { IBeekeeperUnlockedWallet } from '@hiveio/beekeeper';
+import type { TPublicKey } from '@hiveio/wax';
+import { HtmTransaction } from '@mtyszczak-cargo/htm';
+
+import { getWax } from '@/stores/wax.store';
+
+import {
+  HTMTransactionBuilder,
+  type HTMUserSignupData,
+  type HTMAssetDefinitionData,
+  type HTMTokenTransferData,
+  type HTMUserMetadataUpdateData
+} from './htm';
+
+// Re-export types from htm.ts for convenience
+export type {
+  HTMUserSignupData,
+  HTMAssetDefinitionData,
+  HTMTokenTransferData,
+  HTMUserMetadataUpdateData
+} from './htm';
+
+/**
+ * Create and broadcast an HTM user signup transaction
+ * This is the full implementation using HTM library and beekeeper wallets.
+ */
+export async function createHTMUser (
+  signupData: HTMUserSignupData,
+  wallet: IBeekeeperUnlockedWallet,
+  operationalAccount: string
+): Promise<string> {
+  const wax = await getWax();
+
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = operationalAccount;
+
+  // Create L2 HTM transaction for user signup
+  const htmBuilder = await HTMTransactionBuilder.create();
+  htmBuilder.addUserSignup(signupData);
+  await htmBuilder.sign(wallet);
+
+  // Create L1 transaction to broadcast the HTM transaction
+  const l1Tx = await wax.createTransaction();
+  l1Tx.pushOperation(htmBuilder.getTransaction());
+  l1Tx.sign(wallet, signupData.operationalKey);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Tx);
+  return l1Tx.id.toString();
+}/**
+ * Create and broadcast an HTM asset definition transaction
+ * This is the full implementation using HTM library and beekeeper wallets.
+ */
+export async function createHTMAsset (
+  assetData: HTMAssetDefinitionData,
+  wallet: IBeekeeperUnlockedWallet,
+  operationalAccount: string,
+  feeAmount = 1.0
+): Promise<string> {
+  const wax = await getWax();
+
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = operationalAccount;
+
+  // Create L2 HTM transaction for asset definition
+  const htmBuilder = await HTMTransactionBuilder.create();
+  htmBuilder.addAssetDefinition(assetData);
+  await htmBuilder.sign(wallet);
+
+  // Create L1 transaction with fee transfer and HTM operation
+  const l1Tx = await wax.createTransaction();
+
+  // Add fee transfer operation
+  l1Tx.pushOperation({
+    transfer_operation: {
+      from: operationalAccount,
+      to: 'fee.htm',
+      amount: wax.hiveCoins(feeAmount),
+      memo: 'L2 asset creation fee'
+    }
+  });
+
+  // Add HTM asset definition operation
+  l1Tx.pushOperation(htmBuilder.getTransaction());
+
+  // Sign with management key
+  l1Tx.sign(wallet, assetData.owner);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Tx);
+  return l1Tx.id.toString();
+}
+
+/**
+ * Create and broadcast an HTM token transfer transaction
+ * This is the full implementation using HTM library and beekeeper wallets.
+ */
+export async function transferHTMToken (
+  transferData: HTMTokenTransferData,
+  wallet: IBeekeeperUnlockedWallet,
+  operationalAccount: string
+): Promise<string> {
+  const wax = await getWax();
+
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = operationalAccount;
+
+  // Create L2 HTM transaction for token transfer
+  const htmBuilder = await HTMTransactionBuilder.create();
+  htmBuilder.addTokenTransfer(transferData);
+  await htmBuilder.sign(wallet);
+
+  // Create L1 transaction to broadcast the HTM transaction
+  const l1Tx = await wax.createTransaction();
+  l1Tx.pushOperation(htmBuilder.getTransaction());
+  l1Tx.sign(wallet, transferData.sender);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Tx);
+  return l1Tx.id.toString();
+}
+
+/**
+ * Update HTM user metadata
+ * This is the full implementation using HTM library and beekeeper wallets.
+ */
+export async function updateHTMUserMetadata (
+  metadataData: HTMUserMetadataUpdateData,
+  wallet: IBeekeeperUnlockedWallet,
+  operationalAccount: string,
+  managementKey: TPublicKey
+): Promise<string> {
+  const wax = await getWax();
+
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = operationalAccount;
+
+  // Create L2 HTM transaction for metadata update
+  const htmBuilder = await HTMTransactionBuilder.create();
+  htmBuilder.addUserMetadataUpdate(metadataData);
+  await htmBuilder.sign(wallet);
+
+  // Create L1 transaction to broadcast the HTM transaction
+  const l1Tx = await wax.createTransaction();
+  l1Tx.pushOperation(htmBuilder.getTransaction());
+  l1Tx.sign(wallet, managementKey);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Tx);
+  return l1Tx.id.toString();
+}
+
+/**
+ * Generate a random NAI identifier for new tokens
+ */
+export function generateNAI (): string {
+  // Generate a random number between 100000000 and 999999999
+  const randomNum = Math.floor(Math.random() * 900000000) + 100000000;
+  return `@@${randomNum}`;
+}
+
+/**
+ * Validate public key format
+ */
+export function isValidPublicKey (key: string): boolean {
+  return /^STM[A-Za-z0-9]+$/.test(key) && key.length >= 50;
+}
+
+/**
+ * Validate NAI format
+ */
+export function isValidNAI (nai: string): boolean {
+  return /^@@\d{9}$/.test(nai);
+}
+
+/**
+ * Format asset amount with precision
+ */
+export function formatAssetAmount (amount: string | bigint, precision: number, symbol?: string): string {
+  const numAmount = typeof amount === 'string' ? parseFloat(amount) : Number(amount);
+  const divisor = Math.pow(10, precision);
+  const formatted = (numAmount / divisor).toFixed(precision);
+  return symbol ? `${formatted} ${symbol}` : formatted;
+}
+
+/**
+ * Parse asset amount to base units
+ */
+export function parseAssetAmount (amount: string, precision: number): string {
+  const numAmount = parseFloat(amount);
+  const multiplier = Math.pow(10, precision);
+  return Math.floor(numAmount * multiplier).toString();
+}
diff --git a/src/utils/htm.ts b/src/utils/htm.ts
new file mode 100644
index 0000000..8289266
--- /dev/null
+++ b/src/utils/htm.ts
@@ -0,0 +1,321 @@
+/* eslint-disable @typescript-eslint/explicit-member-accessibility */
+import type { IBeekeeperUnlockedWallet } from '@hiveio/beekeeper';
+import type { TPublicKey, IWaxBaseInterface } from '@hiveio/wax';
+import { HtmTransaction } from '@mtyszczak-cargo/htm';
+
+import { getWax } from '@/stores/wax.store';
+
+export interface HTMUserSignupData {
+  hiveAccount: string;
+  managementKey: TPublicKey;
+  operationalKey: TPublicKey;
+}
+
+export interface HTMAssetDefinitionData {
+  identifier: {
+    amount: string;
+    nai: string;
+    precision: number;
+  };
+  capped: boolean;
+  maxSupply: string;
+  owner: TPublicKey;
+}
+
+export interface HTMTokenTransferData {
+  sender: TPublicKey;
+  receiver: TPublicKey;
+  amount: {
+    amount: string;
+    nai: string;
+    precision: number;
+  };
+  memo?: string;
+}
+
+export interface HTMUserMetadataUpdateData {
+  user: TPublicKey;
+  metadata: {
+    key: string;
+    value: string;
+  }[];
+}
+
+/**
+ * HTM Transaction Builder - Utility class for creating and managing HTM transactions
+ */
+export class HTMTransactionBuilder {
+  private transaction: HtmTransaction;
+
+  private constructor (wax: IWaxBaseInterface) {
+    this.transaction = new HtmTransaction(wax);
+  }
+
+  /**
+   * Create a new HTM transaction builder instance
+   */
+  static async create (): Promise<HTMTransactionBuilder> {
+    const wax = await getWax();
+    return new HTMTransactionBuilder(wax);
+  }
+
+  /**
+   * Add user signup operation to the transaction
+   */
+  addUserSignup (data: HTMUserSignupData): this {
+    this.transaction.pushOperation({
+      user_signup_operation: {
+        hive_account: data.hiveAccount,
+        management_key: data.managementKey,
+        operational_key: data.operationalKey
+      }
+    });
+    return this;
+  }
+
+  /**
+   * Add asset definition operation to the transaction
+   */
+  addAssetDefinition (data: HTMAssetDefinitionData): this {
+    this.transaction.pushOperation({
+      asset_definition_operation: data
+    });
+    return this;
+  }
+
+  /**
+   * Add token transfer operation to the transaction
+   */
+  addTokenTransfer (data: HTMTokenTransferData): this {
+    this.transaction.pushOperation({
+      token_transfer_operation: {
+        sender: data.sender,
+        receiver: data.receiver,
+        amount: data.amount,
+        memo: data.memo || ''
+      }
+    });
+    return this;
+  }
+
+  /**
+   * Add user metadata update operation to the transaction
+   */
+  addUserMetadataUpdate (data: HTMUserMetadataUpdateData): this {
+    this.transaction.pushOperation({
+      user_metadata_update_operation: {
+        user: data.user,
+        metadata: {
+          items: data.metadata
+        }
+      }
+    });
+    return this;
+  }
+
+  /**
+   * Sign the transaction with the provided wallet
+   */
+  async sign (wallet: IBeekeeperUnlockedWallet): Promise<this> {
+    this.transaction.sign(wallet);
+    return this;
+  }
+
+  /**
+   * Get the underlying HTM transaction
+   */
+  getTransaction (): HtmTransaction {
+    return this.transaction;
+  }
+
+  /**
+   * Get transaction JSON representation
+   */
+  toJSON (): string {
+    return this.transaction.toString();
+  }
+
+  /**
+   * Check if transaction is signed
+   */
+  isSigned (): boolean {
+    return this.transaction.isSigned();
+  }
+
+  /**
+   * Get impacted public keys
+   */
+  getImpactedKeys (): Iterable<TPublicKey> {
+    return this.transaction.impactedPublicKeys;
+  }
+}
+
+/**
+ * Create and broadcast an HTM user signup transaction
+ */
+export async function createHTMUser (
+  signupData: HTMUserSignupData,
+  wallet: IBeekeeperUnlockedWallet,
+  operationalAccount: string
+): Promise<string> {
+  const wax = await getWax();
+
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = operationalAccount;
+
+  // Create L2 transaction for user signup
+  const htmBuilder = await HTMTransactionBuilder.create();
+  htmBuilder.addUserSignup(signupData);
+  await htmBuilder.sign(wallet);
+
+  // Create L1 transaction to broadcast the HTM transaction
+  const l1Tx = await wax.createTransaction();
+  l1Tx.pushOperation(htmBuilder.getTransaction());
+  l1Tx.sign(wallet, signupData.operationalKey);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Tx);
+  return l1Tx.id.toString();
+}
+
+/**
+ * Create and broadcast an HTM asset definition transaction
+ */
+export async function createHTMAsset (
+  assetData: HTMAssetDefinitionData,
+  wallet: IBeekeeperUnlockedWallet,
+  operationalAccount: string,
+  feeAmount = 1.0
+): Promise<string> {
+  const wax = await getWax();
+
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = operationalAccount;
+
+  // Create L2 transaction for asset definition
+  const htmBuilder = await HTMTransactionBuilder.create();
+  htmBuilder.addAssetDefinition(assetData);
+  await htmBuilder.sign(wallet);
+
+  // Create L1 transaction with fee transfer and HTM operation
+  const l1Tx = await wax.createTransaction();
+
+  // Add fee transfer operation
+  l1Tx.pushOperation({
+    transfer_operation: {
+      from: operationalAccount,
+      to: 'fee.htm',
+      amount: wax.hiveCoins(feeAmount),
+      memo: 'L2 asset creation fee'
+    }
+  });
+
+  // Add HTM asset definition operation
+  l1Tx.pushOperation(htmBuilder.getTransaction());
+
+  // Sign with management key
+  l1Tx.sign(wallet, assetData.owner);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Tx);
+  return l1Tx.id.toString();
+}
+
+/**
+ * Create and broadcast an HTM token transfer transaction
+ */
+export async function transferHTMToken (
+  transferData: HTMTokenTransferData,
+  wallet: IBeekeeperUnlockedWallet,
+  operationalAccount: string
+): Promise<string> {
+  const wax = await getWax();
+
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = operationalAccount;
+
+  // Create L2 transaction for token transfer
+  const htmBuilder = await HTMTransactionBuilder.create();
+  htmBuilder.addTokenTransfer(transferData);
+  await htmBuilder.sign(wallet);
+
+  // Create L1 transaction to broadcast the HTM transaction
+  const l1Tx = await wax.createTransaction();
+  l1Tx.pushOperation(htmBuilder.getTransaction());
+  l1Tx.sign(wallet, transferData.sender);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Tx);
+  return l1Tx.id.toString();
+}
+
+/**
+ * Update HTM user metadata
+ */
+export async function updateHTMUserMetadata (
+  metadataData: HTMUserMetadataUpdateData,
+  wallet: IBeekeeperUnlockedWallet,
+  operationalAccount: string,
+  managementKey: TPublicKey
+): Promise<string> {
+  const wax = await getWax();
+
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = operationalAccount;
+
+  // Create L2 transaction for metadata update
+  const htmBuilder = await HTMTransactionBuilder.create();
+  htmBuilder.addUserMetadataUpdate(metadataData);
+  await htmBuilder.sign(wallet);
+
+  // Create L1 transaction to broadcast the HTM transaction
+  const l1Tx = await wax.createTransaction();
+  l1Tx.pushOperation(htmBuilder.getTransaction());
+  l1Tx.sign(wallet, managementKey);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Tx);
+  return l1Tx.id.toString();
+}
+
+/**
+ * Generate a random NAI identifier for new tokens
+ */
+export function generateNAI (): string {
+  // Generate a random number between 100000000 and 999999999
+  const randomNum = Math.floor(Math.random() * 900000000) + 100000000;
+  return `@@${randomNum}`;
+}
+
+/**
+ * Validate public key format
+ */
+export function isValidPublicKey (key: string): boolean {
+  return /^STM[A-Za-z0-9]+$/.test(key) && key.length >= 50;
+}
+
+/**
+ * Validate NAI format
+ */
+export function isValidNAI (nai: string): boolean {
+  return /^@@\d{9}$/.test(nai);
+}
+
+/**
+ * Format asset amount with precision
+ */
+export function formatAssetAmount (amount: string | bigint, precision: number, symbol?: string): string {
+  const numAmount = typeof amount === 'string' ? parseFloat(amount) : Number(amount);
+  const divisor = Math.pow(10, precision);
+  const formatted = (numAmount / divisor).toFixed(precision);
+  return symbol ? `${formatted} ${symbol}` : formatted;
+}
+
+/**
+ * Parse asset amount to base units
+ */
+export function parseAssetAmount (amount: string, precision: number): string {
+  const numAmount = parseFloat(amount);
+  const multiplier = Math.pow(10, precision);
+  return Math.floor(numAmount * multiplier).toString();
+}
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index 04196a2..09080c0 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -37,6 +37,14 @@ export class CTokensProvider extends AEncryptionProvider {
     return CTokensProvider.#operationalWallet?.getPublicKeys()[0];
   }
 
+  public static getOperationalWallet (): IBeekeeperUnlockedWallet | undefined {
+    return CTokensProvider.#operationalWallet;
+  }
+
+  public static getManagementWallet (): IBeekeeperUnlockedWallet | undefined {
+    return CTokensProvider.#managementWallet;
+  }
+
   private constructor (
     chain: IHiveChainInterface,
     public readonly role: TRole,
-- 
GitLab


From b7f0d88d928aa3f22e205e5b713f5a655c009ae8 Mon Sep 17 00:00:00 2001
From: Bartek Wrona <wrona@syncad.com>
Date: Fri, 10 Oct 2025 19:08:47 +0200
Subject: [PATCH 021/102] Add secure connection with endpoints

---
 .env.dev | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .env.dev

diff --git a/.env.dev b/.env.dev
new file mode 100644
index 0000000..6923b71
--- /dev/null
+++ b/.env.dev
@@ -0,0 +1,3 @@
+VITE_CTOKENS_API_URL=https://htm.fqdn.pl:10081
+VITE_HIVE_NODE_ENDPOINT=https://htm.fqdn.pl:18091
+VITE_HIVE_CHAIN_ID=42
-- 
GitLab


From 0ae0100a9af14d7af8508d5b237c8fa68c5078ae Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Tue, 14 Oct 2025 08:41:31 +0200
Subject: [PATCH 022/102] Add HTM registration

---
 src/pages/tokens/register-account.vue | 317 +++++++++++++++++++++-----
 1 file changed, 264 insertions(+), 53 deletions(-)

diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index 55ab984..464ed99 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import type { IBeekeeperInstance, IBeekeeperOptions } from '@hiveio/beekeeper';
+import { HtmTransaction } from '@mtyszczak-cargo/htm';
+import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
@@ -9,8 +11,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
-import { isValidPublicKey } from '@/utils/htm-utils';
+import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 const router = useRouter();
 
@@ -20,13 +23,16 @@ const isLoading = ref(false);
 
 // Registration form data - following the same structure as userStore posting JSON metadata
 const registrationData = ref({
-  name: '',           // Account display name
-  about: '',          // Description/bio
-  website: '',        // Website URL
-  profile_image: '',  // Profile image URL (for now, will be replaced with image hoster in future)
-  hiveAccount: '',    // Hive account name
-  managementKey: '',  // Management public key
-  operationalKey: ''  // Operational public key
+  name: '',                 // Account display name
+  about: '',                // Description/bio
+  website: '',              // Website URL
+  profile_image: '',        // Profile image URL (for now, will be replaced with image hoster in future)
+  hiveAccount: '',          // Hive account name
+  hivePostingPrivateKey: '',// Hive posting private key (WIF format) - needed to sign L1 transaction
+  managementPrivateKey: '', // Management private key (WIF format)
+  operationalPrivateKey: '',// Operational private key (WIF format)
+  walletPassword: '',       // Password to encrypt the wallet
+  repeatPassword: ''        // Password confirmation
 });
 
 // Form validation
@@ -34,10 +40,54 @@ const isFormValid = computed(() => {
   return registrationData.value.name.trim().length > 0 &&
          registrationData.value.about.trim().length > 0 &&
          registrationData.value.hiveAccount.trim().length > 0 &&
-         isValidPublicKey(registrationData.value.managementKey.trim()) &&
-         isValidPublicKey(registrationData.value.operationalKey.trim());
+         registrationData.value.hivePostingPrivateKey.trim().length > 0 &&
+         registrationData.value.operationalPrivateKey.trim().length > 0 &&
+         registrationData.value.walletPassword.trim().length > 0 &&
+         registrationData.value.repeatPassword.trim().length > 0 &&
+         registrationData.value.walletPassword === registrationData.value.repeatPassword;
 });
 
+// Validation: Check if keys are different
+const keysValidationError = computed(() => {
+  const hiveKey = registrationData.value.hivePostingPrivateKey.trim();
+  const operationalKey = registrationData.value.operationalPrivateKey.trim();
+  const managementKey = registrationData.value.managementPrivateKey.trim();
+
+  if (!hiveKey || !operationalKey) return null;
+
+  if (hiveKey === operationalKey)
+    return 'Hive Posting Key and HTM Operational Key must be different!';
+
+  if (managementKey && hiveKey === managementKey)
+    return 'Hive Posting Key and HTM Management Key must be different!';
+
+  if (managementKey && operationalKey === managementKey)
+    return 'HTM Operational Key and HTM Management Key must be different!';
+
+  return null;
+});
+
+// Generate new HTM keys
+const generateHTMKeys = async () => {
+  try {
+    const wax = await getWax();
+
+    // Generate operational key
+    const operationalBrainKey = wax.suggestBrainKey();
+    registrationData.value.operationalPrivateKey = operationalBrainKey.wifPrivateKey;
+
+    // Generate management key (optional, but recommended)
+    const managementBrainKey = wax.suggestBrainKey();
+    registrationData.value.managementPrivateKey = managementBrainKey.wifPrivateKey;
+
+    toast.success('HTM keys generated successfully!', {
+      description: 'New operational and management keys have been created'
+    });
+  } catch (error) {
+    toastError('Failed to generate HTM keys', error);
+  }
+};
+
 // Show HTM login form
 const showHTMLogin = () => {
   showLoginForm.value = true;
@@ -54,8 +104,11 @@ const goBack = () => {
     website: '',
     profile_image: '',
     hiveAccount: '',
-    managementKey: '',
-    operationalKey: ''
+    hivePostingPrivateKey: '',
+    managementPrivateKey: '',
+    operationalPrivateKey: '',
+    walletPassword: '',
+    repeatPassword: ''
   };
 };
 
@@ -88,6 +141,18 @@ const registerHTMAccount = async () => {
       return;
     }
 
+    // Validate that keys are different
+    if (keysValidationError.value) {
+      toast.error(keysValidationError.value);
+      return;
+    }
+
+    // Validate passwords match
+    if (registrationData.value.walletPassword !== registrationData.value.repeatPassword) {
+      toast.error('Passwords do not match');
+      return;
+    }
+
     // Validate website URL if provided
     if (registrationData.value.website && !isValidUrl(registrationData.value.website)) {
       toast.error('Please enter a valid website URL');
@@ -100,35 +165,70 @@ const registerHTMAccount = async () => {
       return;
     }
 
-    // Validate public keys
-    if (!isValidPublicKey(registrationData.value.managementKey.trim())) {
-      toast.error('Please enter a valid management public key');
-      return;
-    }
+    // Get wax instance
+    const wax = await getWax();
 
-    if (!isValidPublicKey(registrationData.value.operationalKey.trim())) {
-      toast.error('Please enter a valid operational public key');
-      return;
-    }
+    // Create temporary beekeeper wallet to import keys and derive public keys
+    toast.info('Creating HTM wallet...');
 
-    // For now, we'll just show a success message and store the registration data
-    // In a full implementation, this would call the HTM registration
-    toast.success('HTM Account registration prepared!', {
-      description: `Account data for ${registrationData.value.hiveAccount} has been prepared for HTM registration`
-    });
+    const beekeeper = await (import('@hiveio/beekeeper/vite') as unknown as Promise<{ createBeekeeper: (options: Partial<IBeekeeperOptions>) => Promise<IBeekeeperInstance> }>)
+      .then(bk => bk.createBeekeeper({ enableLogs: false, inMemory: true }));
+
+    const tempSession = beekeeper.createSession(Math.random().toString());
+    const tempWalletName = `registration-${Date.now()}`;
+
+    const { wallet: tempWallet } = await tempSession.createWallet(tempWalletName, 'temp-password', true);
+
+    const hivePostingPublicKey = await tempWallet.importKey(registrationData.value.hivePostingPrivateKey.trim());
+    const operationalPublicKey = await tempWallet.importKey(registrationData.value.operationalPrivateKey.trim());
 
-    console.log('HTM Registration Data:', {
-      hiveAccount: registrationData.value.hiveAccount,
-      managementKey: registrationData.value.managementKey,
-      operationalKey: registrationData.value.operationalKey,
-      profile: {
-        name: registrationData.value.name,
-        about: registrationData.value.about,
-        website: registrationData.value.website || undefined,
-        profile_image: registrationData.value.profile_image || undefined
+    let managementPublicKey: string | undefined;
+    if (registrationData.value.managementPrivateKey.trim().length > 0)
+      managementPublicKey = await tempWallet.importKey(registrationData.value.managementPrivateKey.trim());
+
+    const finalManagementKey = managementPublicKey || operationalPublicKey;
+
+    // Create HTM wallet for persistent storage
+    await CTokensProvider.createWallet(
+      registrationData.value.walletPassword,
+      registrationData.value.operationalPrivateKey.trim(),
+      registrationData.value.managementPrivateKey.trim() || undefined
+    );
+
+    // Set proxy account for HTM transactions
+    HtmTransaction.HiveProxyAccount = registrationData.value.hiveAccount;
+
+    // Create Layer 2 HTM transaction for user signup
+    toast.info('Preparing HTM registration transaction...');
+    const l2Transaction = new HtmTransaction(wax);
+
+    l2Transaction.pushOperation({
+      user_signup_operation: {
+        hive_account: registrationData.value.hiveAccount,
+        management_key: finalManagementKey,
+        operational_key: operationalPublicKey
       }
     });
 
+    l2Transaction.sign(tempWallet);
+
+    // Create Layer 1 transaction and broadcast
+    const l1Transaction = await wax.createTransaction();
+    l1Transaction.pushOperation(l2Transaction);
+
+    // Sign Layer 1 transaction with the Hive posting key
+    toast.info('Signing transaction with Hive posting key...');
+    l1Transaction.sign(tempWallet, hivePostingPublicKey);
+
+    // Broadcast the transaction
+    toast.info('Broadcasting HTM registration transaction...');
+    await wax.broadcast(l1Transaction);
+
+    // Success!
+    toast.success('HTM Account registered successfully!', {
+      description: `Account ${registrationData.value.hiveAccount} has been registered on the Hive Token Machine`
+    });
+
     // After successful registration, redirect to login
     showRegistrationForm.value = false;
     showHTMLogin();
@@ -252,6 +352,56 @@ const registerHTMAccount = async () => {
               Configure your Hive account and cryptographic keys for HTM access
             </p>
 
+            <!-- Warning about different keys -->
+            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-900 rounded-lg p-4">
+              <div class="flex items-start gap-3">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5 text-yellow-600 dark:text-yellow-500 mt-0.5"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                <div class="flex-1">
+                  <h4 class="text-sm font-semibold text-yellow-800 dark:text-yellow-200">
+                    Important: Use Different Keys!
+                  </h4>
+                  <p class="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
+                    HTM keys must be <strong>different</strong> from your Hive posting key. Use your Hive posting key only for the "Hive Posting Private Key" field. Generate new, separate keys for HTM Operational and Management.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Show validation error if keys are the same -->
+            <div
+              v-if="keysValidationError"
+              class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-900 rounded-lg p-4"
+            >
+              <div class="flex items-center gap-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5 text-red-600 dark:text-red-500"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                <p class="text-sm font-medium text-red-800 dark:text-red-200">
+                  {{ keysValidationError }}
+                </p>
+              </div>
+            </div>
+
             <!-- Hive Account (required) -->
             <div class="space-y-2">
               <Label for="hive-account">
@@ -271,39 +421,100 @@ const registerHTMAccount = async () => {
               </p>
             </div>
 
-            <!-- Management Key (required) -->
+            <!-- Hive Posting Private Key (required) -->
             <div class="space-y-2">
-              <Label for="management-key">
-                Management Public Key *
+              <Label for="hive-posting-private-key">
+                Hive Posting Private Key *
               </Label>
               <Input
-                id="management-key"
-                v-model="registrationData.managementKey"
-                type="text"
-                placeholder="STM..."
+                id="hive-posting-private-key"
+                v-model="registrationData.hivePostingPrivateKey"
+                type="password"
+                placeholder="5..."
                 required
                 class="font-mono text-sm"
               />
               <p class="text-xs text-muted-foreground">
-                Your management public key (used for account authority and token creation)
+                Your Hive posting private key from your <strong>existing Hive account</strong> (required to register on HTM). This is different from HTM keys.
               </p>
             </div>
 
-            <!-- Operational Key (required) -->
+            <!-- Operational Private Key (required) -->
             <div class="space-y-2">
-              <Label for="operational-key">
-                Operational Public Key *
-              </Label>
+              <div class="flex items-center justify-between">
+                <Label for="operational-private-key">
+                  HTM Operational Private Key *
+                </Label>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  @click="generateHTMKeys"
+                >
+                  Generate HTM Keys
+                </Button>
+              </div>
               <Input
-                id="operational-key"
-                v-model="registrationData.operationalKey"
-                type="text"
-                placeholder="STM..."
+                id="operational-private-key"
+                v-model="registrationData.operationalPrivateKey"
+                type="password"
+                placeholder="5... (will be auto-generated)"
                 required
                 class="font-mono text-sm"
               />
               <p class="text-xs text-muted-foreground">
-                Your operational public key (used for day-to-day operations and transfers)
+                HTM operational private key in WIF format (used for day-to-day operations and transfers). Click "Generate HTM Keys" to create new keys automatically.
+              </p>
+            </div>
+
+            <!-- Management Private Key (optional) -->
+            <div class="space-y-2">
+              <Label for="management-private-key">
+                HTM Management Private Key (Optional)
+              </Label>
+              <Input
+                id="management-private-key"
+                v-model="registrationData.managementPrivateKey"
+                type="password"
+                placeholder="5... (auto-generated with Operational Key)"
+                class="font-mono text-sm"
+              />
+              <p class="text-xs text-muted-foreground">
+                HTM management private key in WIF format (optional, used for account authority and token creation). Auto-generated when you click "Generate HTM Keys".
+              </p>
+            </div>
+
+            <!-- Wallet Password (required) -->
+            <div class="space-y-2">
+              <Label for="wallet-password">
+                Wallet Password *
+              </Label>
+              <Input
+                id="wallet-password"
+                v-model="registrationData.walletPassword"
+                type="password"
+                placeholder="Enter a secure password"
+                required
+              />
+              <p class="text-xs text-muted-foreground">
+                Create a password to encrypt and secure your HTM wallet locally
+              </p>
+            </div>
+
+            <!-- Repeat Password (required) -->
+            <div class="space-y-2">
+              <Label for="repeat-password">
+                Repeat Password *
+              </Label>
+              <Input
+                id="repeat-password"
+                v-model="registrationData.repeatPassword"
+                type="password"
+                placeholder="Repeat your password"
+                required
+              />
+              <p class="text-xs text-muted-foreground">
+                Confirm your wallet password
               </p>
             </div>
           </div>
-- 
GitLab


From 561687c072c7be1272ca2273adab9fb1c1f7d965 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 15 Oct 2025 10:07:37 +0200
Subject: [PATCH 023/102] Add edit token

---
 src/pages/tokens/edit.vue | 518 ++++++++++++++++++++++++++++++++++++++
 src/utils/router.ts       |   2 +
 2 files changed, 520 insertions(+)
 create mode 100644 src/pages/tokens/edit.vue

diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
new file mode 100644
index 0000000..e7e2408
--- /dev/null
+++ b/src/pages/tokens/edit.vue
@@ -0,0 +1,518 @@
+<script setup lang="ts">
+import { mdiArrowLeft, mdiContentSave, mdiLoading } from '@mdi/js';
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { toast } from 'vue-sonner';
+
+import HTMView from '@/components/HTMView.vue';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Textarea } from '@/components/ui/textarea';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
+import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
+import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
+
+// Router
+const route = useRoute();
+const router = useRouter();
+
+// Stores
+const tokensStore = useTokensStore();
+const settingsStore = useSettingsStore();
+
+// State
+const token = ref<CtokensAppToken | null>(null);
+const isLoading = ref(true);
+const isUpdating = ref(false);
+
+// Form state
+const form = ref({
+  name: '',
+  symbol: '',
+  description: '',
+  image: '',
+  website: ''
+});
+
+// Get NAI and precision from route parameters
+const nai = computed(() => route.query.nai as string);
+const precision = computed(() => route.query.precision);
+
+// Check if user is logged in
+const isLoggedIn = computed(() => !!settingsStore.settings.account);
+
+// Check if current user is the token owner
+const isTokenOwner = computed(() => {
+  if (!token.value?.owner || !tokensStore.wallet?.publicKey) return false;
+  return token.value.owner === tokensStore.wallet.publicKey;
+});
+
+// Computed properties for display
+const tokenImage = computed(() => {
+  return form.value.image || '';
+});
+
+// Form validation
+const isFormValid = computed(() => {
+  return form.value.name.trim() !== '' &&
+         form.value.symbol.trim() !== '' &&
+         form.value.symbol.length >= 3 &&
+         form.value.symbol.length <= 10 &&
+         /^[A-Z]+$/i.test(form.value.symbol.trim());
+});
+
+// Check if form has changes
+const hasChanges = computed(() => {
+  if (!token.value) return false;
+  const metadata = token.value.metadata as {
+    name?: string;
+    symbol?: string;
+    description?: string;
+    image?: string;
+    website?: string;
+  } | undefined;
+
+  return form.value.name !== (metadata?.name || '') ||
+         form.value.symbol !== (metadata?.symbol || '') ||
+         form.value.description !== (metadata?.description || '') ||
+         form.value.image !== (metadata?.image || '') ||
+         form.value.website !== (metadata?.website || '');
+});
+
+// Load token details
+const loadTokenDetails = async () => {
+  try {
+    const wax = await getWax();
+
+    // Fetch token details by NAI
+    let tokens = await wax.restApi.ctokensApi.registeredTokens({
+      nai: nai.value,
+      precision: Number(precision.value!)
+    });
+
+    if (!tokens || tokens.length === 0) {
+      const allTokens = await wax.restApi.ctokensApi.registeredTokens({});
+      tokens = allTokens.filter(t => t.nai === nai.value);
+    }
+
+    if (!tokens || tokens.length === 0)
+      throw new Error(`Token with NAI ${nai.value} not found`);
+
+    token.value = tokens[0];
+
+    // Populate form with existing metadata
+    const metadata = token.value.metadata as {
+      name?: string;
+      symbol?: string;
+      description?: string;
+      image?: string;
+      website?: string;
+    } | undefined;
+
+    form.value.name = metadata?.name || '';
+    form.value.symbol = metadata?.symbol || '';
+    form.value.description = metadata?.description || '';
+    form.value.image = metadata?.image || '';
+    form.value.website = metadata?.website || '';
+
+  } catch (error) {
+    toastError('Failed to load token details', error);
+    router.push('/tokens/list');
+  }
+};
+
+// Handle token update
+const handleUpdateToken = async () => {
+  if (!token.value || !isTokenOwner.value || !isFormValid.value) {
+    toastError('Cannot update token', new Error('Invalid form or insufficient permissions'));
+    return;
+  }
+
+  try {
+    isUpdating.value = true;
+
+    // Prepare metadata
+    const metadata = {
+      name: form.value.name.trim(),
+      symbol: form.value.symbol.trim().toUpperCase(),
+      description: form.value.description.trim(),
+      image: form.value.image.trim(),
+      website: form.value.website.trim()
+    };
+
+    // Call store method to update token metadata
+    await tokensStore.updateTokenMetadata(
+      token.value.nai!,
+      token.value.precision!,
+      metadata
+    );
+
+    toast.success('Token metadata updated successfully!');
+
+    // Navigate back to token detail page
+    setTimeout(() => {
+      router.push({
+        path: '/tokens/token',
+        query: {
+          nai: token.value!.nai,
+          precision: token.value!.precision
+        }
+      });
+    }, 1000);
+
+  } catch (error) {
+    toastError('Failed to update token metadata', error);
+  } finally {
+    isUpdating.value = false;
+  }
+};
+
+// Navigate back to token detail
+const goBack = () => {
+  router.push({
+    path: '/tokens/token',
+    query: { nai: nai.value, precision: precision.value }
+  });
+};
+
+// Initialize
+onMounted(async () => {
+  if (!isLoggedIn.value) {
+    toast.error('You must be logged in to edit tokens');
+    router.push('/');
+    return;
+  }
+
+  isLoading.value = true;
+  await loadTokenDetails();
+  isLoading.value = false;
+
+  // Check ownership after loading
+  if (!isTokenOwner.value) {
+    toast.error('You do not have permission to edit this token');
+    router.push({
+      path: '/tokens/token',
+      query: { nai: nai.value, precision: precision.value }
+    });
+  }
+});
+</script>
+
+<template>
+  <HTMView>
+    <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-4xl">
+      <!-- Header -->
+      <div class="flex items-center justify-between gap-4">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="gap-2 hover:bg-accent"
+          @click="goBack"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiArrowLeft"
+            />
+          </svg>
+          Back to Token
+        </Button>
+      </div>
+
+      <!-- Loading State -->
+      <div
+        v-if="isLoading"
+        class="space-y-6"
+      >
+        <Card>
+          <CardHeader>
+            <Skeleton class="h-8 w-48" />
+            <Skeleton class="h-4 w-64" />
+          </CardHeader>
+          <CardContent class="space-y-4">
+            <Skeleton class="h-10 w-full" />
+            <Skeleton class="h-10 w-full" />
+            <Skeleton class="h-24 w-full" />
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Edit Form -->
+      <div
+        v-else-if="token && isTokenOwner"
+        class="space-y-6"
+      >
+        <!-- Page Title -->
+        <div>
+          <h1 class="text-3xl font-bold text-foreground mb-2">
+            Edit Token Definition
+          </h1>
+          <p class="text-muted-foreground">
+            Update the metadata for your token. Only the token owner can make these changes.
+          </p>
+        </div>
+
+        <!-- Token Preview Card -->
+        <Card>
+          <CardHeader>
+            <CardTitle>Token Preview</CardTitle>
+            <CardDescription>
+              How your token will appear to users
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div class="flex items-center gap-4">
+              <Avatar class="h-16 w-16">
+                <AvatarImage
+                  v-if="tokenImage"
+                  :src="tokenImage"
+                  :alt="form.name || 'Token'"
+                />
+                <AvatarFallback class="bg-primary/10">
+                  <span class="text-xl font-bold text-primary">
+                    {{ form.symbol ? form.symbol.slice(0, 2).toUpperCase() : 'TK' }}
+                  </span>
+                </AvatarFallback>
+              </Avatar>
+              <div>
+                <h3 class="text-xl font-bold">
+                  {{ form.name || 'Token Name' }}
+                </h3>
+                <p class="text-sm text-muted-foreground">
+                  {{ form.symbol || 'SYMBOL' }}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <!-- Edit Form Card -->
+        <Card>
+          <CardHeader>
+            <CardTitle>Token Metadata</CardTitle>
+            <CardDescription>
+              Edit the display information for your token
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-6">
+            <!-- Token Name -->
+            <div class="space-y-2">
+              <Label
+                for="name"
+                class="text-sm font-medium text-foreground"
+              >
+                Token Name <span class="text-red-500">*</span>
+              </Label>
+              <Input
+                id="name"
+                v-model="form.name"
+                placeholder="e.g., My Awesome Token"
+                :disabled="isUpdating"
+                class="transition-colors"
+              />
+              <p class="text-xs text-muted-foreground">
+                The full name of your token
+              </p>
+            </div>
+
+            <Separator />
+
+            <!-- Token Symbol -->
+            <div class="space-y-2">
+              <Label
+                for="symbol"
+                class="text-sm font-medium text-foreground"
+              >
+                Token Symbol <span class="text-red-500">*</span>
+              </Label>
+              <Input
+                id="symbol"
+                v-model="form.symbol"
+                placeholder="e.g., MAT"
+                :disabled="isUpdating"
+                class="transition-colors uppercase"
+                maxlength="10"
+              />
+              <p class="text-xs text-muted-foreground">
+                3-10 uppercase letters (e.g., BTC, ETH, HIVE)
+              </p>
+              <p
+                v-if="form.symbol && !/^[A-Z]+$/i.test(form.symbol.trim())"
+                class="text-xs text-red-500"
+              >
+                Symbol must contain only letters
+              </p>
+              <p
+                v-if="form.symbol && (form.symbol.length < 3 || form.symbol.length > 10)"
+                class="text-xs text-red-500"
+              >
+                Symbol must be 3-10 characters
+              </p>
+            </div>
+
+            <Separator />
+
+            <!-- Description -->
+            <div class="space-y-2">
+              <Label
+                for="description"
+                class="text-sm font-medium text-foreground"
+              >
+                Description
+              </Label>
+              <Textarea
+                id="description"
+                v-model="form.description"
+                placeholder="Describe your token's purpose and features..."
+                rows="4"
+                :disabled="isUpdating"
+                class="resize-none"
+              />
+              <p class="text-xs text-muted-foreground">
+                A brief description of what your token represents
+              </p>
+            </div>
+
+            <Separator />
+
+            <!-- Image URL -->
+            <div class="space-y-2">
+              <Label
+                for="image"
+                class="text-sm font-medium text-foreground"
+              >
+                Image URL
+              </Label>
+              <Input
+                id="image"
+                v-model="form.image"
+                type="url"
+                placeholder="https://example.com/token-logo.png"
+                :disabled="isUpdating"
+                class="transition-colors font-mono text-sm"
+              />
+              <p class="text-xs text-muted-foreground">
+                URL to your token's logo or icon (recommended: square, 512x512px)
+              </p>
+            </div>
+
+            <Separator />
+
+            <!-- Website URL -->
+            <div class="space-y-2">
+              <Label
+                for="website"
+                class="text-sm font-medium text-foreground"
+              >
+                Website URL
+              </Label>
+              <Input
+                id="website"
+                v-model="form.website"
+                type="url"
+                placeholder="https://example.com"
+                :disabled="isUpdating"
+                class="transition-colors font-mono text-sm"
+              />
+              <p class="text-xs text-muted-foreground">
+                Official website for your token project
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <!-- Technical Info Alert -->
+        <Alert>
+          <AlertDescription>
+            <div class="">
+              <p class="font-semibold">
+                Technical Information (Cannot be changed)
+              </p>
+              <div class="flex flex-wrap gap-4 mt-2 text-sm">
+                <div>
+                  <span class="text-muted-foreground">NAI:</span>
+                  <span class="ml-1 font-mono">{{ token.nai }}</span>
+                </div>
+                <div>
+                  <span class="text-muted-foreground">Precision:</span>
+                  <span class="ml-1 font-mono">{{ token.precision }}</span>
+                </div>
+                <div>
+                  <span class="text-muted-foreground">Owner:</span>
+                  <span class="ml-1 font-mono text-xs">{{ token.owner }}</span>
+                </div>
+              </div>
+            </div>
+          </AlertDescription>
+        </Alert>
+
+        <!-- Action Buttons -->
+        <div class="flex gap-4">
+          <Button
+            variant="outline"
+            size="lg"
+            class="flex-1"
+            :disabled="isUpdating"
+            @click="goBack"
+          >
+            Cancel
+          </Button>
+          <Button
+            size="lg"
+            class="flex-1 gap-2"
+            :disabled="isUpdating || !isFormValid || !hasChanges"
+            @click="handleUpdateToken"
+          >
+            <svg
+              v-if="isUpdating"
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="animate-spin"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiLoading"
+              />
+            </svg>
+            <svg
+              v-else
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiContentSave"
+              />
+            </svg>
+            {{ isUpdating ? 'Updating...' : 'Save Changes' }}
+          </Button>
+        </div>
+
+        <!-- Info message if no changes -->
+        <Alert v-if="!hasChanges && !isUpdating">
+          <AlertDescription>
+            No changes detected. Modify the fields above to update your token metadata.
+          </AlertDescription>
+        </Alert>
+      </div>
+    </div>
+  </HTMView>
+</template>
diff --git a/src/utils/router.ts b/src/utils/router.ts
index f8ec065..3dec2cc 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -6,6 +6,7 @@ import Index from '@/pages/index.vue';
 import SignMessage from '@/pages/sign/message.vue';
 import SignTransaction from '@/pages/sign/transaction.vue';
 import CreateToken from '@/pages/tokens/create.vue';
+import EditToken from '@/pages/tokens/edit.vue';
 import TokensList from '@/pages/tokens/list.vue';
 import AccountBalances from '@/pages/tokens/my-balance.vue';
 import TokenDefinitions from '@/pages/tokens/my-tokens.vue';
@@ -21,6 +22,7 @@ export const routes = [
   { path: '/account/update', component: AccountUpdate },
   { path: '/tokens/register-account', component: RegisterHTMAccount },
   { path: '/tokens/create', component: CreateToken },
+  { path: '/tokens/edit', component: EditToken },
   { path: '/tokens/my-tokens', component: TokenDefinitions },
   { path: '/tokens/my-balance', component: AccountBalances },
   { path: '/tokens/list', component: TokensList },
-- 
GitLab


From 93d658a1660ac2c2f8ee48951e30c02db7966d80 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 15 Oct 2025 10:07:59 +0200
Subject: [PATCH 024/102] Improve token views

---
 src/components/HTMTokenCard.vue       | 217 +--------
 src/components/HTMTokenPreview.vue    | 295 ++++++++++++
 src/components/MemoInput.vue          |  38 ++
 src/pages/tokens/create.vue           |  98 +---
 src/pages/tokens/list.vue             |  52 +-
 src/pages/tokens/my-balance.vue       | 432 +++++++++++++----
 src/pages/tokens/register-account.vue | 657 +++++++++++++++++---------
 src/pages/tokens/token.vue            | 299 ++++++++++--
 src/stores/tokens.store.ts            |  61 ++-
 src/utils/htm-utils.ts                |  52 +-
 src/utils/htm.ts                      |  74 +++
 11 files changed, 1634 insertions(+), 641 deletions(-)
 create mode 100644 src/components/HTMTokenPreview.vue
 create mode 100644 src/components/MemoInput.vue

diff --git a/src/components/HTMTokenCard.vue b/src/components/HTMTokenCard.vue
index a9c82ca..22edf6b 100644
--- a/src/components/HTMTokenCard.vue
+++ b/src/components/HTMTokenCard.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { mdiInfinity } from '@mdi/js';
-
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import HTMTokenPreview from '@/components/HTMTokenPreview.vue';
 import type { CTokenDisplay } from '@/stores/tokens.store';
 
 interface Props {
@@ -15,14 +12,6 @@ const emit = defineEmits<{
   click: [token: CTokenDisplay];
 }>();
 
-// Get avatar fallback text
-const getAvatarFallback = (token: CTokenDisplay): string => {
-  if (token.name)
-    return token.name.slice(0, 2).toUpperCase();
-
-  return token.ownerPublicKey.slice(3, 5).toUpperCase();
-};
-
 // Handle card click
 const handleClick = () => {
   emit('click', props.token);
@@ -30,204 +19,10 @@ const handleClick = () => {
 </script>
 
 <template>
-  <Card
-    class="hover:shadow-lg transition-all cursor-pointer group"
+  <HTMTokenPreview
+    :token="token"
+    :clickable="true"
+    :show-view-icon="true"
     @click="handleClick"
-  >
-    <CardHeader class="pb-3">
-      <div class="flex items-start gap-4">
-        <!-- Token Avatar -->
-        <Avatar
-          size="sm"
-          shape="circle"
-        >
-          <AvatarImage
-            v-if="token.image"
-            :src="token.image"
-            :alt="token.name || 'Token'"
-          />
-          <AvatarFallback>
-            <svg
-              v-if="!token.image"
-              width="24"
-              height="24"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="text-muted-foreground"
-            >
-              <path
-                style="fill: currentColor"
-                d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M11,7H13V17H11V7Z"
-              />
-            </svg>
-            <span
-              v-else
-              class="text-sm font-semibold"
-            >
-              {{ getAvatarFallback(token) }}
-            </span>
-          </AvatarFallback>
-        </Avatar>
-
-        <!-- Token Info -->
-        <div class="flex-1 min-w-0">
-          <CardTitle class="text-lg truncate flex items-center">
-            <span>{{ token.name || 'Unnamed Token' }}</span>
-            <span
-              v-if="token.isStaked"
-              class="ml-2 text-[11px]/[14px] inline-flex items-center rounded-md bg-green-500/10 px-1 font-medium text-green-500 border border-blue-500/20"
-            >
-              staked
-            </span>
-          </CardTitle>
-          <CardDescription class="text-xs truncate">
-            {{ token.nai }}
-          </CardDescription>
-        </div>
-
-        <!-- View Icon -->
-        <svg
-          width="20"
-          height="20"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          class="text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0"
-        >
-          <path
-            style="fill: currentColor"
-            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          />
-        </svg>
-      </div>
-    </CardHeader>
-
-    <CardContent class="space-y-4">
-      <!-- Description -->
-      <p
-        v-if="token.description"
-        class="text-sm text-muted-foreground line-clamp-2 min-h-[2.5rem]"
-      >
-        {{ token.description }}
-      </p>
-      <p
-        v-else
-        class="text-sm text-muted-foreground italic min-h-[2.5rem]"
-      >
-        No description provided
-      </p>
-
-      <!-- Token Properties -->
-      <div class="space-y-2 text-sm">
-        <!-- Supply Info -->
-        <div class="flex items-center justify-between">
-          <span class="text-muted-foreground">Total Supply:</span>
-          <span class="font-semibold">
-            {{ token.displayTotalSupply }}
-          </span>
-        </div>
-
-        <div class="flex items-center justify-between">
-          <span class="text-muted-foreground">Max Supply:</span>
-          <span class="font-semibold flex items-center gap-1">
-            <template v-if="token.capped">
-              {{ token.displayMaxSupply }}
-            </template>
-            <template v-else>
-              <svg
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  style="fill: currentColor"
-                  :d="mdiInfinity"
-                />
-              </svg>
-              Unlimited
-            </template>
-          </span>
-        </div>
-
-        <div class="flex items-center justify-between">
-          <span class="text-muted-foreground">Precision:</span>
-          <span class="font-semibold">{{ token.precision }}</span>
-        </div>
-      </div>
-
-      <!-- Token Badges -->
-      <div class="flex flex-wrap gap-2 pt-2">
-        <span
-          v-if="token.isNft"
-          class="inline-flex items-center rounded-md bg-purple-500/10 px-2 py-1 text-xs font-medium text-purple-500 border border-purple-500/20"
-        >
-          NFT
-        </span>
-        <span
-          v-if="token.othersCanStake"
-          class="inline-flex items-center rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-500 border border-green-500/20"
-        >
-          <svg
-            width="12"
-            height="12"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="mr-1"
-          >
-            <path
-              style="fill: currentColor"
-              d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-            />
-          </svg>
-          Stakeable
-        </span>
-        <span
-          v-if="token.othersCanUnstake"
-          class="inline-flex items-center rounded-md bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-500 border border-blue-500/20"
-        >
-          <svg
-            width="12"
-            height="12"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="mr-1"
-          >
-            <path
-              style="fill: currentColor"
-              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
-            />
-          </svg>
-          Unstakeable
-        </span>
-        <span
-          v-if="!token.capped"
-          class="inline-flex items-center rounded-md bg-orange-500/10 px-2 py-1 text-xs font-medium text-orange-500 border border-orange-500/20"
-        >
-          <svg
-            class="mr-1"
-            width="16"
-            height="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiInfinity"
-            />
-          </svg>
-          Uncapped
-        </span>
-      </div>
-
-      <!-- Owner -->
-      <div class="pt-2 border-t">
-        <div class="text-xs text-muted-foreground">
-          Owner:
-          <span class="font-mono text-foreground">
-            {{ token.ownerPublicKey.slice(0, 8) }}...{{ token.ownerPublicKey.slice(-6) }}
-          </span>
-        </div>
-      </div>
-    </CardContent>
-  </Card>
+  />
 </template>
diff --git a/src/components/HTMTokenPreview.vue b/src/components/HTMTokenPreview.vue
new file mode 100644
index 0000000..3282fc3
--- /dev/null
+++ b/src/components/HTMTokenPreview.vue
@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import type { CTokenDisplay } from '@/stores/tokens.store';
+
+interface TokenPreviewData {
+  name?: string;
+  symbol?: string;
+  description?: string;
+  nai?: string;
+  image?: string;
+  totalSupply?: string | bigint;
+  maxSupply?: string | bigint;
+  displayTotalSupply?: string;
+  displayMaxSupply?: string;
+  precision?: number | string;
+  capped?: boolean;
+  isNft?: boolean;
+  isStaked?: boolean;
+  othersCanStake?: boolean;
+  othersCanUnstake?: boolean;
+  ownerPublicKey?: string;
+}
+
+interface Props {
+  token: TokenPreviewData | CTokenDisplay;
+  clickable?: boolean;
+  showViewIcon?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  clickable: false,
+  showViewIcon: false
+});
+
+const emit = defineEmits<{
+  click: [token: TokenPreviewData | CTokenDisplay];
+}>();
+
+// Get avatar fallback text
+const getAvatarFallback = (token: TokenPreviewData | CTokenDisplay): string => {
+  if (token.name)
+    return token.name.slice(0, 2).toUpperCase();
+
+  if (token.symbol)
+    return token.symbol.slice(0, 2).toUpperCase();
+
+  if (token.ownerPublicKey)
+    return token.ownerPublicKey.slice(3, 5).toUpperCase();
+
+  return 'TK';
+};
+
+// Handle card click
+const handleClick = () => {
+  if (props.clickable)
+    emit('click', props.token);
+};
+
+// Check if token is a full CTokenDisplay
+const isFullToken = (token: TokenPreviewData | CTokenDisplay): token is CTokenDisplay => {
+  return 'displayTotalSupply' in token && 'displayMaxSupply' in token;
+};
+
+// Format number with precision
+const formatTokenAmount = (amount: string | bigint | undefined, precision: number | string = 3): string => {
+  if (!amount) return '0';
+
+  const precisionNum = typeof precision === 'string' ? parseInt(precision) : precision;
+
+  // If it's a bigint, convert to string first
+  if (typeof amount === 'bigint') {
+    const divisor = BigInt(10) ** BigInt(precisionNum);
+    const integerPart = amount / divisor;
+    const fractionalPart = amount % divisor;
+
+    if (fractionalPart === BigInt(0))
+      return integerPart.toLocaleString();
+
+    const fractionalStr = fractionalPart.toString().padStart(precisionNum, '0').replace(/0+$/, '');
+    return `${integerPart.toLocaleString()}.${fractionalStr}`;
+  }
+
+  const num = parseFloat(amount);
+
+  if (isNaN(num)) return amount;
+
+  return num.toLocaleString(undefined, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: precisionNum
+  });
+};
+
+const displayTotalSupply = computed(() => {
+  if (isFullToken(props.token))
+    return props.token.displayTotalSupply;
+
+  const formatted = formatTokenAmount(props.token.totalSupply, props.token.precision);
+  const symbol = props.token.symbol || props.token.name;
+  return symbol ? `${formatted} ${symbol}` : formatted;
+});
+
+const displayMaxSupply = computed(() => {
+  if (isFullToken(props.token))
+    return props.token.displayMaxSupply;
+
+  const formatted = formatTokenAmount(props.token.maxSupply, props.token.precision);
+  const symbol = props.token.symbol || props.token.name;
+  return symbol ? `${formatted} ${symbol}` : formatted;
+});
+
+const hasStakingFeatures = computed(() =>
+  props.token.othersCanStake || props.token.othersCanUnstake
+);
+</script>
+
+<template>
+  <Card
+    :class="[
+      'transition-all',
+      clickable ? 'hover:shadow-lg cursor-pointer group' : ''
+    ]"
+    @click="handleClick"
+  >
+    <CardHeader class="pb-3">
+      <div class="flex items-start gap-4">
+        <!-- Token Avatar -->
+        <Avatar
+          size="sm"
+          shape="circle"
+        >
+          <AvatarImage
+            v-if="token.image"
+            :src="token.image"
+            :alt="token.name || 'Token'"
+          />
+          <AvatarFallback>
+            <svg
+              v-if="!token.image"
+              width="24"
+              height="24"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="text-muted-foreground"
+            >
+              <path
+                style="fill: currentColor"
+                d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M11,7H13V17H11V7Z"
+              />
+            </svg>
+            <span
+              v-else
+              class="text-sm font-semibold"
+            >
+              {{ getAvatarFallback(token) }}
+            </span>
+          </AvatarFallback>
+        </Avatar>
+
+        <!-- Token Info -->
+        <div class="flex-1 min-w-0">
+          <div class="flex flex-col gap-2 mb-1">
+            <CardTitle class="text-lg truncate">
+              {{ token.name || 'Unnamed Token' }}
+            </CardTitle>
+            <div class="flex flex-wrap gap-2">
+              <span
+                v-if="token.symbol"
+                class="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary border border-primary/20"
+              >
+                {{ token.symbol }}
+              </span>
+              <span
+                v-if="token.isNft"
+                class="inline-flex items-center rounded-md bg-purple-500/10 px-2 py-1 text-xs font-medium text-purple-500 border border-purple-500/20"
+              >
+                NFT
+              </span>
+              <span
+                :class="[
+                  'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
+                  token.capped ? 'bg-orange-500/10 text-orange-500 border-orange-500/20' : 'bg-gray-500/10 text-gray-500 border-gray-500/20'
+                ]"
+              >
+                {{ token.capped ? 'Capped' : 'Uncapped' }}
+              </span>
+              <span
+                v-if="token.isStaked"
+                class="inline-flex items-center rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-500 border border-green-500/20"
+              >
+                Staked
+              </span>
+            </div>
+          </div>
+          <CardDescription class="text-xs truncate">
+            {{ token.nai || 'NAI will be generated' }}
+          </CardDescription>
+        </div>
+
+        <!-- View Icon -->
+        <svg
+          v-if="showViewIcon"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0"
+        >
+          <path
+            style="fill: currentColor"
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          />
+        </svg>
+      </div>
+    </CardHeader>
+
+    <CardContent class="space-y-4">
+      <!-- Description -->
+      <p
+        v-if="token.description"
+        class="text-sm text-muted-foreground line-clamp-2 min-h-[2.5rem]"
+      >
+        {{ token.description }}
+      </p>
+      <p
+        v-else
+        class="text-sm text-muted-foreground italic min-h-[2.5rem]"
+      >
+        No description provided
+      </p>
+
+      <!-- Token Properties -->
+      <div class="space-y-2 text-sm">
+        <!-- Supply Info -->
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">Total Supply:</span>
+          <span class="font-semibold text-foreground">
+            {{ displayTotalSupply }}
+          </span>
+        </div>
+
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">Max Supply:</span>
+          <span class="font-semibold text-foreground flex items-center gap-1">
+            <template v-if="token.capped">
+              {{ displayMaxSupply }}
+            </template>
+            <template v-else>
+              ∞ (Unlimited)
+            </template>
+          </span>
+        </div>
+
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">Precision:</span>
+          <span class="font-semibold text-foreground">{{ token.precision ?? 3 }}</span>
+        </div>
+      </div>
+
+      <!-- Token Feature Badges -->
+      <div
+        v-if="hasStakingFeatures"
+        class="flex flex-wrap gap-2 pt-2"
+      >
+        <span
+          v-if="token.othersCanStake"
+          class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 border border-blue-200"
+        >
+          Staking ✓
+        </span>
+        <span
+          v-if="token.othersCanUnstake"
+          class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 border border-blue-200"
+        >
+          Unstaking ✓
+        </span>
+      </div>
+
+      <!-- Owner -->
+      <div
+        v-if="token.ownerPublicKey"
+        class="pt-2 border-t"
+      >
+        <div class="text-xs text-muted-foreground">
+          Owner:
+          <span class="font-mono text-foreground">
+            {{ token.ownerPublicKey.slice(0, 8) }}...{{ token.ownerPublicKey.slice(-6) }}
+          </span>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/components/MemoInput.vue b/src/components/MemoInput.vue
new file mode 100644
index 0000000..1b4e3b5
--- /dev/null
+++ b/src/components/MemoInput.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+
+defineProps<{
+  modelValue: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const handleInput = (event: string | number) => {
+  emit('update:modelValue', String(event));
+};
+</script>
+
+<template>
+  <div class="space-y-2">
+    <Label
+      for="memo"
+      class="text-sm font-medium text-foreground"
+    >
+      Memo (Optional)
+    </Label>
+    <Textarea
+      id="memo"
+      :model-value="modelValue"
+      placeholder="Optional transfer memo or note"
+      rows="3"
+      :disabled="disabled"
+      class="resize-none"
+      @update:model-value="handleInput"
+    />
+    <p class="text-xs text-muted-foreground">
+      Add an optional note for this transaction
+    </p>
+  </div>
+</template>
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index b32f6ea..a44790a 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -3,14 +3,13 @@ import {
   mdiCurrencyUsd,
   mdiRefresh,
   mdiContentCopy,
-  mdiCheck,
-  mdiAlert,
   mdiRocket,
   mdiLoading
 } from '@mdi/js';
 import { computed, ref, watch } from 'vue';
 import { toast } from 'vue-sonner';
 
+import HTMTokenPreview from '@/components/HTMTokenPreview.vue';
 import HTMView from '@/components/HTMView.vue';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
@@ -240,12 +239,27 @@ const onSupplyInput = (event: Event) => {
   initialSupply.value = value;
 };
 
-// Handle symbol input
-const onSymbolInput = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  const value = target.value.replace(/[^A-Za-z]/g, '').toUpperCase();
-  tokenSymbol.value = value;
-};
+// Handle symbol input - transform to uppercase letters only
+watch(tokenSymbol, (newValue) => {
+  const cleaned = newValue.replace(/[^A-Za-z]/g, '').toUpperCase();
+  if (cleaned !== newValue)
+    tokenSymbol.value = cleaned;
+});
+
+// Computed property for token preview data
+const previewToken = computed(() => ({
+  name: tokenName.value || undefined,
+  symbol: tokenSymbol.value || undefined,
+  description: tokenDescription.value || undefined,
+  nai: generatedNAI.value || undefined,
+  totalSupply: initialSupply.value,
+  maxSupply: capped.value ? initialSupply.value : undefined,
+  precision: parseInt(precision.value) || 3,
+  capped: capped.value,
+  othersCanStake: canStake.value,
+  othersCanUnstake: canStake.value,
+  ownerPublicKey: tokensStore.wallet?.publicKey
+}));
 </script>
 
 <template>
@@ -301,13 +315,12 @@ const onSymbolInput = (event: Event) => {
                 <Label for="token-symbol">Token Symbol *</Label>
                 <Input
                   id="token-symbol"
-                  :value="tokenSymbol"
+                  v-model="tokenSymbol"
                   placeholder="e.g., MAT"
                   class="uppercase"
                   :class="{ 'border-red-500': tokenSymbol.length > 0 && !symbolValidation.isValid }"
                   maxlength="10"
                   :disabled="isCreatingToken"
-                  @input="onSymbolInput"
                 />
                 <p
                   class="text-xs"
@@ -480,71 +493,10 @@ const onSymbolInput = (event: Event) => {
           <!-- Preview and Actions -->
           <div class="space-y-6">
             <!-- Token Preview -->
-            <Card>
-              <CardHeader>
-                <CardTitle>Token Preview</CardTitle>
-                <CardDescription>
-                  How your token will appear
-                </CardDescription>
-              </CardHeader>
-              <CardContent class="space-y-4">
-                <div class="border rounded-lg p-4 space-y-2">
-                  <div class="flex items-center justify-between">
-                    <div>
-                      <h3 class="font-semibold">
-                        {{ tokenName || 'Token Name' }}
-                      </h3>
-                      <p class="text-sm text-muted-foreground">
-                        {{ tokenSymbol || 'SYMBOL' }}
-                      </p>
-                    </div>
-                    <span class="inline-flex items-center rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground">{{ naiDisplayValue || 'NAI' }}</span>
-                  </div>
-
-                  <p class="text-sm">
-                    {{ tokenDescription || 'Token description will appear here...' }}
-                  </p>
-
-                  <div class="flex justify-between text-xs text-muted-foreground">
-                    <span>Supply: {{ formatNumber(initialSupply) }}</span>
-                    <span>Precision: {{ precision }}</span>
-                  </div>
-
-                  <div
-                    v-if="canStake"
-                    class="flex items-center text-xs text-green-600"
-                  >
-                    <svg
-                      width="12"
-                      height="12"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      class="mr-1"
-                    >
-                      <path
-                        style="fill: currentColor"
-                        :d="mdiCheck"
-                      />
-                    </svg>
-                    Staking enabled
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
+            <HTMTokenPreview :token="previewToken" />
 
             <!-- Disclaimer -->
-            <Alert>
-              <svg
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  style="fill: currentColor"
-                  :d="mdiAlert"
-                />
-              </svg>
+            <Alert variant="warning">
               <AlertDescription>
                 <div class="space-y-2">
                   <p class="font-semibold">
diff --git a/src/pages/tokens/list.vue b/src/pages/tokens/list.vue
index 81c20be..a2fffe9 100644
--- a/src/pages/tokens/list.vue
+++ b/src/pages/tokens/list.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { mdiRefresh, mdiPlus } from '@mdi/js';
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -7,6 +8,7 @@ import HTMView from '@/components/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore, type CTokenDisplay } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 
@@ -14,6 +16,7 @@ import { toastError } from '@/utils/parse-error';
 const router = useRouter();
 
 // Store
+const settingsStore = useSettingsStore();
 const tokensStore = useTokensStore();
 
 // State
@@ -43,6 +46,11 @@ const loadMore = () => {
   void loadTokens(currentPage.value + 1);
 };
 
+// Navigate to create token page
+const createNewToken = () => {
+  router.push('/tokens/create');
+};
+
 // Initialize
 onMounted(() => {
   loadMore();
@@ -56,12 +64,54 @@ onMounted(() => {
       <div class="flex items-center justify-between">
         <div>
           <h1 class="text-3xl font-bold tracking-tight">
-            Custom Tokens
+            Tokens List
           </h1>
           <p class="text-muted-foreground">
             Browse all registered tokens on Hive Token Machine
           </p>
         </div>
+
+        <div class="flex gap-2">
+          <Button
+            variant="outline"
+            :disabled="tokensStore.isLoadingRegisteredTokens"
+            @click="loadMore"
+          >
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              :class="{ 'animate-spin': tokensStore.isLoadingRegisteredTokens }"
+              class="mr-2"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiRefresh"
+              />
+            </svg>
+            Refresh
+          </Button>
+
+          <Button
+            v-if="settingsStore.account"
+            @click="createNewToken"
+          >
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-2"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiPlus"
+              />
+            </svg>
+            Create Token
+          </Button>
+        </div>
       </div>
 
       <!-- Loading Skeletons -->
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 2047d01..502ce31 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -1,38 +1,51 @@
 <script setup lang="ts">
 import {
-  mdiCurrencyUsd,
   mdiRefresh,
   mdiSend,
   mdiAccount,
-  mdiLock,
-  mdiLockOpen,
-  mdiWater
+  mdiArrowUp,
+  mdiArrowDown,
+  mdiPlusCircle,
+  mdiWallet,
+  mdiImageMultiple
 } from '@mdi/js';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import HTMView from '@/components/HTMView.vue';
+import MemoInput from '@/components/MemoInput.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useTokensStore } from '@/stores/tokens.store';
+import { getWax } from '@/stores/wax.store';
+import { getUserOperationalKey } from '@/utils/ctokens-api';
 import { transferNAIToken, stakeNAIToken } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import type { CtokensAppBalance } from '@/utils/wallet/ctokens/api';
 
+const router = useRouter();
 const tokensStore = useTokensStore();
 
 // State
 const isLoading = ref(false);
 const searchQuery = ref('');
+const failedImages = ref<Set<string>>(new Set());
+
+// Pagination state
+const itemsPerPage = ref(10);
+const displayedItemsCount = ref(10);
 
 // Transfer dialog state
 const isTransferDialogOpen = ref(false);
 const transferAmount = ref('');
 const transferRecipient = ref('');
+const transferMemo = ref('');
 const selectedTokenForTransfer = ref<CtokensAppBalance | null>(null);
 const isTransferLoading = ref(false);
 
@@ -43,6 +56,21 @@ const transformDirection = ref<'liquid-to-staked' | 'staked-to-liquid'>('liquid-
 const selectedToken = ref<CtokensAppBalance | null>(null);
 const isTransformLoading = ref(false);
 
+// Account statistics
+const createdTokensCount = ref(0);
+const ownedTokensCount = ref(0);
+const nftCollectionsCount = ref(0);
+const stakedTokensCount = ref(0);
+
+// Helper function to format count with >100, >60 etc
+const formatCount = (count: number): string => {
+  if (count > 100) {
+    const rounded = Math.floor(count / 10) * 10;
+    return `>${rounded}`;
+  }
+  return count.toString();
+};
+
 // Helper functions for extracting data from metadata
 const getTokenSymbol = (balance: CtokensAppBalance): string => {
   const metadata = balance.metadata as { symbol?: string; name?: string } | undefined;
@@ -59,14 +87,25 @@ const getTokenLogoUrl = (balance: CtokensAppBalance): string | undefined => {
   return metadata?.logo_url || metadata?.image;
 };
 
-// For now, since the API doesn't distinguish between liquid and staked,
-// we'll treat all balance as liquid (this may need to be updated based on actual API behavior)
+// Check if a token is staked (vesting) based on NAI
+const isVesting = (nai: string, precision: number): boolean => {
+  // The vesting bit is bit 5 (0x20) in the NAI encoding
+  return (((Number(nai.slice(2, -1)) << 5) | 0x10 | precision) & 0x20) != 0;
+};
+
+// Get liquid balance - if the NAI indicates vesting (staked), return 0
 const getLiquidBalance = (balance: CtokensAppBalance): string => {
+  if (isVesting(balance.nai || '', balance.precision || 0))
+    return '0';
+
   return balance.amount || '0';
 };
 
-const getStakedBalance = (_balance: CtokensAppBalance): string => {
-  // TODO: Update this when staked balance info is available from API
+// Get staked balance - if the NAI indicates vesting (staked), return the amount
+const getStakedBalance = (balance: CtokensAppBalance): string => {
+  if (isVesting(balance.nai || '', balance.precision || 0))
+    return balance.amount || '0';
+
   return '0';
 };
 
@@ -76,11 +115,13 @@ const getTotalBalance = (balance: CtokensAppBalance): string => {
   return (liquid + staked).toString();
 };
 
-// Computed
-const filteredBalances = computed(() => {
-  if (!searchQuery.value) return tokensStore.balances;
+// Filter balances based on search query
+const filteredBalancesAll = computed(() => {
+  const balances = tokensStore.balances;
+
+  if (!searchQuery.value) return balances;
 
-  return tokensStore.balances.filter(balance => {
+  return balances.filter(balance => {
     const symbol = getTokenSymbol(balance);
     const name = getTokenName(balance);
     const nai = balance.nai || '';
@@ -91,16 +132,69 @@ const filteredBalances = computed(() => {
   });
 });
 
-const totalValue = computed(() => {
-  return tokensStore.totalValue;
+// Paginated balances (displayed items)
+const filteredBalances = computed(() => {
+  return filteredBalancesAll.value.slice(0, displayedItemsCount.value);
+});
+
+// Check if there are more items to load
+const hasMoreItems = computed(() => {
+  return displayedItemsCount.value < filteredBalancesAll.value.length;
+});
+
+// Load more items
+const loadMoreItems = () => {
+  displayedItemsCount.value = Math.min(
+    displayedItemsCount.value + itemsPerPage.value,
+    filteredBalancesAll.value.length
+  );
+};
+
+// Reset pagination when search changes
+watch(searchQuery, () => {
+  displayedItemsCount.value = itemsPerPage.value;
 });
 
 // Methods
+const loadAccountStatistics = async () => {
+  try {
+    const wax = await getWax();
+    const operationalKey = getUserOperationalKey();
+
+    if (!operationalKey) {
+      console.warn('No operational key available');
+      return;
+    }
+
+    // Get all tokens created by this user (owner field matches operational key)
+    const allTokens = await wax.restApi.ctokensApi.registeredTokens({});
+    const createdTokens = allTokens.filter(token => token.owner === operationalKey);
+    createdTokensCount.value = createdTokens.length;
+
+    // Get owned tokens (tokens with balance)
+    const balances = await wax.restApi.ctokensApi.balances({ user: operationalKey });
+    ownedTokensCount.value = balances.length;
+
+    // Get NFT collections (created NFT tokens)
+    const nftTokens = createdTokens.filter(token => token.is_nft);
+    nftCollectionsCount.value = nftTokens.length;
+
+    // Get staked tokens (tokens with vesting bit set)
+    const stakedBalances = balances.filter(b => isVesting(b.nai || '', b.precision || 0));
+    stakedTokensCount.value = stakedBalances.length;
+  } catch (error) {
+    console.error('Failed to load account statistics:', error);
+  }
+};
+
 const loadAccountBalances = async () => {
   try {
     isLoading.value = true;
 
-    await tokensStore.loadBalances(true);
+    await Promise.all([
+      tokensStore.loadBalances(true),
+      loadAccountStatistics()
+    ]);
   } catch (error) {
     toastError('Failed to load account balances', error);
   } finally {
@@ -112,6 +206,7 @@ const openTransferDialog = (balance: CtokensAppBalance) => {
   selectedTokenForTransfer.value = balance;
   transferAmount.value = '';
   transferRecipient.value = '';
+  transferMemo.value = '';
   isTransferDialogOpen.value = true;
 };
 
@@ -127,7 +222,8 @@ const transferTokens = async () => {
     await transferNAIToken({
       to: transferRecipient.value,
       amount: transferAmount.value,
-      symbol: getTokenSymbol(selectedTokenForTransfer.value)
+      symbol: getTokenSymbol(selectedTokenForTransfer.value),
+      memo: transferMemo.value || undefined
     });
 
     const symbol = getTokenSymbol(selectedTokenForTransfer.value);
@@ -181,14 +277,62 @@ const transformTokens = async () => {
   }
 };
 
-const getMaxTransferAmount = (balance: CtokensAppBalance) => {
-  return parseFloat(getLiquidBalance(balance));
+// Handle image load error
+const handleImageError = (nai: string) => {
+  failedImages.value.add(nai);
 };
 
-const getMaxTransformAmount = (balance: CtokensAppBalance, direction: 'liquid-to-staked' | 'staked-to-liquid') => {
-  return direction === 'liquid-to-staked'
-    ? parseFloat(getLiquidBalance(balance))
-    : parseFloat(getStakedBalance(balance));
+// Check if image should be shown
+const shouldShowImage = (balance: CtokensAppBalance): boolean => {
+  const logoUrl = getTokenLogoUrl(balance);
+  return !!logoUrl && !failedImages.value.has(balance.nai || '');
+};
+
+// Navigate to token details page
+const navigateToToken = (balance: CtokensAppBalance) => {
+  router.push({
+    path: '/tokens/token',
+    query: {
+      nai: balance.nai,
+      precision: balance.precision?.toString()
+    }
+  });
+};
+
+// Set max transfer amount with proper precision
+const setMaxTransferAmount = async () => {
+  if (!selectedTokenForTransfer.value) return;
+
+  try {
+    const wax = await getWax();
+    const formattedAmount = wax.formatter.formatNumber(
+      selectedTokenForTransfer.value.amount || '0',
+      selectedTokenForTransfer.value.precision || 0
+    );
+    transferAmount.value = formattedAmount;
+  } catch (error) {
+    console.error('Failed to set max transfer amount:', error);
+  }
+};
+
+// Set max transform amount with proper precision
+const setMaxTransformAmount = async () => {
+  if (!selectedToken.value) return;
+
+  try {
+    const wax = await getWax();
+    const amount = transformDirection.value === 'liquid-to-staked'
+      ? (selectedToken.value.amount || '0')
+      : getStakedBalance(selectedToken.value);
+
+    const formattedAmount = wax.formatter.formatNumber(
+      amount,
+      selectedToken.value.precision || 0
+    );
+    transformAmount.value = formattedAmount;
+  } catch (error) {
+    console.error('Failed to set max transform amount:', error);
+  }
 };
 
 // Initialize
@@ -239,7 +383,7 @@ onMounted(() => {
         <Card>
           <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle class="text-sm font-medium">
-              Total Portfolio Value
+              Created Tokens
             </CardTitle>
             <svg
               width="16"
@@ -250,16 +394,16 @@ onMounted(() => {
             >
               <path
                 style="fill: currentColor"
-                :d="mdiCurrencyUsd"
+                :d="mdiPlusCircle"
               />
             </svg>
           </CardHeader>
           <CardContent>
             <div class="text-2xl font-bold">
-              ${{ totalValue.toFixed(2) }}
+              {{ formatCount(createdTokensCount) }}
             </div>
             <p class="text-xs text-muted-foreground">
-              +2.1% from last month
+              Tokens you've created
             </p>
           </CardContent>
         </Card>
@@ -267,7 +411,7 @@ onMounted(() => {
         <Card>
           <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle class="text-sm font-medium">
-              Total Tokens
+              Owned Tokens
             </CardTitle>
             <svg
               width="16"
@@ -278,16 +422,16 @@ onMounted(() => {
             >
               <path
                 style="fill: currentColor"
-                :d="mdiAccount"
+                :d="mdiWallet"
               />
             </svg>
           </CardHeader>
           <CardContent>
             <div class="text-2xl font-bold">
-              {{ tokensStore.tokenCount }}
+              {{ formatCount(ownedTokensCount) }}
             </div>
             <p class="text-xs text-muted-foreground">
-              Different token types
+              Tokens in your balance
             </p>
           </CardContent>
         </Card>
@@ -295,7 +439,7 @@ onMounted(() => {
         <Card>
           <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle class="text-sm font-medium">
-              Liquid Balance
+              NFT Collections
             </CardTitle>
             <svg
               width="16"
@@ -306,16 +450,16 @@ onMounted(() => {
             >
               <path
                 style="fill: currentColor"
-                :d="mdiWater"
+                :d="mdiImageMultiple"
               />
             </svg>
           </CardHeader>
           <CardContent>
             <div class="text-2xl font-bold">
-              {{ tokensStore.balances.reduce((sum, b) => sum + parseFloat(getLiquidBalance(b)), 0).toFixed(3) }}
+              {{ formatCount(nftCollectionsCount) }}
             </div>
             <p class="text-xs text-muted-foreground">
-              Available for transfer
+              NFT collections created
             </p>
           </CardContent>
         </Card>
@@ -323,7 +467,7 @@ onMounted(() => {
         <Card>
           <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle class="text-sm font-medium">
-              Staked Balance
+              Staked Tokens
             </CardTitle>
             <svg
               width="16"
@@ -334,16 +478,16 @@ onMounted(() => {
             >
               <path
                 style="fill: currentColor"
-                :d="mdiLock"
+                :d="mdiArrowUp"
               />
             </svg>
           </CardHeader>
           <CardContent>
             <div class="text-2xl font-bold">
-              {{ tokensStore.balances.reduce((sum, b) => sum + parseFloat(getStakedBalance(b)), 0).toFixed(3) }}
+              {{ formatCount(stakedTokensCount) }}
             </div>
             <p class="text-xs text-muted-foreground">
-              Earning rewards
+              Tokens currently staked
             </p>
           </CardContent>
         </Card>
@@ -352,11 +496,24 @@ onMounted(() => {
       <!-- Search -->
       <div class="flex items-center gap-4">
         <div class="flex-1">
-          <Input
-            v-model="searchQuery"
-            placeholder="Search tokens by symbol, name, or NAI..."
-            class="max-w-sm"
-          />
+          <TooltipProvider
+            :delay-duration="200"
+            disable-hoverable-content
+          >
+            <Tooltip>
+              <TooltipTrigger class="max-w-sm w-full">
+                <Input
+                  v-model="searchQuery"
+                  placeholder="Search tokens by symbol, name, or NAI..."
+                  class="w-full"
+                  disabled
+                />
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Search not available yet</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
       </div>
 
@@ -432,31 +589,52 @@ onMounted(() => {
                   <tr
                     v-for="balance in filteredBalances"
                     :key="balance.nai"
-                    class="border-b hover:bg-muted/50 transition-colors"
+                    class="border-b hover:bg-muted/50 transition-colors cursor-pointer"
+                    @click="navigateToToken(balance)"
                   >
                     <!-- Asset Info -->
                     <td class="p-4">
                       <div class="flex items-center gap-3">
-                        <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+                        <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center overflow-hidden">
                           <img
-                            v-if="getTokenLogoUrl(balance)"
+                            v-if="shouldShowImage(balance)"
                             :src="getTokenLogoUrl(balance)"
                             :alt="getTokenSymbol(balance)"
-                            class="h-6 w-6 rounded-full"
+                            class="h-full w-full object-cover"
+                            @error="handleImageError(balance.nai || '')"
                           >
                           <span
                             v-else
                             class="text-sm font-medium text-primary"
                           >
-                            {{ getTokenSymbol(balance).charAt(0) }}
+                            {{ getTokenSymbol(balance).charAt(0).toUpperCase() }}
                           </span>
                         </div>
                         <div>
-                          <div class="font-semibold">
-                            {{ getTokenSymbol(balance) }}
+                          <div class="flex items-center gap-2">
+                            <span class="font-semibold">
+                              {{ getTokenName(balance) }}
+                            </span>
+                            <span
+                              v-if="isVesting(balance.nai || '', balance.precision || 0)"
+                              class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
+                            >
+                              <svg
+                                width="12"
+                                height="12"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  style="fill: currentColor"
+                                  :d="mdiArrowUp"
+                                />
+                              </svg>
+                              STAKED
+                            </span>
                           </div>
                           <div class="text-sm text-muted-foreground">
-                            {{ getTokenName(balance) }}
+                            {{ getTokenSymbol(balance) }}
                           </div>
                           <div class="text-xs text-muted-foreground font-mono">
                             {{ balance.nai }}
@@ -513,7 +691,7 @@ onMounted(() => {
                           size="sm"
                           :disabled="parseFloat(getLiquidBalance(balance)) === 0"
                           title="Transfer tokens"
-                          @click="openTransferDialog(balance)"
+                          @click.stop="openTransferDialog(balance)"
                         >
                           <svg
                             width="14"
@@ -533,7 +711,7 @@ onMounted(() => {
                           size="sm"
                           :disabled="parseFloat(getLiquidBalance(balance)) === 0"
                           title="Stake tokens"
-                          @click="openTransformDialog(balance, 'liquid-to-staked')"
+                          @click.stop="openTransformDialog(balance, 'liquid-to-staked')"
                         >
                           <svg
                             width="14"
@@ -543,7 +721,7 @@ onMounted(() => {
                           >
                             <path
                               style="fill: currentColor"
-                              :d="mdiLock"
+                              :d="mdiArrowUp"
                             />
                           </svg>
                         </Button>
@@ -553,7 +731,7 @@ onMounted(() => {
                           size="sm"
                           :disabled="parseFloat(getStakedBalance(balance)) === 0"
                           title="Unstake tokens"
-                          @click="openTransformDialog(balance, 'staked-to-liquid')"
+                          @click.stop="openTransformDialog(balance, 'staked-to-liquid')"
                         >
                           <svg
                             width="14"
@@ -563,7 +741,7 @@ onMounted(() => {
                           >
                             <path
                               style="fill: currentColor"
-                              :d="mdiLockOpen"
+                              :d="mdiArrowDown"
                             />
                           </svg>
                         </Button>
@@ -575,6 +753,23 @@ onMounted(() => {
             </div>
           </CardContent>
         </Card>
+
+        <!-- Load More Button -->
+        <div
+          v-if="hasMoreItems"
+          class="flex justify-center pt-4"
+        >
+          <Button
+            variant="outline"
+            size="lg"
+            @click="loadMoreItems"
+          >
+            Load More
+            <span class="ml-2 text-muted-foreground">
+              ({{ displayedItemsCount }} / {{ filteredBalancesAll.length }})
+            </span>
+          </Button>
+        </div>
       </div>
 
       <!-- Empty State -->
@@ -624,7 +819,24 @@ onMounted(() => {
       <Dialog v-model:open="isTransferDialogOpen">
         <DialogContent class="sm:max-w-[425px]">
           <DialogHeader>
-            <DialogTitle>Transfer {{ selectedTokenForTransfer ? getTokenSymbol(selectedTokenForTransfer) : '' }}</DialogTitle>
+            <div class="flex items-center gap-3 mb-2">
+              <div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center overflow-hidden">
+                <img
+                  v-if="selectedTokenForTransfer && shouldShowImage(selectedTokenForTransfer)"
+                  :src="getTokenLogoUrl(selectedTokenForTransfer)"
+                  :alt="getTokenSymbol(selectedTokenForTransfer)"
+                  class="h-full w-full object-cover"
+                  @error="handleImageError(selectedTokenForTransfer.nai || '')"
+                >
+                <span
+                  v-else
+                  class="text-base font-medium text-primary"
+                >
+                  {{ selectedTokenForTransfer ? getTokenSymbol(selectedTokenForTransfer).charAt(0).toUpperCase() : '' }}
+                </span>
+              </div>
+              <DialogTitle>Transfer {{ selectedTokenForTransfer ? getTokenName(selectedTokenForTransfer) : '' }}</DialogTitle>
+            </div>
             <DialogDescription>
               Send tokens to another account. Available balance: {{ selectedTokenForTransfer ? getLiquidBalance(selectedTokenForTransfer) : '0' }} {{ selectedTokenForTransfer ? getTokenSymbol(selectedTokenForTransfer) : '' }}
             </DialogDescription>
@@ -642,23 +854,46 @@ onMounted(() => {
 
             <div class="grid gap-2">
               <Label for="amount">Amount</Label>
-              <div class="flex gap-2">
+              <div class="relative">
                 <Input
                   id="amount"
                   v-model="transferAmount"
-                  type="number"
-                  :step="1 / Math.pow(10, selectedTokenForTransfer?.precision || 3)"
-                  :max="getMaxTransferAmount(selectedTokenForTransfer!)"
+                  type="text"
+                  inputmode="decimal"
                   placeholder="0.000"
+                  class="pr-20 transition-colors"
                 />
-                <Button
-                  variant="outline"
-                  @click="transferAmount = selectedTokenForTransfer ? getLiquidBalance(selectedTokenForTransfer) : ''"
+                <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
+                  <span class="text-xs text-muted-foreground">
+                    {{ getTokenSymbol(selectedTokenForTransfer!) }}
+                  </span>
+                </div>
+              </div>
+              <div class="flex justify-between text-xs">
+                <span class="text-muted-foreground">
+                  Available: {{ getLiquidBalance(selectedTokenForTransfer!) }}
+                </span>
+                <button
+                  v-if="selectedTokenForTransfer && Number(getLiquidBalance(selectedTokenForTransfer)) > 0"
+                  type="button"
+                  class="text-primary hover:text-primary/80 font-medium"
+                  @click="setMaxTransferAmount"
                 >
-                  Max
-                </Button>
+                  MAX
+                </button>
               </div>
+              <p
+                v-if="selectedTokenForTransfer"
+                class="text-xs text-muted-foreground"
+              >
+                Precision: {{ selectedTokenForTransfer.precision }} decimal places
+              </p>
             </div>
+
+            <MemoInput
+              v-model="transferMemo"
+              :disabled="isTransferLoading"
+            />
           </div>
 
           <div class="flex justify-end gap-2">
@@ -708,9 +943,26 @@ onMounted(() => {
       <Dialog v-model:open="isTransformDialogOpen">
         <DialogContent class="sm:max-w-[425px]">
           <DialogHeader>
-            <DialogTitle>
-              {{ transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake' }} {{ selectedToken ? getTokenSymbol(selectedToken) : '' }}
-            </DialogTitle>
+            <div class="flex items-center gap-3 mb-2">
+              <div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center overflow-hidden">
+                <img
+                  v-if="selectedToken && shouldShowImage(selectedToken)"
+                  :src="getTokenLogoUrl(selectedToken)"
+                  :alt="getTokenSymbol(selectedToken)"
+                  class="h-full w-full object-cover"
+                  @error="handleImageError(selectedToken.nai || '')"
+                >
+                <span
+                  v-else
+                  class="text-base font-medium text-primary"
+                >
+                  {{ selectedToken ? getTokenSymbol(selectedToken).charAt(0).toUpperCase() : '' }}
+                </span>
+              </div>
+              <DialogTitle>
+                {{ transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake' }} {{ selectedToken ? getTokenName(selectedToken) : '' }}
+              </DialogTitle>
+            </div>
             <DialogDescription>
               {{ transformDirection === 'liquid-to-staked'
                 ? `Stake tokens to earn rewards. Available: ${selectedToken ? getLiquidBalance(selectedToken) : '0'} ${selectedToken ? getTokenSymbol(selectedToken) : ''}`
@@ -722,24 +974,40 @@ onMounted(() => {
           <div class="grid gap-4 py-4">
             <div class="grid gap-2">
               <Label for="transformAmount">Amount</Label>
-              <div class="flex gap-2">
+              <div class="relative">
                 <Input
                   id="transformAmount"
                   v-model="transformAmount"
-                  type="number"
-                  :step="1 / Math.pow(10, selectedToken?.precision || 3)"
-                  :max="getMaxTransformAmount(selectedToken!, transformDirection)"
+                  type="text"
+                  inputmode="decimal"
                   placeholder="0.000"
+                  class="pr-20 transition-colors"
                 />
-                <Button
-                  variant="outline"
-                  @click="transformAmount = (transformDirection === 'liquid-to-staked'
-                    ? (selectedToken ? getLiquidBalance(selectedToken) : '')
-                    : (selectedToken ? getStakedBalance(selectedToken) : '')) || ''"
+                <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
+                  <span class="text-xs text-muted-foreground">
+                    {{ getTokenSymbol(selectedToken!) }}
+                  </span>
+                </div>
+              </div>
+              <div class="flex justify-between text-xs">
+                <span class="text-muted-foreground">
+                  Available: {{ transformDirection === 'liquid-to-staked' ? getLiquidBalance(selectedToken!) : getStakedBalance(selectedToken!) }}
+                </span>
+                <button
+                  v-if="selectedToken && Number(transformDirection === 'liquid-to-staked' ? getLiquidBalance(selectedToken) : getStakedBalance(selectedToken)) > 0"
+                  type="button"
+                  class="text-primary hover:text-primary/80 font-medium"
+                  @click="setMaxTransformAmount"
                 >
-                  Max
-                </Button>
+                  MAX
+                </button>
               </div>
+              <p
+                v-if="selectedToken"
+                class="text-xs text-muted-foreground"
+              >
+                Precision: {{ selectedToken.precision }} decimal places
+              </p>
             </div>
           </div>
 
@@ -777,7 +1045,7 @@ onMounted(() => {
               >
                 <path
                   style="fill: currentColor"
-                  :d="transformDirection === 'liquid-to-staked' ? mdiLock : mdiLockOpen"
+                  :d="transformDirection === 'liquid-to-staked' ? mdiArrowUp : mdiArrowDown"
                 />
               </svg>
               {{ isTransformLoading
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index 464ed99..cc98c0a 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
 import type { IBeekeeperInstance, IBeekeeperOptions } from '@hiveio/beekeeper';
+import beekeeperFactory from '@hiveio/beekeeper';
+import {
+  mdiCheckCircle,
+  mdiDownload,
+  mdiNumeric1Circle,
+  mdiNumeric2Circle,
+  mdiNumeric3Circle,
+  mdiRefresh
+} from '@mdi/js';
 import { HtmTransaction } from '@mtyszczak-cargo/htm';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -10,6 +19,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
@@ -20,74 +30,175 @@ const router = useRouter();
 const showLoginForm = ref(false);
 const showRegistrationForm = ref(false);
 const isLoading = ref(false);
+const hasConfirmedDownload = ref(false);
+const keysGenerated = ref(false);
 
-// Registration form data - following the same structure as userStore posting JSON metadata
+// Registration form data - simplified to match standard account creation flow
 const registrationData = ref({
   name: '',                 // Account display name
-  about: '',                // Description/bio
-  website: '',              // Website URL
-  profile_image: '',        // Profile image URL (for now, will be replaced with image hoster in future)
+  about: '',                // Description/bio (optional)
+  website: '',              // Website URL (optional)
+  profile_image: '',        // Profile image URL (optional)
   hiveAccount: '',          // Hive account name
   hivePostingPrivateKey: '',// Hive posting private key (WIF format) - needed to sign L1 transaction
-  managementPrivateKey: '', // Management private key (WIF format)
-  operationalPrivateKey: '',// Operational private key (WIF format)
   walletPassword: '',       // Password to encrypt the wallet
   repeatPassword: ''        // Password confirmation
 });
 
-// Form validation
-const isFormValid = computed(() => {
+// Generated HTM keys (auto-generated, not manually entered)
+const generatedKeys = ref({
+  operationalPrivateKey: '',
+  operationalPublicKey: '',
+  managementPrivateKey: '',
+  managementPublicKey: ''
+});
+
+// Step tracking for improved UX (similar to Hive account creation)
+const currentStep = computed(() => {
+  if (!isBasicInfoValid.value) return 1;
+  if (!keysGenerated.value) return 2;
+  if (!hasConfirmedDownload.value) return 3;
+  return 3;
+});
+
+const stepStatus = computed(() => ({
+  step1: {
+    completed: isBasicInfoValid.value,
+    current: currentStep.value === 1,
+    icon: mdiNumeric1Circle,
+    title: 'Account Info',
+    description: 'Basic information'
+  },
+  step2: {
+    completed: keysGenerated.value,
+    current: currentStep.value === 2,
+    icon: mdiNumeric2Circle,
+    title: 'Generate Keys',
+    description: 'Auto-create HTM keys'
+  },
+  step3: {
+    completed: hasConfirmedDownload.value,
+    current: currentStep.value === 3,
+    icon: mdiNumeric3Circle,
+    title: 'Confirm & Register',
+    description: 'Save keys & register'
+  }
+}));
+
+// Form validation - only basic info needed in step 1
+const isBasicInfoValid = computed(() => {
   return registrationData.value.name.trim().length > 0 &&
-         registrationData.value.about.trim().length > 0 &&
          registrationData.value.hiveAccount.trim().length > 0 &&
          registrationData.value.hivePostingPrivateKey.trim().length > 0 &&
-         registrationData.value.operationalPrivateKey.trim().length > 0 &&
          registrationData.value.walletPassword.trim().length > 0 &&
          registrationData.value.repeatPassword.trim().length > 0 &&
          registrationData.value.walletPassword === registrationData.value.repeatPassword;
 });
 
-// Validation: Check if keys are different
-const keysValidationError = computed(() => {
-  const hiveKey = registrationData.value.hivePostingPrivateKey.trim();
-  const operationalKey = registrationData.value.operationalPrivateKey.trim();
-  const managementKey = registrationData.value.managementPrivateKey.trim();
-
-  if (!hiveKey || !operationalKey) return null;
-
-  if (hiveKey === operationalKey)
-    return 'Hive Posting Key and HTM Operational Key must be different!';
-
-  if (managementKey && hiveKey === managementKey)
-    return 'Hive Posting Key and HTM Management Key must be different!';
-
-  if (managementKey && operationalKey === managementKey)
-    return 'HTM Operational Key and HTM Management Key must be different!';
+// Validate URL format
+const isValidUrl = (url: string): boolean => {
+  if (!url) return true; // Empty URL is valid (optional field)
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
 
-  return null;
-});
+// Generate HTM keys automatically (called during registration)
+const generateAndDownloadKeys = async () => {
+  if (!isBasicInfoValid.value) {
+    toast.error('Please fill in all required fields');
+    return;
+  }
 
-// Generate new HTM keys
-const generateHTMKeys = async () => {
   try {
+    isLoading.value = true;
+
     const wax = await getWax();
 
     // Generate operational key
     const operationalBrainKey = wax.suggestBrainKey();
-    registrationData.value.operationalPrivateKey = operationalBrainKey.wifPrivateKey;
+    generatedKeys.value.operationalPrivateKey = operationalBrainKey.wifPrivateKey;
+
+    // Derive public key for operational key
+    const bk = await beekeeperFactory();
+    const tempSession = bk.createSession(Math.random().toString());
+    const { wallet: tempWallet } = await tempSession.createWallet('temp', 'temp', true);
+    generatedKeys.value.operationalPublicKey = await tempWallet.importKey(operationalBrainKey.wifPrivateKey);
 
     // Generate management key (optional, but recommended)
     const managementBrainKey = wax.suggestBrainKey();
-    registrationData.value.managementPrivateKey = managementBrainKey.wifPrivateKey;
+    generatedKeys.value.managementPrivateKey = managementBrainKey.wifPrivateKey;
+    generatedKeys.value.managementPublicKey = await tempWallet.importKey(managementBrainKey.wifPrivateKey);
+
+    keysGenerated.value = true;
+
+    // Auto-download the keys file
+    downloadKeysFile();
 
     toast.success('HTM keys generated successfully!', {
-      description: 'New operational and management keys have been created'
+      description: 'Keys have been auto-generated and downloaded'
     });
   } catch (error) {
     toastError('Failed to generate HTM keys', error);
+  } finally {
+    isLoading.value = false;
   }
 };
 
+// Download HTM keys file (similar to Hive authority data file)
+const downloadKeysFile = () => {
+  const cleanAccountName = registrationData.value.hiveAccount.startsWith('@')
+    ? registrationData.value.hiveAccount.slice(1)
+    : registrationData.value.hiveAccount;
+
+  const keysFile = {
+    account_name: cleanAccountName,
+    display_name: registrationData.value.name,
+    generated_at: new Date().toISOString(),
+    htm_keys: {
+      operational: {
+        public_key: generatedKeys.value.operationalPublicKey,
+        private_key: generatedKeys.value.operationalPrivateKey
+      },
+      management: {
+        public_key: generatedKeys.value.managementPublicKey,
+        private_key: generatedKeys.value.managementPrivateKey
+      }
+    },
+    _note: 'KEEP THIS FILE SAFE! These keys control your HTM account. Store them in a secure location and never share them with anyone.',
+    generator: 'Hive Bridge HTM Registration'
+  };
+
+  const dataStr = JSON.stringify(keysFile, null, 2);
+  const dataBlob = new Blob([dataStr], { type: 'application/json' });
+  const url = URL.createObjectURL(dataBlob);
+
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `${cleanAccountName}-htm-keys.json`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+
+  URL.revokeObjectURL(url);
+};
+
+// Reset process
+const resetProcess = () => {
+  keysGenerated.value = false;
+  hasConfirmedDownload.value = false;
+  generatedKeys.value = {
+    operationalPrivateKey: '',
+    operationalPublicKey: '',
+    managementPrivateKey: '',
+    managementPublicKey: ''
+  };
+  toast.info('Process reset. You can generate new keys.');
+};
+
 // Show HTM login form
 const showHTMLogin = () => {
   showLoginForm.value = true;
@@ -105,11 +216,10 @@ const goBack = () => {
     profile_image: '',
     hiveAccount: '',
     hivePostingPrivateKey: '',
-    managementPrivateKey: '',
-    operationalPrivateKey: '',
     walletPassword: '',
     repeatPassword: ''
   };
+  resetProcess();
 };
 
 // Handle successful login
@@ -119,31 +229,20 @@ const onLoginSuccess = () => {
   router.push('/tokens/my-balance');
 };
 
-// Validate URL format
-const isValidUrl = (url: string): boolean => {
-  if (!url) return true; // Empty URL is valid (optional field)
-  try {
-    new URL(url);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
 // Handle HTM account registration
 const registerHTMAccount = async () => {
   try {
     isLoading.value = true;
 
-    // Validate form data
-    if (!isFormValid.value) {
-      toast.error('Please fill in all required fields');
+    // Validate that keys have been generated
+    if (!keysGenerated.value) {
+      toast.error('Please generate HTM keys first');
       return;
     }
 
-    // Validate that keys are different
-    if (keysValidationError.value) {
-      toast.error(keysValidationError.value);
+    // Validate that user confirmed download
+    if (!hasConfirmedDownload.value) {
+      toast.error('Please confirm you have saved the keys file');
       return;
     }
 
@@ -168,7 +267,7 @@ const registerHTMAccount = async () => {
     // Get wax instance
     const wax = await getWax();
 
-    // Create temporary beekeeper wallet to import keys and derive public keys
+    // Create temporary beekeeper wallet to import keys and sign transactions
     toast.info('Creating HTM wallet...');
 
     const beekeeper = await (import('@hiveio/beekeeper/vite') as unknown as Promise<{ createBeekeeper: (options: Partial<IBeekeeperOptions>) => Promise<IBeekeeperInstance> }>)
@@ -180,19 +279,17 @@ const registerHTMAccount = async () => {
     const { wallet: tempWallet } = await tempSession.createWallet(tempWalletName, 'temp-password', true);
 
     const hivePostingPublicKey = await tempWallet.importKey(registrationData.value.hivePostingPrivateKey.trim());
-    const operationalPublicKey = await tempWallet.importKey(registrationData.value.operationalPrivateKey.trim());
-
-    let managementPublicKey: string | undefined;
-    if (registrationData.value.managementPrivateKey.trim().length > 0)
-      managementPublicKey = await tempWallet.importKey(registrationData.value.managementPrivateKey.trim());
+    const operationalPublicKey = generatedKeys.value.operationalPublicKey;
+    const managementPublicKey = generatedKeys.value.managementPublicKey;
 
-    const finalManagementKey = managementPublicKey || operationalPublicKey;
+    await tempWallet.importKey(generatedKeys.value.operationalPrivateKey);
+    await tempWallet.importKey(generatedKeys.value.managementPrivateKey);
 
     // Create HTM wallet for persistent storage
     await CTokensProvider.createWallet(
       registrationData.value.walletPassword,
-      registrationData.value.operationalPrivateKey.trim(),
-      registrationData.value.managementPrivateKey.trim() || undefined
+      generatedKeys.value.operationalPrivateKey,
+      generatedKeys.value.managementPrivateKey
     );
 
     // Set proxy account for HTM transactions
@@ -205,7 +302,7 @@ const registerHTMAccount = async () => {
     l2Transaction.pushOperation({
       user_signup_operation: {
         hive_account: registrationData.value.hiveAccount,
-        management_key: finalManagementKey,
+        management_key: managementPublicKey,
         operational_key: operationalPublicKey
       }
     });
@@ -267,139 +364,109 @@ const registerHTMAccount = async () => {
           Register New HTM Account
         </CardTitle>
         <CardDescription>
-          Create your HTM account profile. This information will be stored as metadata following the same structure as Hive posting JSON metadata.
+          Create your HTM account with auto-generated secure keys. Follow the simple steps below.
         </CardDescription>
       </CardHeader>
       <CardContent class="space-y-6">
+        <!-- Progress Steps Indicator -->
+        <div class="grid grid-cols-3 gap-2 mb-6">
+          <div
+            v-for="(step, key) in stepStatus"
+            :key="key"
+            class="flex flex-col items-center text-center"
+          >
+            <div
+              class="w-8 h-8 rounded-full flex items-center justify-center mb-2 transition-all duration-200"
+              :class="{
+                'bg-green-100 text-green-600': step.completed,
+                'bg-blue-100 text-blue-600': step.current && !step.completed,
+                'bg-gray-100 text-gray-400': !step.current && !step.completed
+              }"
+            >
+              <svg
+                v-if="step.completed"
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="mdiCheckCircle"
+                />
+              </svg>
+              <svg
+                v-else
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="step.icon"
+                />
+              </svg>
+            </div>
+            <div class="text-xs">
+              <p
+                class="font-medium transition-colors duration-200"
+                :class="{
+                  'text-green-600': step.completed,
+                  'text-blue-600': step.current && !step.completed,
+                  'text-gray-500': !step.current && !step.completed
+                }"
+              >
+                {{ step.title }}
+              </p>
+              <p class="text-gray-400 mt-1">
+                {{ step.description }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
         <form
           class="space-y-4"
           @submit.prevent="registerHTMAccount"
         >
-          <!-- Account Name (required) -->
-          <div class="space-y-2">
-            <Label for="account-name">
-              Account Name *
-            </Label>
-            <Input
-              id="account-name"
-              v-model="registrationData.name"
-              type="text"
-              placeholder="Enter your display name"
-              required
-              maxlength="50"
-            />
-            <p class="text-xs text-muted-foreground">
-              This will be your display name (max 50 characters)
-            </p>
-          </div>
-
-          <!-- About/Description (required) -->
-          <div class="space-y-2">
-            <Label for="account-about">
-              About *
-            </Label>
-            <Textarea
-              id="account-about"
-              v-model="registrationData.about"
-              placeholder="Tell us about yourself or your project..."
-              required
-              rows="4"
-              maxlength="500"
-            />
-            <p class="text-xs text-muted-foreground">
-              Brief description about you or your project (max 500 characters)
-            </p>
-          </div>
-
-          <!-- Website (optional) -->
-          <div class="space-y-2">
-            <Label for="account-website">
-              Website
-            </Label>
-            <Input
-              id="account-website"
-              v-model="registrationData.website"
-              type="url"
-              placeholder="https://your-website.com"
-            />
-            <p class="text-xs text-muted-foreground">
-              Your website or project URL (optional)
-            </p>
-          </div>
-
-          <!-- Profile Image (optional) -->
-          <div class="space-y-2">
-            <Label for="account-profile-image">
-              Profile Image URL
-            </Label>
-            <Input
-              id="account-profile-image"
-              v-model="registrationData.profile_image"
-              type="url"
-              placeholder="https://example.com/your-image.jpg"
-            />
-            <p class="text-xs text-muted-foreground">
-              Profile image URL (optional) - in the future this will be handled by our image hosting service
-            </p>
-          </div>
-
-          <!-- HTM Account Configuration -->
-          <div class="border-t pt-6 space-y-4">
-            <h3 class="text-lg font-semibold">
-              HTM Account Configuration
-            </h3>
-            <p class="text-sm text-muted-foreground">
-              Configure your Hive account and cryptographic keys for HTM access
-            </p>
-
-            <!-- Warning about different keys -->
-            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-900 rounded-lg p-4">
-              <div class="flex items-start gap-3">
+          <!-- Step 1: Basic Account Information -->
+          <div class="space-y-4">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center space-x-2">
                 <svg
+                  width="18"
+                  height="18"
                   xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5 text-yellow-600 dark:text-yellow-500 mt-0.5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
+                  viewBox="0 0 24 24"
                 >
                   <path
-                    fill-rule="evenodd"
-                    d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                    clip-rule="evenodd"
+                    style="fill: hsl(var(--primary))"
+                    :d="mdiNumeric1Circle"
                   />
                 </svg>
-                <div class="flex-1">
-                  <h4 class="text-sm font-semibold text-yellow-800 dark:text-yellow-200">
-                    Important: Use Different Keys!
-                  </h4>
-                  <p class="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
-                    HTM keys must be <strong>different</strong> from your Hive posting key. Use your Hive posting key only for the "Hive Posting Private Key" field. Generate new, separate keys for HTM Operational and Management.
-                  </p>
-                </div>
+                <Label class="text-base font-semibold">Account Information</Label>
               </div>
             </div>
 
-            <!-- Show validation error if keys are the same -->
-            <div
-              v-if="keysValidationError"
-              class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-900 rounded-lg p-4"
-            >
-              <div class="flex items-center gap-2">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5 text-red-600 dark:text-red-500"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-                <p class="text-sm font-medium text-red-800 dark:text-red-200">
-                  {{ keysValidationError }}
-                </p>
-              </div>
+            <!-- Display Name (required) -->
+            <div class="space-y-2">
+              <Label for="account-name">
+                Display Name *
+              </Label>
+              <Input
+                id="account-name"
+                v-model="registrationData.name"
+                type="text"
+                placeholder="Enter your display name"
+                required
+                maxlength="50"
+              />
+              <p class="text-xs text-muted-foreground">
+                Your public display name (max 50 characters)
+              </p>
             </div>
 
             <!-- Hive Account (required) -->
@@ -435,52 +502,7 @@ const registerHTMAccount = async () => {
                 class="font-mono text-sm"
               />
               <p class="text-xs text-muted-foreground">
-                Your Hive posting private key from your <strong>existing Hive account</strong> (required to register on HTM). This is different from HTM keys.
-              </p>
-            </div>
-
-            <!-- Operational Private Key (required) -->
-            <div class="space-y-2">
-              <div class="flex items-center justify-between">
-                <Label for="operational-private-key">
-                  HTM Operational Private Key *
-                </Label>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  @click="generateHTMKeys"
-                >
-                  Generate HTM Keys
-                </Button>
-              </div>
-              <Input
-                id="operational-private-key"
-                v-model="registrationData.operationalPrivateKey"
-                type="password"
-                placeholder="5... (will be auto-generated)"
-                required
-                class="font-mono text-sm"
-              />
-              <p class="text-xs text-muted-foreground">
-                HTM operational private key in WIF format (used for day-to-day operations and transfers). Click "Generate HTM Keys" to create new keys automatically.
-              </p>
-            </div>
-
-            <!-- Management Private Key (optional) -->
-            <div class="space-y-2">
-              <Label for="management-private-key">
-                HTM Management Private Key (Optional)
-              </Label>
-              <Input
-                id="management-private-key"
-                v-model="registrationData.managementPrivateKey"
-                type="password"
-                placeholder="5... (auto-generated with Operational Key)"
-                class="font-mono text-sm"
-              />
-              <p class="text-xs text-muted-foreground">
-                HTM management private key in WIF format (optional, used for account authority and token creation). Auto-generated when you click "Generate HTM Keys".
+                Your Hive posting private key (required to register on HTM)
               </p>
             </div>
 
@@ -513,10 +535,189 @@ const registerHTMAccount = async () => {
                 placeholder="Repeat your password"
                 required
               />
-              <p class="text-xs text-muted-foreground">
-                Confirm your wallet password
+            </div>
+
+            <!-- About/Description (optional) -->
+            <div class="space-y-2">
+              <Label for="account-about">
+                About (Optional)
+              </Label>
+              <Textarea
+                id="account-about"
+                v-model="registrationData.about"
+                placeholder="Tell us about yourself or your project..."
+                rows="3"
+                maxlength="500"
+              />
+            </div>
+
+            <!-- Website (optional) -->
+            <div class="space-y-2">
+              <Label for="account-website">
+                Website (Optional)
+              </Label>
+              <Input
+                id="account-website"
+                v-model="registrationData.website"
+                type="url"
+                placeholder="https://your-website.com"
+              />
+            </div>
+
+            <!-- Profile Image (optional) -->
+            <div class="space-y-2">
+              <Label for="account-profile-image">
+                Profile Image URL (Optional)
+              </Label>
+              <Input
+                id="account-profile-image"
+                v-model="registrationData.profile_image"
+                type="url"
+                placeholder="https://example.com/your-image.jpg"
+              />
+            </div>
+          </div>
+
+          <Separator />
+
+          <!-- Step 2: Generate HTM Keys -->
+          <div class="space-y-4">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center space-x-2">
+                <svg
+                  width="18"
+                  height="18"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    style="fill: hsl(var(--primary))"
+                    :d="mdiNumeric2Circle"
+                  />
+                </svg>
+                <Label class="text-base font-semibold">HTM Keys Generation</Label>
+              </div>
+              <Button
+                v-if="keysGenerated"
+                variant="ghost"
+                size="sm"
+                class="text-gray-400"
+                type="button"
+                @click="resetProcess"
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  class="mr-1"
+                >
+                  <path
+                    style="fill: currentColor"
+                    :d="mdiRefresh"
+                  />
+                </svg>
+                Reset
+              </Button>
+            </div>
+
+            <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-900 rounded-lg p-4">
+              <p class="text-sm text-blue-800 dark:text-blue-200">
+                HTM keys will be <strong>automatically generated</strong> for you. No need to manually enter keys. Simply click the button below to generate and download your secure keys.
               </p>
             </div>
+
+            <Button
+              type="button"
+              :disabled="!isBasicInfoValid || isLoading"
+              class="w-full"
+              @click="keysGenerated ? downloadKeysFile() : generateAndDownloadKeys()"
+            >
+              <svg
+                v-if="!isLoading"
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="mr-2"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="keysGenerated ? mdiDownload : mdiNumeric2Circle"
+                />
+              </svg>
+              <span v-if="isLoading">Generating...</span>
+              <span v-else-if="keysGenerated">Download Keys File Again</span>
+              <span v-else>Generate & Download HTM Keys</span>
+            </Button>
+
+            <!-- Show generated public keys (read-only) -->
+            <div
+              v-if="keysGenerated"
+              class="space-y-3 mt-4 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg"
+            >
+              <h4 class="text-sm font-semibold">
+                Generated Public Keys (Read-Only)
+              </h4>
+              <div class="space-y-2">
+                <div>
+                  <Label class="text-xs text-muted-foreground">Operational Public Key</Label>
+                  <Input
+                    :value="generatedKeys.operationalPublicKey"
+                    readonly
+                    class="font-mono text-xs bg-white dark:bg-gray-800"
+                  />
+                </div>
+                <div>
+                  <Label class="text-xs text-muted-foreground">Management Public Key</Label>
+                  <Input
+                    :value="generatedKeys.managementPublicKey"
+                    readonly
+                    class="font-mono text-xs bg-white dark:bg-gray-800"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <Separator />
+
+          <!-- Step 3: Confirm Download and Register -->
+          <div
+            v-if="keysGenerated"
+            class="space-y-4"
+          >
+            <div class="flex items-center space-x-2">
+              <svg
+                width="18"
+                height="18"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  style="fill: hsl(var(--primary))"
+                  :d="mdiNumeric3Circle"
+                />
+              </svg>
+              <Label class="text-base font-semibold">Confirm & Register</Label>
+            </div>
+
+            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-900 rounded-lg p-4">
+              <div class="flex items-center space-x-2">
+                <input
+                  id="confirm-download"
+                  v-model="hasConfirmedDownload"
+                  type="checkbox"
+                  class="w-4 h-4"
+                >
+                <label
+                  for="confirm-download"
+                  class="text-sm text-yellow-800 dark:text-yellow-200 cursor-pointer"
+                >
+                  I confirm that I have <strong>downloaded and safely stored</strong> my HTM keys file
+                </label>
+              </div>
+            </div>
           </div>
 
           <!-- Form Actions -->
@@ -531,7 +732,7 @@ const registerHTMAccount = async () => {
             </Button>
             <Button
               type="submit"
-              :disabled="isLoading || !isFormValid"
+              :disabled="isLoading || !keysGenerated || !hasConfirmedDownload"
               class="flex-1"
             >
               <span v-if="isLoading">Registering...</span>
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index aff02dc..d22a612 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -1,19 +1,22 @@
 <script setup lang="ts">
-import { mdiPencilOutline } from '@mdi/js';
+import { mdiPencilOutline, mdiContentCopy, mdiCheck } from '@mdi/js';
 import { onMounted, ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { toast } from 'vue-sonner';
 
 import HTMView from '@/components/HTMView.vue';
+import MemoInput from '@/components/MemoInput.vue';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Textarea } from '@/components/ui/textarea';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { getWax } from '@/stores/wax.store';
+import { copyText } from '@/utils/copy';
+import { isValidPublicKey } from '@/utils/htm';
 import { toastError } from '@/utils/parse-error';
 import type { CtokensAppToken, CtokensAppBalance, CtokensAppTopHolder } from '@/utils/wallet/ctokens/api';
 
@@ -32,6 +35,8 @@ const topHolders = ref<CtokensAppTopHolder[]>([]);
 const isLoading = ref(true);
 const isLoadingHolders = ref(false);
 const isTransferring = ref(false);
+const isCopied = ref(false);
+const isNaiCopied = ref(false);
 
 // Transfer form
 const transferForm = ref({
@@ -47,6 +52,26 @@ const precision = computed(() => route.query.precision);
 // Check if user is logged in
 const isLoggedIn = computed(() => !!settingsStore.settings.account);
 
+// Check if current user is the token owner
+const isTokenOwner = computed(() => {
+  if (!token.value?.owner || !tokensStore.wallet?.publicKey) return false;
+  return token.value.owner === tokensStore.wallet.publicKey;
+});
+
+// Validate recipient address (must be a public key)
+const isRecipientValid = computed(() => {
+  if (!transferForm.value.to) return false;
+  return isValidPublicKey(transferForm.value.to);
+});
+
+// Validate amount
+const amountValidation = computed(() => {
+  if (!transferForm.value.amount || !token.value)
+    return { isValid: false, error: '' };
+
+  return validateAmountPrecision(transferForm.value.amount, token.value.precision || 0);
+});
+
 // Computed properties
 const tokenName = computed(() => {
   if (!token.value) return 'Unknown Token';
@@ -72,6 +97,13 @@ const tokenImage = computed(() => {
   return metadata?.image || '';
 });
 
+const tokenOwnerShort = computed(() => {
+  if (!token.value?.owner) return '';
+  const owner = token.value.owner;
+  if (owner.length <= 16) return owner;
+  return `${owner.slice(0, 8)}...${owner.slice(-8)}`;
+});
+
 const formattedTotalSupply = ref('0');
 const formattedMaxSupply = ref('0');
 const formattedUserBalance = ref('0.000');
@@ -159,6 +191,87 @@ const loadTopHolders = async () => {
   }
 };
 
+// Set max amount with proper precision
+const setMaxAmount = async () => {
+  if (!userBalance.value || !token.value) return;
+
+  try {
+    const wax = await getWax();
+    const formattedAmount = wax.formatter.formatNumber(
+      userBalance.value.amount!,
+      token.value.precision || 0
+    );
+    transferForm.value.amount = formattedAmount;
+  } catch (error) {
+    console.error('Failed to set max amount:', error);
+  }
+};
+
+// Validate amount precision and overflow
+const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
+  try {
+    // Remove thousand separators (commas, spaces) to get clean number
+    const cleanAmount = amount.replace(/[,\s]/g, '');
+
+    // Check if amount contains only valid characters (digits, decimal point)
+    if (!/^\d*\.?\d*$/.test(cleanAmount))
+      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
+
+    // Check if amount is a valid number
+    const numAmount = parseFloat(cleanAmount);
+    if (isNaN(numAmount) || numAmount <= 0)
+      return { isValid: false, error: 'Amount must be a positive number' };
+
+    // Check for infinity
+    if (!isFinite(numAmount))
+      return { isValid: false, error: 'Amount value is too large' };
+
+    // Check decimal places - count actual decimal places in input
+    const decimalIndex = cleanAmount.indexOf('.');
+    if (decimalIndex !== -1) {
+      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
+      if (decimalPlaces > precision) {
+        return {
+          isValid: false,
+          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
+        };
+      }
+    }
+
+    // Convert to base units to check for overflow
+    const multiplier = Math.pow(10, precision);
+    const baseUnits = numAmount * multiplier;
+
+    // Check for overflow - ensure it's within safe integer range
+    // Maximum safe integer in JavaScript is 2^53 - 1
+    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
+    if (baseUnits > MAX_SAFE_BASE_UNITS)
+      return { isValid: false, error: 'Amount is too large and would cause overflow' };
+
+    // Ensure conversion to base units produces an integer (no precision loss)
+    const roundedBaseUnits = Math.round(baseUnits);
+    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
+      return {
+        isValid: false,
+        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
+      };
+    }
+
+    // Check if user has sufficient balance
+    // Note: Based on API response, userBalance.value.amount appears to be a decimal value
+    if (userBalance.value) {
+      const userBalanceDecimal = parseFloat(userBalance.value.amount!);
+      // Compare decimal values directly (both numAmount and userBalanceDecimal are decimal)
+      if (numAmount > userBalanceDecimal)
+        return { isValid: false, error: 'Insufficient balance for this transfer' };
+    }
+
+    return { isValid: true, parsedAmount: roundedBaseUnits.toString() };
+  } catch (_error) {
+    return { isValid: false, error: 'Invalid amount format' };
+  }
+};
+
 // Handle transfer (simplified for now)
 const handleTransfer = async () => {
   if (!token.value || !isLoggedIn.value) {
@@ -167,7 +280,20 @@ const handleTransfer = async () => {
   }
 
   if (!transferForm.value.to || !transferForm.value.amount) {
-    toastError('Please fill in recipient and amount', new Error('Missing fields'));
+    toastError('Please fill in recipient address and amount', new Error('Missing fields'));
+    return;
+  }
+
+  // Validate that recipient is a public key, not a Hive account name
+  if (!isValidPublicKey(transferForm.value.to)) {
+    toastError('Invalid recipient address', new Error('Recipient must be a valid public key address (starts with STM)'));
+    return;
+  }
+
+  // Validate amount precision and check for overflow
+  const validation = validateAmountPrecision(transferForm.value.amount, token.value.precision || 0);
+  if (!validation.isValid) {
+    toastError('Invalid amount', new Error(validation.error || 'Invalid amount format'));
     return;
   }
 
@@ -178,8 +304,10 @@ const handleTransfer = async () => {
     // In a real implementation, this would use the transfer API
     console.log('Transfer:', {
       token: token.value.nai,
+      precision: token.value.precision,
       to: transferForm.value.to,
       amount: transferForm.value.amount,
+      amountInBaseUnits: validation.parsedAmount,
       memo: transferForm.value.memo
     });
 
@@ -198,10 +326,44 @@ const goBack = () => {
   router.push('/tokens/list');
 };
 
-// Navigate to edit token (placeholder for now)
+// Navigate to edit token
 const editToken = () => {
-  // TODO: Implement token editing functionality
-  console.log('Edit token:', token.value?.nai);
+  router.push({
+    path: '/tokens/edit',
+    query: { nai: token.value?.nai, precision: token.value?.precision }
+  });
+};
+
+// Copy owner address to clipboard
+const copyOwnerAddress = () => {
+  if (!token.value?.owner) return;
+
+  try {
+    copyText(token.value.owner);
+    toast.success('Owner address copied to clipboard');
+    isCopied.value = true;
+    setTimeout(() => {
+      isCopied.value = false;
+    }, 1000);
+  } catch (_error) {
+    toast.error('Failed to copy address');
+  }
+};
+
+// Copy NAI to clipboard
+const copyNAI = () => {
+  if (!token.value?.nai) return;
+
+  try {
+    copyText(token.value.nai);
+    toast.success('NAI copied to clipboard');
+    isNaiCopied.value = true;
+    setTimeout(() => {
+      isNaiCopied.value = false;
+    }, 1000);
+  } catch (_error) {
+    toast.error('Failed to copy NAI');
+  }
 };
 
 // Initialize
@@ -243,6 +405,7 @@ onMounted(async () => {
           Back to Tokens
         </Button>
         <Button
+          v-if="isTokenOwner"
           variant="default"
           size="sm"
           class="gap-2"
@@ -308,8 +471,26 @@ onMounted(async () => {
                   :src="tokenImage"
                   :alt="tokenName"
                 />
-                <AvatarFallback class="text-xl sm:text-2xl font-bold bg-primary/10 text-primary">
-                  {{ tokenSymbol ? tokenSymbol.slice(0, 2).toUpperCase() : tokenName.slice(0, 2).toUpperCase() }}
+                <AvatarFallback class="bg-primary/10">
+                  <svg
+                    v-if="!tokenImage"
+                    width="48"
+                    height="48"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="text-muted-foreground"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M11,7H13V17H11V7Z"
+                    />
+                  </svg>
+                  <span
+                    v-else
+                    class="text-xl sm:text-2xl font-bold text-primary"
+                  >
+                    {{ tokenSymbol ? tokenSymbol.slice(0, 2).toUpperCase() : tokenName.slice(0, 2).toUpperCase() }}
+                  </span>
                 </AvatarFallback>
               </Avatar>
 
@@ -353,7 +534,25 @@ onMounted(async () => {
                 <div class="flex flex-wrap items-center gap-3 text-sm text-muted-foreground mb-4">
                   <div class="flex items-center gap-1">
                     <span class="font-medium">NAI:</span>
-                    <code class="bg-muted px-1.5 py-0.5 rounded font-mono text-xs">{{ token.nai }}</code>
+                    <button
+                      type="button"
+                      class="bg-muted px-1.5 py-0.5 rounded text-xs font-mono hover:bg-muted/80 transition-colors inline-flex items-center gap-1.5"
+                      @click="copyNAI"
+                    >
+                      {{ token.nai }}
+                      <svg
+                        width="14"
+                        height="14"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        class="transition-all"
+                      >
+                        <path
+                          style="fill: currentColor"
+                          :d="isNaiCopied ? mdiCheck : mdiContentCopy"
+                        />
+                      </svg>
+                    </button>
                   </div>
                   <div class="flex items-center gap-1">
                     <span class="font-medium">Precision:</span>
@@ -361,7 +560,25 @@ onMounted(async () => {
                   </div>
                   <div class="flex items-center gap-1">
                     <span class="font-medium">Owner:</span>
-                    <span class="bg-muted px-1.5 py-0.5 rounded text-xs max-w-32 truncate">{{ token.owner }}</span>
+                    <button
+                      type="button"
+                      class="bg-muted px-1.5 py-0.5 rounded text-xs font-mono hover:bg-muted/80 transition-colors inline-flex items-center gap-1.5"
+                      @click="copyOwnerAddress"
+                    >
+                      {{ tokenOwnerShort }}
+                      <svg
+                        width="14"
+                        height="14"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        class="transition-all"
+                      >
+                        <path
+                          style="fill: currentColor"
+                          :d="isCopied ? mdiCheck : mdiContentCopy"
+                        />
+                      </svg>
+                    </button>
                   </div>
                 </div>
 
@@ -524,18 +741,24 @@ onMounted(async () => {
                     for="recipient"
                     class="text-sm font-medium text-foreground"
                   >
-                    Recipient Account
+                    Recipient Address (Public Key)
                   </Label>
                   <Input
                     id="recipient"
                     v-model="transferForm.to"
-                    placeholder="Enter recipient account or address"
+                    placeholder="Enter recipient public key address (STM...)"
                     :disabled="isTransferring"
-                    class="transition-colors"
-                    :class="transferForm.to && transferForm.to.length > 2 ? 'border-green-500 focus-visible:ring-green-500' : ''"
+                    class="transition-colors font-mono text-sm"
+                    :class="transferForm.to ? (isRecipientValid ? 'border-green-500 focus-visible:ring-green-500' : 'border-red-500 focus-visible:ring-red-500') : ''"
                   />
                   <p class="text-xs text-muted-foreground">
-                    Enter the account name or address to send tokens to
+                    Enter a valid public key address starting with STM (not a Hive account name)
+                  </p>
+                  <p
+                    v-if="transferForm.to && !isRecipientValid"
+                    class="text-xs text-red-500"
+                  >
+                    Invalid address format. Must be a public key (STM...)
                   </p>
                 </div>
 
@@ -550,13 +773,12 @@ onMounted(async () => {
                     <Input
                       id="amount"
                       v-model="transferForm.amount"
-                      type="number"
-                      step="any"
-                      min="0"
+                      type="text"
+                      inputmode="decimal"
                       :placeholder="`Amount in ${tokenSymbol || tokenName}`"
                       :disabled="isTransferring"
                       class="pr-20 transition-colors"
-                      :class="transferForm.amount && Number(transferForm.amount) > 0 ? 'border-green-500 focus-visible:ring-green-500' : ''"
+                      :class="transferForm.amount ? (amountValidation.isValid ? 'border-green-500 focus-visible:ring-green-500' : 'border-red-500 focus-visible:ring-red-500') : ''"
                     />
                     <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground font-medium">
                       {{ tokenSymbol || 'TOK' }}
@@ -570,37 +792,34 @@ onMounted(async () => {
                       v-if="userBalance && Number(userBalance.amount) > 0"
                       type="button"
                       class="text-primary hover:text-primary/80 font-medium"
-                      @click="transferForm.amount = formattedUserBalance"
+                      @click="setMaxAmount"
                     >
-                      Max
+                      MAX
                     </button>
                   </div>
-                </div>
-
-                <div class="space-y-2">
-                  <Label
-                    for="memo"
-                    class="text-sm font-medium text-foreground"
+                  <p
+                    v-if="token"
+                    class="text-xs text-muted-foreground"
                   >
-                    Memo (Optional)
-                  </Label>
-                  <Textarea
-                    id="memo"
-                    v-model="transferForm.memo"
-                    placeholder="Optional transfer memo or note"
-                    rows="3"
-                    :disabled="isTransferring"
-                    class="resize-none"
-                  />
-                  <p class="text-xs text-muted-foreground">
-                    Add an optional note for this transaction
+                    Precision: {{ token.precision }} decimal places
+                  </p>
+                  <p
+                    v-if="transferForm.amount && !amountValidation.isValid && amountValidation.error"
+                    class="text-xs text-red-500"
+                  >
+                    {{ amountValidation.error }}
                   </p>
                 </div>
 
+                <MemoInput
+                  v-model="transferForm.memo"
+                  :disabled="isTransferring"
+                />
+
                 <Button
                   class="w-full"
                   size="lg"
-                  :disabled="isTransferring || !transferForm.to || !transferForm.amount || Number(transferForm.amount) <= 0"
+                  :disabled="isTransferring || !isRecipientValid || !amountValidation.isValid"
                   @click="handleTransfer"
                 >
                   <svg
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index ecaf90c..adff00e 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -14,7 +14,7 @@ import type {
   CtokensAppBalanceHistory,
   CtokensAppTopHolder
 } from '@/utils/wallet/ctokens/api';
-import type CTokensProvider from '@/utils/wallet/ctokens/signer';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 export interface CTokenDisplay {
   nai: string;
@@ -32,6 +32,7 @@ export interface CTokenDisplay {
   metadata?: Record<string, unknown>;
   // Parsed from the metadata
   name?: string;
+  symbol?: string;
   description?: string;
   website?: string;
   image?: string;
@@ -50,15 +51,15 @@ const formatAsset = async (value: string | bigint, precision: number, name?: str
 };
 
 const transformTokenToDisplayFormat = async (token: Required<CtokensAppToken>): Promise<CTokenDisplay> => {
-  const { name, description, website, image } = (token.metadata || {}) as Record<string, string>;
+  const { name, symbol, description, website, image } = (token.metadata || {}) as Record<string, string>;
 
   return {
     nai: token.nai,
     isStaked: isVesting(token.nai, token.precision),
-    displayMaxSupply: await formatAsset(token.max_supply, token.precision, name),
+    displayMaxSupply: await formatAsset(token.max_supply, token.precision, symbol || name),
     ownerPublicKey: token.owner,
     precision: token.precision,
-    displayTotalSupply: await formatAsset(token.total_supply, token.precision, name),
+    displayTotalSupply: await formatAsset(token.total_supply, token.precision, symbol || name),
     totalSupply: BigInt(token.total_supply),
     maxSupply: BigInt(token.max_supply),
     capped: token.capped,
@@ -67,6 +68,7 @@ const transformTokenToDisplayFormat = async (token: Required<CtokensAppToken>):
     isNft: token.is_nft,
     metadata: token.metadata as Record<string, unknown>,
     name,
+    symbol,
     description,
     website,
     image
@@ -299,6 +301,57 @@ export const useTokensStore = defineStore('tokens', {
     clearError () {
       this.lastError = null;
     },
+    async updateTokenMetadata (
+      nai: string,
+      precision: number,
+      metadata: Record<string, string>
+    ): Promise<void> {
+      const operationalKey = getUserOperationalKey();
+      if (!operationalKey)
+        throw new Error('No operational key available');
+
+      // Get management wallet from CTokensProvider
+      const managementWallet = CTokensProvider.getManagementWallet();
+      if (!managementWallet)
+        throw new Error('No management wallet available');
+
+      const { updateHTMAssetMetadata } = await import('@/utils/htm-utils');
+
+      // Convert metadata object to array of key-value pairs
+      const metadataItems = Object.entries(metadata).map(([key, value]) => ({
+        key,
+        value
+      }));
+
+      // Prepare metadata update data
+      const metadataUpdateData = {
+        owner: operationalKey,
+        identifier: {
+          amount: '0',
+          nai,
+          precision
+        },
+        metadata: metadataItems
+      };
+
+      // Get operational account from settings
+      const settingsStore = await import('@/stores/settings.store').then(m => m.useSettingsStore());
+      const operationalAccount = settingsStore.settings.account;
+
+      if (!operationalAccount)
+        throw new Error('No operational account configured');
+
+      // Broadcast the metadata update transaction
+      await updateHTMAssetMetadata(
+        metadataUpdateData,
+        managementWallet,
+        operationalAccount,
+        0.001 // Fee amount in HIVE
+      );
+
+      // Refresh token data after update
+      await this.loadRegisteredTokens(nai, precision, 1, true);
+    },
     reset (cTokensWallet?: CTokensProvider | undefined) {
       cTokensProvider.value = cTokensWallet;
     }
diff --git a/src/utils/htm-utils.ts b/src/utils/htm-utils.ts
index d08cb81..a43135e 100644
--- a/src/utils/htm-utils.ts
+++ b/src/utils/htm-utils.ts
@@ -9,7 +9,8 @@ import {
   type HTMUserSignupData,
   type HTMAssetDefinitionData,
   type HTMTokenTransferData,
-  type HTMUserMetadataUpdateData
+  type HTMUserMetadataUpdateData,
+  type HTMAssetMetadataUpdateData
 } from './htm';
 
 // Re-export types from htm.ts for convenience
@@ -17,7 +18,8 @@ export type {
   HTMUserSignupData,
   HTMAssetDefinitionData,
   HTMTokenTransferData,
-  HTMUserMetadataUpdateData
+  HTMUserMetadataUpdateData,
+  HTMAssetMetadataUpdateData
 } from './htm';
 
 /**
@@ -150,6 +152,52 @@ export async function updateHTMUserMetadata (
   return l1Tx.id.toString();
 }
 
+/**
+ * Update HTM asset metadata
+ * This is the full implementation using HTM library and beekeeper wallets.
+ */
+export async function updateHTMAssetMetadata (
+  metadataData: HTMAssetMetadataUpdateData,
+  wallet: IBeekeeperUnlockedWallet,
+  operationalAccount: string,
+  feeAmount = 0.001
+): Promise<string> {
+  const wax = await getWax();
+
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = operationalAccount;
+
+  // Create L2 HTM transaction for asset metadata update
+  const htmBuilder = await HTMTransactionBuilder.create();
+  htmBuilder.addAssetMetadataUpdate(metadataData);
+  await htmBuilder.sign(wallet);
+
+  // Create L1 transaction with optional fee transfer and HTM operation
+  const l1Tx = await wax.createTransaction();
+
+  // Add fee transfer operation if fee > 0
+  if (feeAmount > 0) {
+    l1Tx.pushOperation({
+      transfer_operation: {
+        from: operationalAccount,
+        to: 'fee.htm',
+        amount: wax.hiveCoins(feeAmount),
+        memo: 'L2 asset metadata update fee'
+      }
+    });
+  }
+
+  // Add HTM asset metadata update operation
+  l1Tx.pushOperation(htmBuilder.getTransaction());
+
+  // Sign with owner key (management key)
+  l1Tx.sign(wallet, metadataData.owner);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Tx);
+  return l1Tx.id.toString();
+}
+
 /**
  * Generate a random NAI identifier for new tokens
  */
diff --git a/src/utils/htm.ts b/src/utils/htm.ts
index 8289266..be70508 100644
--- a/src/utils/htm.ts
+++ b/src/utils/htm.ts
@@ -41,6 +41,19 @@ export interface HTMUserMetadataUpdateData {
   }[];
 }
 
+export interface HTMAssetMetadataUpdateData {
+  owner: TPublicKey;
+  identifier: {
+    amount: string;
+    nai: string;
+    precision: number;
+  };
+  metadata: {
+    key: string;
+    value: string;
+  }[];
+}
+
 /**
  * HTM Transaction Builder - Utility class for creating and managing HTM transactions
  */
@@ -113,6 +126,22 @@ export class HTMTransactionBuilder {
     return this;
   }
 
+  /**
+   * Add asset metadata update operation to the transaction
+   */
+  addAssetMetadataUpdate (data: HTMAssetMetadataUpdateData): this {
+    this.transaction.pushOperation({
+      asset_metadata_update_operation: {
+        owner: data.owner,
+        identifier: data.identifier,
+        metadata: {
+          items: data.metadata
+        }
+      }
+    });
+    return this;
+  }
+
   /**
    * Sign the transaction with the provided wallet
    */
@@ -278,6 +307,51 @@ export async function updateHTMUserMetadata (
   return l1Tx.id.toString();
 }
 
+/**
+ * Update HTM asset metadata
+ */
+export async function updateHTMAssetMetadata (
+  metadataData: HTMAssetMetadataUpdateData,
+  wallet: IBeekeeperUnlockedWallet,
+  operationalAccount: string,
+  feeAmount = 0.001
+): Promise<string> {
+  const wax = await getWax();
+
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = operationalAccount;
+
+  // Create L2 transaction for asset metadata update
+  const htmBuilder = await HTMTransactionBuilder.create();
+  htmBuilder.addAssetMetadataUpdate(metadataData);
+  await htmBuilder.sign(wallet);
+
+  // Create L1 transaction with optional fee transfer and HTM operation
+  const l1Tx = await wax.createTransaction();
+
+  // Add fee transfer operation if fee > 0
+  if (feeAmount > 0) {
+    l1Tx.pushOperation({
+      transfer_operation: {
+        from: operationalAccount,
+        to: 'fee.htm',
+        amount: wax.hiveCoins(feeAmount),
+        memo: 'L2 asset metadata update fee'
+      }
+    });
+  }
+
+  // Add HTM asset metadata update operation
+  l1Tx.pushOperation(htmBuilder.getTransaction());
+
+  // Sign with owner key (management key)
+  l1Tx.sign(wallet, metadataData.owner);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Tx);
+  return l1Tx.id.toString();
+}
+
 /**
  * Generate a random NAI identifier for new tokens
  */
-- 
GitLab


From a1bf607d54410a0f0f96336a24687d264d439ef1 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Wed, 15 Oct 2025 17:54:23 +0200
Subject: [PATCH 025/102] Improve user registration

---
 src/components/HTMTokenPreview.vue       |  54 ++--
 src/components/navigation/AppSidebar.vue |  22 +-
 src/pages/tokens/register-account.vue    | 305 +++++++++++------------
 src/pages/tokens/token.vue               |  24 +-
 src/utils/htm-utils.ts                   |   2 +-
 src/utils/htm.ts                         |   2 +-
 6 files changed, 181 insertions(+), 228 deletions(-)

diff --git a/src/components/HTMTokenPreview.vue b/src/components/HTMTokenPreview.vue
index 3282fc3..30bd388 100644
--- a/src/components/HTMTokenPreview.vue
+++ b/src/components/HTMTokenPreview.vue
@@ -162,37 +162,21 @@ const hasStakingFeatures = computed(() =>
         <!-- Token Info -->
         <div class="flex-1 min-w-0">
           <div class="flex flex-col gap-2 mb-1">
-            <CardTitle class="text-lg truncate">
-              {{ token.name || 'Unnamed Token' }}
-            </CardTitle>
-            <div class="flex flex-wrap gap-2">
-              <span
-                v-if="token.symbol"
-                class="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary border border-primary/20"
-              >
-                {{ token.symbol }}
-              </span>
+            <CardTitle class="text-lg truncate inline-flex gap-2 flex-wrap items-center">
+              <span>{{ token.name || 'Unnamed Token' }}</span>
               <span
                 v-if="token.isNft"
-                class="inline-flex items-center rounded-md bg-purple-500/10 px-2 py-1 text-xs font-medium text-purple-500 border border-purple-500/20"
+                class="inline-flex items-center rounded-md bg-purple-500/10 text-[12px]/[14px] px-1 font-medium text-purple-500 border border-purple-500/20"
               >
-                NFT
-              </span>
-              <span
-                :class="[
-                  'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
-                  token.capped ? 'bg-orange-500/10 text-orange-500 border-orange-500/20' : 'bg-gray-500/10 text-gray-500 border-gray-500/20'
-                ]"
-              >
-                {{ token.capped ? 'Capped' : 'Uncapped' }}
+                nft
               </span>
               <span
                 v-if="token.isStaked"
-                class="inline-flex items-center rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-500 border border-green-500/20"
+                class="inline-flex items-center rounded-md bg-blue-500/10  text-[12px]/[14px] px-1 font-medium text-blue-500 border border-blue-500/20"
               >
-                Staked
+                staked
               </span>
-            </div>
+            </CardTitle>
           </div>
           <CardDescription class="text-xs truncate">
             {{ token.nai || 'NAI will be generated' }}
@@ -265,16 +249,28 @@ const hasStakingFeatures = computed(() =>
         class="flex flex-wrap gap-2 pt-2"
       >
         <span
-          v-if="token.othersCanStake"
-          class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 border border-blue-200"
+          :class="[
+            'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
+            token.isNft ? 'bg-purple-50 text-purple-700 border-purple-200' : 'bg-emerald-50 text-emerald-700 border-emerald-200'
+          ]"
+        >
+          {{ token.isNft ? 'NFT' : 'Fungible' }}
+        </span>
+        <span
+          :class="[
+            'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
+            token.othersCanStake ? 'bg-blue-50 text-blue-500 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
+          ]"
         >
-          Staking ✓
+          {{ token.othersCanStake ? 'Staking ✓' : 'Staking ✗' }}
         </span>
         <span
-          v-if="token.othersCanUnstake"
-          class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 border border-blue-200"
+          :class="[
+            'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
+            token.othersCanUnstake ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
+          ]"
         >
-          Unstaking ✓
+          {{ token.othersCanUnstake ? 'Unstaking ✓' : 'Unstaking ✗' }}
         </span>
       </div>
 
diff --git a/src/components/navigation/AppSidebar.vue b/src/components/navigation/AppSidebar.vue
index ac6b449..5548f1b 100644
--- a/src/components/navigation/AppSidebar.vue
+++ b/src/components/navigation/AppSidebar.vue
@@ -51,28 +51,28 @@ const groups: { title: string; items: Array<{ title: string; url: string; icon:
 }, {
   title: 'Tokens',
   items: [
-    {
-      title: 'Tokens List',
-      url: '/tokens/list',
-      icon: mdiAccountGroup
-    },
-    {
-      title: 'Register HTM Account',
-      url: '/tokens/register-account',
-      icon: mdiAccountPlusOutline,
-      visible: hasNoHTMWallet
-    },
     {
       title: 'My HTM Account',
       url: '/tokens/my-balance',
       icon: mdiWallet,
       visible: hasHTMWallet
     },
+    {
+      title: 'Tokens List',
+      url: '/tokens/list',
+      icon: mdiAccountGroup
+    },
     {
       title: 'My Token Definitions',
       url: '/tokens/my-tokens',
       icon: mdiViewList,
       visible: hasHTMWallet
+    },
+    {
+      title: 'Register HTM Account',
+      url: '/tokens/register-account',
+      icon: mdiAccountPlusOutline,
+      visible: hasNoHTMWallet
     }
   ]
 }, {
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index cc98c0a..7c208d9 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { IBeekeeperInstance, IBeekeeperOptions } from '@hiveio/beekeeper';
-import beekeeperFactory from '@hiveio/beekeeper';
 import {
   mdiCheckCircle,
   mdiDownload,
@@ -14,20 +12,26 @@ import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-import HTMLoginForm from '@/components/HTMLoginForm.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
+import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+const walletStore = useWalletStore();
+const tokensStore = useTokensStore();
+const settingsStore = useSettingsStore();
+
 const router = useRouter();
 
-const showLoginForm = ref(false);
+const showLoginSuccess = ref(false);
 const showRegistrationForm = ref(false);
 const isLoading = ref(false);
 const hasConfirmedDownload = ref(false);
@@ -39,8 +43,6 @@ const registrationData = ref({
   about: '',                // Description/bio (optional)
   website: '',              // Website URL (optional)
   profile_image: '',        // Profile image URL (optional)
-  hiveAccount: '',          // Hive account name
-  hivePostingPrivateKey: '',// Hive posting private key (WIF format) - needed to sign L1 transaction
   walletPassword: '',       // Password to encrypt the wallet
   repeatPassword: ''        // Password confirmation
 });
@@ -88,8 +90,6 @@ const stepStatus = computed(() => ({
 // Form validation - only basic info needed in step 1
 const isBasicInfoValid = computed(() => {
   return registrationData.value.name.trim().length > 0 &&
-         registrationData.value.hiveAccount.trim().length > 0 &&
-         registrationData.value.hivePostingPrivateKey.trim().length > 0 &&
          registrationData.value.walletPassword.trim().length > 0 &&
          registrationData.value.repeatPassword.trim().length > 0 &&
          registrationData.value.walletPassword === registrationData.value.repeatPassword;
@@ -118,20 +118,19 @@ const generateAndDownloadKeys = async () => {
 
     const wax = await getWax();
 
-    // Generate operational key
-    const operationalBrainKey = wax.suggestBrainKey();
-    generatedKeys.value.operationalPrivateKey = operationalBrainKey.wifPrivateKey;
-
     // Derive public key for operational key
-    const bk = await beekeeperFactory();
-    const tempSession = bk.createSession(Math.random().toString());
-    const { wallet: tempWallet } = await tempSession.createWallet('temp', 'temp', true);
-    generatedKeys.value.operationalPublicKey = await tempWallet.importKey(operationalBrainKey.wifPrivateKey);
-
     // Generate management key (optional, but recommended)
     const managementBrainKey = wax.suggestBrainKey();
-    generatedKeys.value.managementPrivateKey = managementBrainKey.wifPrivateKey;
-    generatedKeys.value.managementPublicKey = await tempWallet.importKey(managementBrainKey.wifPrivateKey);
+
+    // Generate operational key
+    const operationalBrainKey = wax.suggestBrainKey();
+
+    generatedKeys.value = {
+      operationalPrivateKey: operationalBrainKey.wifPrivateKey,
+      operationalPublicKey: operationalBrainKey.associatedPublicKey,
+      managementPrivateKey: managementBrainKey.wifPrivateKey,
+      managementPublicKey: managementBrainKey.associatedPublicKey
+    };
 
     keysGenerated.value = true;
 
@@ -150,9 +149,7 @@ const generateAndDownloadKeys = async () => {
 
 // Download HTM keys file (similar to Hive authority data file)
 const downloadKeysFile = () => {
-  const cleanAccountName = registrationData.value.hiveAccount.startsWith('@')
-    ? registrationData.value.hiveAccount.slice(1)
-    : registrationData.value.hiveAccount;
+  const cleanAccountName = generatedKeys.value.operationalPublicKey;
 
   const keysFile = {
     account_name: cleanAccountName,
@@ -178,7 +175,7 @@ const downloadKeysFile = () => {
 
   const link = document.createElement('a');
   link.href = url;
-  link.download = `${cleanAccountName}-htm-keys.json`;
+  link.download = `htm-keys-${new Date().toISOString()}.json`;
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
@@ -199,14 +196,14 @@ const resetProcess = () => {
   toast.info('Process reset. You can generate new keys.');
 };
 
-// Show HTM login form
+// Show HTM login success
 const showHTMLogin = () => {
-  showLoginForm.value = true;
+  showLoginSuccess.value = true;
 };
 
 // Go back to main options
 const goBack = () => {
-  showLoginForm.value = false;
+  showLoginSuccess.value = false;
   showRegistrationForm.value = false;
   // Reset form data
   registrationData.value = {
@@ -214,8 +211,6 @@ const goBack = () => {
     about: '',
     website: '',
     profile_image: '',
-    hiveAccount: '',
-    hivePostingPrivateKey: '',
     walletPassword: '',
     repeatPassword: ''
   };
@@ -223,115 +218,98 @@ const goBack = () => {
 };
 
 // Handle successful login
-const onLoginSuccess = () => {
-  showLoginForm.value = false;
+const goToMyAccount = () => {
+  showLoginSuccess.value = false;
   // Redirect to my balance page after successful login
   router.push('/tokens/my-balance');
 };
 
-// Handle HTM account registration
+// @internal
 const registerHTMAccount = async () => {
   try {
     isLoading.value = true;
 
     // Validate that keys have been generated
-    if (!keysGenerated.value) {
-      toast.error('Please generate HTM keys first');
-      return;
-    }
+    if (!keysGenerated.value)
+      throw new Error('Please generate HTM keys first');
 
     // Validate that user confirmed download
-    if (!hasConfirmedDownload.value) {
-      toast.error('Please confirm you have saved the keys file');
-      return;
-    }
+    if (!hasConfirmedDownload.value)
+      throw new Error('Please confirm you have saved the keys file');
+
 
     // Validate passwords match
-    if (registrationData.value.walletPassword !== registrationData.value.repeatPassword) {
-      toast.error('Passwords do not match');
-      return;
-    }
+    if (registrationData.value.walletPassword !== registrationData.value.repeatPassword)
+      throw new Error('Passwords do not match');
+
 
     // Validate website URL if provided
-    if (registrationData.value.website && !isValidUrl(registrationData.value.website)) {
-      toast.error('Please enter a valid website URL');
-      return;
-    }
+    if (registrationData.value.website && !isValidUrl(registrationData.value.website))
+      throw new Error('Please enter a valid website URL');
+
 
     // Validate profile image URL if provided
-    if (registrationData.value.profile_image && !isValidUrl(registrationData.value.profile_image)) {
-      toast.error('Please enter a valid profile image URL');
-      return;
-    }
+    if (registrationData.value.profile_image && !isValidUrl(registrationData.value.profile_image))
+      throw new Error('Please enter a valid profile image URL');
+
 
     // Get wax instance
     const wax = await getWax();
 
     // Create temporary beekeeper wallet to import keys and sign transactions
-    toast.info('Creating HTM wallet...');
-
-    const beekeeper = await (import('@hiveio/beekeeper/vite') as unknown as Promise<{ createBeekeeper: (options: Partial<IBeekeeperOptions>) => Promise<IBeekeeperInstance> }>)
-      .then(bk => bk.createBeekeeper({ enableLogs: false, inMemory: true }));
-
-    const tempSession = beekeeper.createSession(Math.random().toString());
-    const tempWalletName = `registration-${Date.now()}`;
-
-    const { wallet: tempWallet } = await tempSession.createWallet(tempWalletName, 'temp-password', true);
-
-    const hivePostingPublicKey = await tempWallet.importKey(registrationData.value.hivePostingPrivateKey.trim());
-    const operationalPublicKey = generatedKeys.value.operationalPublicKey;
-    const managementPublicKey = generatedKeys.value.managementPublicKey;
-
-    await tempWallet.importKey(generatedKeys.value.operationalPrivateKey);
-    await tempWallet.importKey(generatedKeys.value.managementPrivateKey);
 
     // Create HTM wallet for persistent storage
-    await CTokensProvider.createWallet(
+    const keys = await CTokensProvider.createWallet(
       registrationData.value.walletPassword,
       generatedKeys.value.operationalPrivateKey,
       generatedKeys.value.managementPrivateKey
     );
 
+    await CTokensProvider.login(
+      registrationData.value.walletPassword
+    );
+
+    if (typeof settingsStore.settings.account === 'undefined' || walletStore.isL2Wallet)
+      throw new Error('Setting HTM Account via proxy is not supported yet. Please log in using your L1 wallet first.');
+
     // Set proxy account for HTM transactions
-    HtmTransaction.HiveProxyAccount = registrationData.value.hiveAccount;
+    HtmTransaction.HiveProxyAccount = settingsStore.settings.account;
 
     // Create Layer 2 HTM transaction for user signup
-    toast.info('Preparing HTM registration transaction...');
     const l2Transaction = new HtmTransaction(wax);
 
     l2Transaction.pushOperation({
       user_signup_operation: {
-        hive_account: registrationData.value.hiveAccount,
-        management_key: managementPublicKey,
-        operational_key: operationalPublicKey
+        hive_account: settingsStore.settings.account,
+        management_key: keys.management!,
+        operational_key: keys.operational
       }
     });
 
-    l2Transaction.sign(tempWallet);
+    tokensStore.reset(await CTokensProvider.for(wax, 'owner'));
+
+    await tokensStore.wallet?.signTransaction(l2Transaction);
 
     // Create Layer 1 transaction and broadcast
     const l1Transaction = await wax.createTransaction();
     l1Transaction.pushOperation(l2Transaction);
 
     // Sign Layer 1 transaction with the Hive posting key
-    toast.info('Signing transaction with Hive posting key...');
-    l1Transaction.sign(tempWallet, hivePostingPublicKey);
+    await walletStore.createWalletFor(settingsStore.settings, 'posting');
+    await walletStore.wallet!.signTransaction(l1Transaction);
 
     // Broadcast the transaction
-    toast.info('Broadcasting HTM registration transaction...');
     await wax.broadcast(l1Transaction);
 
     // Success!
-    toast.success('HTM Account registered successfully!', {
-      description: `Account ${registrationData.value.hiveAccount} has been registered on the Hive Token Machine`
-    });
+    toast.success('HTM Account registered successfully!');
 
     // After successful registration, redirect to login
     showRegistrationForm.value = false;
     showHTMLogin();
 
   } catch (error) {
-    toastError('Failed to register HTM account', error);
+    toastError('Failed to create HTM account', error);
   } finally {
     isLoading.value = false;
   }
@@ -340,19 +318,49 @@ const registerHTMAccount = async () => {
 
 <template>
   <div class="container mx-auto py-12 px-4 max-w-2xl">
-    <!-- Show HTM Login Form -->
-    <div
-      v-if="showLoginForm"
-      class="flex justify-center"
+    <!-- Show HTM Login Success -->
+    <Card
+      v-if="showLoginSuccess"
+      class="w-full"
     >
-      <HTMLoginForm
-        :show-close-button="true"
-        title="HTM Login"
-        description="Login to your existing HTM account or create a new one"
-        @success="onLoginSuccess"
-        @close="goBack"
-      />
-    </div>
+      <CardContent class="pt-6">
+        <div class="flex flex-col items-center text-center space-y-6">
+          <!-- Success Icon -->
+          <div class="w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center">
+            <svg
+              width="32"
+              height="32"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="text-green-600 dark:text-green-400"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiCheckCircle"
+              />
+            </svg>
+          </div>
+
+          <div class="space-y-2">
+            <h2 class="text-2xl font-semibold text-green-600 dark:text-green-400">
+              Welcome to HTM!
+            </h2>
+            <p class="text-muted-foreground">
+              You are now successfully logged in to your HTM account. You can manage your tokens, create new ones, and explore all the features available.
+            </p>
+          </div>
+
+          <!-- Action Button -->
+          <Button
+            size="lg"
+            class="mt-4"
+            @click="goToMyAccount"
+          >
+            Go to My Account
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
 
     <!-- Show HTM Registration Form -->
     <Card
@@ -469,74 +477,6 @@ const registerHTMAccount = async () => {
               </p>
             </div>
 
-            <!-- Hive Account (required) -->
-            <div class="space-y-2">
-              <Label for="hive-account">
-                Hive Account Name *
-              </Label>
-              <Input
-                id="hive-account"
-                v-model="registrationData.hiveAccount"
-                type="text"
-                placeholder="your-hive-account"
-                required
-                pattern="[a-z0-9\-\.]+"
-                maxlength="16"
-              />
-              <p class="text-xs text-muted-foreground">
-                Your existing Hive blockchain account name
-              </p>
-            </div>
-
-            <!-- Hive Posting Private Key (required) -->
-            <div class="space-y-2">
-              <Label for="hive-posting-private-key">
-                Hive Posting Private Key *
-              </Label>
-              <Input
-                id="hive-posting-private-key"
-                v-model="registrationData.hivePostingPrivateKey"
-                type="password"
-                placeholder="5..."
-                required
-                class="font-mono text-sm"
-              />
-              <p class="text-xs text-muted-foreground">
-                Your Hive posting private key (required to register on HTM)
-              </p>
-            </div>
-
-            <!-- Wallet Password (required) -->
-            <div class="space-y-2">
-              <Label for="wallet-password">
-                Wallet Password *
-              </Label>
-              <Input
-                id="wallet-password"
-                v-model="registrationData.walletPassword"
-                type="password"
-                placeholder="Enter a secure password"
-                required
-              />
-              <p class="text-xs text-muted-foreground">
-                Create a password to encrypt and secure your HTM wallet locally
-              </p>
-            </div>
-
-            <!-- Repeat Password (required) -->
-            <div class="space-y-2">
-              <Label for="repeat-password">
-                Repeat Password *
-              </Label>
-              <Input
-                id="repeat-password"
-                v-model="registrationData.repeatPassword"
-                type="password"
-                placeholder="Repeat your password"
-                required
-              />
-            </div>
-
             <!-- About/Description (optional) -->
             <div class="space-y-2">
               <Label for="account-about">
@@ -580,6 +520,45 @@ const registerHTMAccount = async () => {
 
           <Separator />
 
+          <!-- Wallet Password (required) -->
+          <div class="space-y-2">
+            <Label for="wallet-password">
+              Wallet Password *
+            </Label>
+            <Input
+              id="wallet-password"
+              v-model="registrationData.walletPassword"
+              type="password"
+              placeholder="Enter a secure password"
+              required
+            />
+            <p class="text-xs text-muted-foreground">
+              Create a password to encrypt and secure your HTM wallet locally
+            </p>
+          </div>
+
+          <!-- Repeat Password (required) -->
+          <div class="space-y-2">
+            <Label for="repeat-password">
+              Repeat Password *
+            </Label>
+            <Input
+              id="repeat-password"
+              v-model="registrationData.repeatPassword"
+              type="password"
+              placeholder="Repeat your password"
+              required
+            />
+          </div>
+
+          <div v-if="registrationData.walletPassword && registrationData.repeatPassword && registrationData.walletPassword !== registrationData.repeatPassword">
+            <p class="text-sm text-red-500">
+              Passwords do not match
+            </p>
+          </div>
+
+          <Separator />
+
           <!-- Step 2: Generate HTM Keys -->
           <div class="space-y-4">
             <div class="flex items-center justify-between">
@@ -663,7 +642,7 @@ const registerHTMAccount = async () => {
                 <div>
                   <Label class="text-xs text-muted-foreground">Operational Public Key</Label>
                   <Input
-                    :value="generatedKeys.operationalPublicKey"
+                    :default-value="generatedKeys.operationalPublicKey"
                     readonly
                     class="font-mono text-xs bg-white dark:bg-gray-800"
                   />
@@ -671,7 +650,7 @@ const registerHTMAccount = async () => {
                 <div>
                   <Label class="text-xs text-muted-foreground">Management Public Key</Label>
                   <Input
-                    :value="generatedKeys.managementPublicKey"
+                    :default-value="generatedKeys.managementPublicKey"
                     readonly
                     class="font-mono text-xs bg-white dark:bg-gray-800"
                   />
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index d22a612..01e49d0 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -471,7 +471,7 @@ onMounted(async () => {
                   :src="tokenImage"
                   :alt="tokenName"
                 />
-                <AvatarFallback class="bg-primary/10">
+                <AvatarFallback>
                   <svg
                     v-if="!tokenImage"
                     width="48"
@@ -499,28 +499,6 @@ onMounted(async () => {
                   <h1 class="text-2xl sm:text-3xl font-bold text-foreground">
                     {{ tokenName }}
                   </h1>
-                  <div class="flex flex-wrap gap-2">
-                    <span
-                      v-if="tokenSymbol"
-                      class="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary border border-primary/20"
-                    >
-                      {{ tokenSymbol }}
-                    </span>
-                    <span
-                      v-if="token.is_nft"
-                      class="inline-flex items-center rounded-md bg-purple-500/10 px-2 py-1 text-xs font-medium text-purple-500 border border-purple-500/20"
-                    >
-                      NFT
-                    </span>
-                    <span
-                      :class="[
-                        'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
-                        token.capped ? 'bg-orange-500/10 text-orange-500 border-orange-500/20' : 'bg-gray-500/10 text-gray-500 border-gray-500/20'
-                      ]"
-                    >
-                      {{ token.capped ? 'Capped' : 'Uncapped' }}
-                    </span>
-                  </div>
                 </div>
 
                 <p
diff --git a/src/utils/htm-utils.ts b/src/utils/htm-utils.ts
index a43135e..0c525e4 100644
--- a/src/utils/htm-utils.ts
+++ b/src/utils/htm-utils.ts
@@ -1,4 +1,4 @@
-import type { IBeekeeperUnlockedWallet } from '@hiveio/beekeeper';
+import type { IBeekeeperUnlockedWallet } from '@hiveio/beekeeper/vite';
 import type { TPublicKey } from '@hiveio/wax';
 import { HtmTransaction } from '@mtyszczak-cargo/htm';
 
diff --git a/src/utils/htm.ts b/src/utils/htm.ts
index be70508..35e22ef 100644
--- a/src/utils/htm.ts
+++ b/src/utils/htm.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-member-accessibility */
-import type { IBeekeeperUnlockedWallet } from '@hiveio/beekeeper';
+import type { IBeekeeperUnlockedWallet } from '@hiveio/beekeeper/vite';
 import type { TPublicKey, IWaxBaseInterface } from '@hiveio/wax';
 import { HtmTransaction } from '@mtyszczak-cargo/htm';
 
-- 
GitLab


From bd122938d36b568223a83e7fdf0d05cd2b1b95b7 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Wed, 15 Oct 2025 18:44:00 +0200
Subject: [PATCH 026/102] Implement creating tokens

---
 src/components/HTMLoginForm.vue         |  47 ++++---
 src/components/HTMTokenPreview.vue      |   5 -
 src/components/navigation/AppHeader.vue |   4 +-
 src/pages/tokens/create.vue             | 159 ++++++++++++++----------
 src/pages/tokens/token.vue              |   3 +-
 5 files changed, 126 insertions(+), 92 deletions(-)

diff --git a/src/components/HTMLoginForm.vue b/src/components/HTMLoginForm.vue
index 53c1d23..3f92445 100644
--- a/src/components/HTMLoginForm.vue
+++ b/src/components/HTMLoginForm.vue
@@ -9,8 +9,10 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { UsedWallet, getWalletIcon, useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
 import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
+import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
@@ -37,6 +39,8 @@ const isLoading = ref(false);
 // Existing account login
 const password = ref('');
 
+const tokensStore = useTokensStore();
+
 // Check if user already has HTM wallet configured (only needs password)
 const hasHTMWallet = computed(() => CTokensProvider.isLoggedIn());
 
@@ -44,18 +48,33 @@ const close = () => {
   emit('close');
 };
 
+const handleConditionalSiteLogin = async (operationalKey: string) => {
+  const wax = await getWax();
+
+  if (walletStore.wallet !== undefined && !walletStore.isL2Wallet) {
+    // Already logged in using L1 wallet, so just add another layer on top of that
+    tokensStore.reset(await CTokensProvider.for(wax, 'posting'));
+
+    return;
+  }
+
+  // Not logged in using any wallet so allow user log in using HTM wallet
+
+  // Set settings with the operational key as account and CTOKENS wallet
+  settingsStore.setSettings({
+    account: operationalKey,
+    wallet: UsedWallet.CTOKENS_IMPLEMENTATION
+  });
+
+  // Create wallet provider and parse user data
+  await walletStore.createWalletFor(settingsStore.settings, 'posting');
+  await userStore.parseUserData(operationalKey);
+};
+
 // Handle account creation from HTMLoginContent
 const handleSetAccount = async (account: string) => {
   try {
-    // Set settings with the operational key as account and CTOKENS wallet
-    await settingsStore.setSettings({
-      account: account,
-      wallet: UsedWallet.CTOKENS_IMPLEMENTATION
-    });
-
-    // Create wallet provider and parse user data
-    await walletStore.createWalletFor(settingsStore.settings, 'posting');
-    await userStore.parseUserData(account);
+    await handleConditionalSiteLogin(account);
 
     toast.success('HTM wallet created successfully!');
     emit('success');
@@ -77,15 +96,7 @@ const loginExisting = async () => {
     if (!operationalKey)
       throw new Error('Failed to get operational key after login');
 
-    // Set settings with the operational key as account and CTOKENS wallet
-    await settingsStore.setSettings({
-      account: operationalKey,
-      wallet: UsedWallet.CTOKENS_IMPLEMENTATION
-    });
-
-    // Create wallet provider and parse user data
-    await walletStore.createWalletFor(settingsStore.settings, 'posting');
-    await userStore.parseUserData(operationalKey);
+    await handleConditionalSiteLogin(operationalKey);
 
     toast.success('Logged in successfully!');
     emit('success');
diff --git a/src/components/HTMTokenPreview.vue b/src/components/HTMTokenPreview.vue
index 30bd388..14da7bd 100644
--- a/src/components/HTMTokenPreview.vue
+++ b/src/components/HTMTokenPreview.vue
@@ -110,10 +110,6 @@ const displayMaxSupply = computed(() => {
   const symbol = props.token.symbol || props.token.name;
   return symbol ? `${formatted} ${symbol}` : formatted;
 });
-
-const hasStakingFeatures = computed(() =>
-  props.token.othersCanStake || props.token.othersCanUnstake
-);
 </script>
 
 <template>
@@ -245,7 +241,6 @@ const hasStakingFeatures = computed(() =>
 
       <!-- Token Feature Badges -->
       <div
-        v-if="hasStakingFeatures"
         class="flex flex-wrap gap-2 pt-2"
       >
         <span
diff --git a/src/components/navigation/AppHeader.vue b/src/components/navigation/AppHeader.vue
index aef4594..f515619 100644
--- a/src/components/navigation/AppHeader.vue
+++ b/src/components/navigation/AppHeader.vue
@@ -39,13 +39,13 @@ const logout = () => {
             :src="userStore.profileImage"
           />
           <AvatarFallback v-if="settingsStore.isLoaded && hasUser">
-            {{ userStore.name?.slice(1, 3) }}
+            {{ userStore.userDisplayName?.slice(1, 3) }}
           </AvatarFallback>
         </Avatar>
         <span
           v-if="settingsStore.isLoaded && hasUser"
           class="font-bold max-w-[150px] md:max-w-full truncate"
-        >{{ userStore.name }}</span>
+        >{{ userStore.userDisplayName }}</span>
       </div>
       <div class="ml-auto inline-flex items-center space-x-4 md:space-x-6">
         <ThemeSwitch class="w-6 h-6" />
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index a44790a..6d456a9 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -6,6 +6,7 @@ import {
   mdiRocket,
   mdiLoading
 } from '@mdi/js';
+import { HtmTransaction, type asset, type asset_definition } from '@mtyszczak-cargo/htm';
 import { computed, ref, watch } from 'vue';
 import { toast } from 'vue-sonner';
 
@@ -19,13 +20,18 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
+import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
+import { useWalletStore } from '@/stores/wallet.store';
+import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
-import { createHTMAsset, generateNAI as generateHTMNAI, parseAssetAmount } from '@/utils/htm-utils';
+import { generateNAI as generateHTMNAI, parseAssetAmount } from '@/utils/htm-utils';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 const tokensStore = useTokensStore();
+const walletStore = useWalletStore();
+const settingsStore = useSettingsStore();
 
 // Form state
 const tokenName = ref('');
@@ -33,7 +39,8 @@ const tokenSymbol = ref('');
 const tokenDescription = ref('');
 const initialSupply = ref('1000000');
 const precision = ref('3');
-const canStake = ref(false);
+const othersCanStake = ref(true);
+const othersCanUnstake = ref(true);
 const capped = ref(true);
 const agreedToDisclaimer = ref(false);
 
@@ -75,8 +82,9 @@ const shouldShowNAIField = computed(() => {
 const isFormValid = computed(() => {
   return tokenName.value.trim() !== '' &&
          symbolValidation.value.isValid &&
-         initialSupply.value.trim() !== '' &&
+         initialSupply.value !== '' &&
          parseInt(initialSupply.value) > 0 &&
+         BigInt(initialSupply.value) <= BigInt('9223372036854775807') &&
          parseInt(precision.value) >= 0 &&
          parseInt(precision.value) <= 12 &&
          agreedToDisclaimer.value;
@@ -117,14 +125,15 @@ watch(tokenSymbol, (newSymbol) => {
 });
 
 // Generate unique token ID
-const generateNAI = () => {
+const generateNAI = (): string | undefined => {
   if (!symbolValidation.value.isValid)
     return;
 
   try {
     generatedNAI.value = generateHTMNAI();
     naiGenerated.value = true;
-    toast.success('Token ID generated successfully!');
+
+    return generatedNAI.value;
   } catch (error) {
     toastError('Failed to generate token ID', error);
   }
@@ -159,18 +168,19 @@ const createToken = async () => {
     return;
   }
 
-  // Get the beekeeper wallet from CTokensProvider
-  const beekeeperWallet = CTokensProvider.getOperationalWallet();
-  if (!beekeeperWallet) {
-    toast.error('Beekeeper wallet not available. Please ensure you are logged in with HTM wallet.');
+  // Check if user has a wallet connected
+  if (walletStore.isL2Wallet) {
+    toast.error('Please connect your L1 wallet first');
     return;
-  }  // Ensure NAI is generated before creating token
+  }
+
+  // For fee payment
+  await walletStore.createWalletFor(settingsStore.settings, 'active');
+
   if (!generatedNAI.value) {
-    generateNAI();
-    // Wait a moment for generation to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
+    const nai = generateNAI();
 
-    if (!generatedNAI.value) {
+    if (!nai) {
       toast.error('Failed to generate token NAI. Please try again.');
       return;
     }
@@ -179,33 +189,74 @@ const createToken = async () => {
   isCreatingToken.value = true;
 
   try {
+    const wax = await getWax();
+
+    tokensStore.reset(await CTokensProvider.for(wax, 'active'));
+
+    const identifier: asset = {
+      amount: parseAssetAmount(initialSupply.value, parseInt(precision.value)),
+      nai: generatedNAI.value,
+      precision: parseInt(precision.value)
+    };
+    const owner = tokensStore.wallet.publicKey!;
+    const assetTokenName = tokenName.value.trim();
+
     // Prepare HTM asset definition data
-    const assetData = {
-      identifier: {
-        amount: parseAssetAmount(initialSupply.value, parseInt(precision.value)),
-        nai: generatedNAI.value,
-        precision: parseInt(precision.value)
-      },
+    const assetDefinition: asset_definition = {
+      identifier,
       capped: capped.value,
       maxSupply: capped.value ? parseAssetAmount(initialSupply.value, parseInt(precision.value)) : '0',
-      owner: tokensStore.wallet.publicKey
+      owner,
+      metadata: {
+        items: [
+          { key: 'name', value: assetTokenName },
+          { key: 'symbol', value: tokenSymbol.value.trim() },
+          { key: 'description', value: tokenDescription.value.trim() }
+        ]
+      },
+      isNft: false,
+      othersCanStake: othersCanStake.value,
+      othersCanUnstake: othersCanUnstake.value
     };
 
-    // Create the HTM asset
-    await createHTMAsset(
-      assetData,
-      beekeeperWallet,
-      'token-creator', // This should be the operational account
-      1.0 // Fee amount
-    );
+    // Set proxy account for HTM transactions
+    HtmTransaction.HiveProxyAccount = settingsStore.settings.account!;
 
+    // Create Layer 2 HTM transaction for user signup
+    const l2Transaction = new HtmTransaction(wax);
+
+    l2Transaction.pushOperation({
+      asset_definition_operation: assetDefinition
+    });
+
+    await tokensStore.wallet!.signTransaction(l2Transaction);
+
+    // Create Layer 1 transaction and broadcast
+    const l1Transaction = await wax.createTransaction();
+    l1Transaction.pushOperation({
+      transfer_operation: {
+        from: settingsStore.settings.account!,
+        to: 'htm.fee',
+        amount: wax.hiveCoins(1),
+        memo: `${assetTokenName} creation fee`
+      }
+    });
+    l1Transaction.pushOperation(l2Transaction);
+
+    // Sign Layer 1 transaction with the Hive active key
+    await walletStore.createWalletFor(settingsStore.settings, 'active');
+    await walletStore.wallet!.signTransaction(l1Transaction);
+
+    // Broadcast the transaction
+    await wax.broadcast(l1Transaction);
+
+    // Success!
     toast.success('Token created successfully!', {
-      description: `Token ${tokenSymbol.value} has been created and deployed to the Hive Token Machine.`
+      description: `Token ${assetTokenName} has been created and deployed to the Hive Token Machine.`
     });
 
     // Reset form
     resetForm();
-
   } catch (error) {
     toastError('Failed to create token', error);
   } finally {
@@ -220,25 +271,13 @@ const resetForm = () => {
   tokenDescription.value = '';
   initialSupply.value = '1000000';
   precision.value = '3';
-  canStake.value = false;
+  othersCanStake.value = false;
+  othersCanUnstake.value = false;
   agreedToDisclaimer.value = false;
   generatedNAI.value = '';
   naiGenerated.value = false;
 };
 
-// Format number with commas
-const formatNumber = (value: string) => {
-  const num = parseInt(value.replace(/,/g, ''));
-  return isNaN(num) ? value : num.toLocaleString();
-};
-
-// Handle supply input
-const onSupplyInput = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  const value = target.value.replace(/[^0-9]/g, '');
-  initialSupply.value = value;
-};
-
 // Handle symbol input - transform to uppercase letters only
 watch(tokenSymbol, (newValue) => {
   const cleaned = newValue.replace(/[^A-Za-z]/g, '').toUpperCase();
@@ -256,8 +295,8 @@ const previewToken = computed(() => ({
   maxSupply: capped.value ? initialSupply.value : undefined,
   precision: parseInt(precision.value) || 3,
   capped: capped.value,
-  othersCanStake: canStake.value,
-  othersCanUnstake: canStake.value,
+  othersCanStake: othersCanStake.value,
+  othersCanUnstake: othersCanUnstake.value,
   ownerPublicKey: tokensStore.wallet?.publicKey
 }));
 </script>
@@ -347,10 +386,9 @@ const previewToken = computed(() => ({
                 <Label for="initial-supply">Initial Supply *</Label>
                 <Input
                   id="initial-supply"
-                  :value="formatNumber(initialSupply)"
-                  placeholder="1,000,000"
+                  v-model="initialSupply"
+                  placeholder="1000000"
                   :disabled="isCreatingToken"
-                  @input="onSupplyInput"
                 />
                 <p class="text-xs text-muted-foreground">
                   Total number of tokens to create
@@ -378,25 +416,12 @@ const previewToken = computed(() => ({
 
               <!-- Staking Options -->
               <div class="space-y-3">
-                <div class="flex items-center space-x-2">
-                  <Checkbox
-                    id="can-stake"
-                    v-model="canStake"
-                    :disabled="isCreatingToken"
-                  />
-                  <Label
-                    for="can-stake"
-                    class="text-sm font-normal"
-                  >
-                    Allow token staking
-                  </Label>
-                </div>
-
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-3 ml-6">
                   <div class="flex items-center space-x-2">
                     <Checkbox
                       id="others-can-stake"
-                      :disabled="isCreatingToken || !canStake"
+                      v-model="othersCanStake"
+                      :disabled="isCreatingToken"
                     />
                     <Label
                       for="others-can-stake"
@@ -409,7 +434,8 @@ const previewToken = computed(() => ({
                   <div class="flex items-center space-x-2">
                     <Checkbox
                       id="others-can-unstake"
-                      :disabled="isCreatingToken || !canStake"
+                      v-model="othersCanUnstake"
+                      :disabled="isCreatingToken"
                     />
                     <Label
                       for="others-can-unstake"
@@ -505,7 +531,8 @@ const previewToken = computed(() => ({
                   <p class="text-sm">
                     Tokens are created on the Hive Token Machine. Please verify all details before creation
                     as they cannot be changed after deployment. Token symbols should be unique to avoid confusion.
-                    <strong>A transaction fee will be required to create the token.</strong>
+                    <strong>A transaction fee of 1.000 (one) HIVE will be required to create the token.
+                      This will require user to have a Hive account with active key configured</strong>
                   </p>
 
                   <div class="flex items-center space-x-2 mt-3">
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 01e49d0..8c845e9 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -155,6 +155,7 @@ const loadTokenDetails = async () => {
     await updateFormattedValues();
 
     // Load user balance if user is logged in
+    // FIX THIS
     if (isLoggedIn.value) {
       try {
         // Get user balances from the store
@@ -759,7 +760,7 @@ onMounted(async () => {
                       :class="transferForm.amount ? (amountValidation.isValid ? 'border-green-500 focus-visible:ring-green-500' : 'border-red-500 focus-visible:ring-red-500') : ''"
                     />
                     <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground font-medium">
-                      {{ tokenSymbol || 'TOK' }}
+                      {{ tokenSymbol }}
                     </span>
                   </div>
                   <div class="flex justify-between text-xs">
-- 
GitLab


From 91fec3008afc40efcd63de825beb8278353aa87b Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 16 Oct 2025 04:53:06 +0200
Subject: [PATCH 027/102] Add logging in using L1 + L2 separately

---
 src/App.vue                                  |   5 +-
 src/assets/icons/hive.svg                    |   6 +
 src/components/HTMHeader.vue                 | 120 +++++++++++++++++++
 src/components/HTMLoginForm.vue              |   2 +-
 src/components/HTMView.vue                   |  20 ++--
 src/components/navigation/AppHeader.vue      |  31 ++++-
 src/components/wallet/HTMProvidePassword.vue |  18 ++-
 src/pages/tokens/create.vue                  |   2 +-
 src/pages/tokens/register-account.vue        |   2 +-
 src/pages/tokens/token.vue                   |  11 --
 src/stores/metamask.store.ts                 |   1 -
 src/stores/tokens.store.ts                   |  32 ++++-
 src/stores/wallet.store.ts                   |   2 +-
 src/utils/wallet/ctokens/signer.ts           |   8 ++
 14 files changed, 224 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/icons/hive.svg
 create mode 100644 src/components/HTMHeader.vue

diff --git a/src/App.vue b/src/App.vue
index fa7c2a1..15bcec1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,8 @@ import AppSidebar from '@/components/navigation';
 import AppHeader from '@/components/navigation/AppHeader.vue';
 import { SidebarProvider } from '@/components/ui/sidebar';
 import HTMProvidePassword from '@/components/wallet/HTMProvidePassword.vue';
-import { UsedWallet , useSettingsStore } from '@/stores/settings.store';
+import type { UsedWallet } from '@/stores/settings.store';
+import { useSettingsStore } from '@/stores/settings.store';
 import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
 
@@ -73,7 +74,7 @@ const complete = async (data: { account: string; wallet: UsedWallet }) => {
           v-if="walletStore.isProvideWalletPasswordModalOpen"
           class="fixed inset-0 flex items-center justify-center z-20"
         >
-          <HTMProvidePassword v-if="settingsStore.settings.wallet === UsedWallet.CTOKENS_IMPLEMENTATION" />
+          <HTMProvidePassword />
         </aside>
       </SidebarProvider>
       <Toaster
diff --git a/src/assets/icons/hive.svg b/src/assets/icons/hive.svg
new file mode 100644
index 0000000..60d2b12
--- /dev/null
+++ b/src/assets/icons/hive.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50" viewBox="0 0 50 50"><style>.c{fill:#e31337;}</style>
+<g transform="matrix(0.22 0 0 0.22 25 25)"><g><g transform="matrix(1 0 0 1 9.98 0)">
+<path class="c" transform="translate(-120, -95)" d="M 157.27 107.26 C 157.59550718851202 107.28803453556017 157.8867940105528 107.47331027241086 158.05017441300336 107.75623731080088 C 158.21355481545393 108.0391643491909 158.22842414272077 108.38406145626317 158.09 108.68 L 111.34 189.53 C 111.16262187747556 189.81410152059811 110.85479421739262 189.9905393257676 110.52000000000001 190 L 81.94 190 C 81.60177905846827 190.00064518341455 81.2892867422873 189.8195387262217 81.1217047125343 189.52575294566708 C 80.95412268278129 189.23196716511242 80.95729050451172 188.87080105178703 81.13 188.58 L 127.88 107.73000000000002 C 128.04718686772347 107.44041661601455 128.35562313181325 107.26144742574024 128.69 107.26000000000002 Z M 129.48 84.09 C 129.14520578260738 84.08053932576762 128.83737812252446 83.90410152059812 128.66 83.62 L 81.13 1.42 C 80.9572905045117 1.129198948212992 80.95412268278127 0.7680328348875951 81.12170471253428 0.4742470543329369 C 81.28928674228729 0.1804612737782787 81.60177905846827 -0.0006451834145517754 81.94 0 L 110.52 0 C 110.85479421739261 0.009460674232391096 111.16262187747554 0.1858984794018836 111.33999999999999 0.46999999999999975 L 158.87 82.67 C 159.04270949548828 82.96080105178702 159.04587731721873 83.32196716511241 158.87829528746573 83.61575294566707 C 158.7107132577127 83.90953872622173 158.39822094153175 84.09064518341455 158.06 84.09 Z" stroke-linecap="round"/>
+</g><g>
+<path class="c" transform="translate(-110, -95)" d="M 135.13 1.42 C 134.95066767946898 1.1198413280657535 134.95275574583977 0.7449493368468116 135.1354204725965 0.4468069092668695 C 135.31808519935322 0.14866448168692736 135.65113723566728 -0.023453809637205003 136 0 L 164.62 0 C 164.95493536363585 -0.0006228108660463062 165.26433333858506 0.17890440916621442 165.43 0.4700000000000004 L 219.92000000000002 94.53 C 220.0900051921206 94.82027341417273 220.0900051921206 95.17972658582727 219.92000000000002 95.47 L 165.43 189.53 C 165.26433333858506 189.82109559083378 164.95493536363585 190.00062281086605 164.62 190 L 136 190 C 135.6599937714216 190.00428165843292 135.3441820026906 189.82460721332617 135.17414011865083 189.53014443852558 C 135.00409823461106 189.23568166372502 135.00633907417142 188.87234303636552 135.18 188.58 L 189.34 95 Z M 111.86999999999999 94.52 C 112.04863279495407 94.8294010767585 112.04863279495407 95.21059892324149 111.86999999999999 95.52 L 57.13 189.53 C 56.943565207359455 189.8021638588064 56.63489558643201 189.96486727222714 56.30500000000001 189.96486727222714 C 55.975104413568005 189.96486727222714 55.66643479264055 189.8021638588064 55.480000000000004 189.53 L 0.13 95.48 C -0.04863279495408171 95.1705989232415 -0.04863279495408185 94.78940107675851 0.12999999999999978 94.48 L 54.87 0.47 C 55.056434792640545 0.19783614119359838 55.36510441356799 0.0351327277728668 55.69499999999999 0.0351327277728668 C 56.024895586431995 0.0351327277728668 56.33356520735945 0.19783614119359844 56.519999999999996 0.47 Z" stroke-linecap="round"/>
+</g></g></g></svg>
\ No newline at end of file
diff --git a/src/components/HTMHeader.vue b/src/components/HTMHeader.vue
new file mode 100644
index 0000000..5bde430
--- /dev/null
+++ b/src/components/HTMHeader.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { mdiLogout } from '@mdi/js';
+import { computed, onMounted, ref, watch } from 'vue';
+
+import cTokensLogoUrl from '@/assets/icons/wallets/ctokens.svg';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { useTokensStore } from '@/stores/tokens.store';
+import { useWalletStore } from '@/stores/wallet.store';
+import { toastError } from '@/utils/parse-error';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+const tokensStore = useTokensStore();
+const walletStore = useWalletStore();
+
+const userMetadata = ref<{
+  displayName: string;
+  about?: string;
+  name?: string;
+  profileImage?: string;
+  website?: string;
+} | undefined>(undefined);
+
+const hasUser = computed(() => tokensStore.wallet !== undefined && userMetadata.value !== undefined);
+
+const hasTokenWallet = computed(() => tokensStore.wallet !== undefined);
+
+watch(hasTokenWallet, (hasTokenWallet) => {
+  if (hasTokenWallet)
+    void refetchUserData();
+  else
+    userMetadata.value = undefined;
+
+});
+
+const refetchUserData = async () => {
+  try {
+    userMetadata.value = await tokensStore.getCurrentUserMetadata();
+  } catch (error) {
+    toastError('Error fetching HTM user data', error);
+  }
+};
+
+const logout = async () => {
+  try {
+    await tokensStore.reset();
+    userMetadata.value = undefined;
+  } catch (error) {
+    toastError('Failed to logout', error);
+  }
+};
+const goToLoginPage = () => {
+  walletStore.isProvideWalletPasswordModalOpen = true;
+};
+onMounted(async () => {
+  try {
+    if (await CTokensProvider.hasWallet() && CTokensProvider.isLoggedIn() && tokensStore.wallet !== undefined)
+      void refetchUserData();
+    else if (!tokensStore.ignoreLogIn)
+      walletStore.isProvideWalletPasswordModalOpen = true;
+  } catch (error){
+    toastError('Error checking cTokens wallet', error);
+  }
+});
+</script>
+
+<template>
+  <div class="w-full flex flex-row gap-2 justify-between">
+    <div
+      v-if="hasUser"
+      class="ml-2 inline-flex items-center relative"
+    >
+      <Avatar class="w-8 h-8 mr-2 border">
+        <AvatarImage
+          v-if="userMetadata!.profileImage"
+          :src="userMetadata!.profileImage"
+        />
+        <AvatarFallback>
+          {{ userMetadata!.displayName?.slice(0, 2) }}
+        </AvatarFallback>
+      </Avatar>
+      <img
+        :src="cTokensLogoUrl"
+        class="h-[16px] w-[16px] absolute top-5 left-5 rounded-full border bg-background"
+      >
+      <span
+        class="font-bold max-w-[150px] md:max-w-full truncate"
+      >{{ userMetadata!.displayName }}</span>
+    </div>
+    <div class="ml-auto inline-flex items-center space-x-4 md:space-x-6">
+      <Button
+        variant="outline"
+        class="[&_svg]:size-6 px-2 md:px-4 font-bold"
+        @click="hasUser ? logout() : goToLoginPage()"
+      >
+        <img
+          v-if="hasUser"
+          :src="cTokensLogoUrl"
+          class="h-6 w-6"
+        >
+        <span v-if="hasUser">
+          <span class="hidden md:inline">Disconnect</span>
+          <svg
+            class="inline md:hidden"
+            width="24"
+            height="24"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              style="fill: hsl(var(--foreground))"
+              :d="mdiLogout"
+            />
+          </svg>
+        </span>
+        <span v-else>Connect</span>
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/HTMLoginForm.vue b/src/components/HTMLoginForm.vue
index 3f92445..7631e9d 100644
--- a/src/components/HTMLoginForm.vue
+++ b/src/components/HTMLoginForm.vue
@@ -53,7 +53,7 @@ const handleConditionalSiteLogin = async (operationalKey: string) => {
 
   if (walletStore.wallet !== undefined && !walletStore.isL2Wallet) {
     // Already logged in using L1 wallet, so just add another layer on top of that
-    tokensStore.reset(await CTokensProvider.for(wax, 'posting'));
+    await tokensStore.reset(await CTokensProvider.for(wax, 'posting'));
 
     return;
   }
diff --git a/src/components/HTMView.vue b/src/components/HTMView.vue
index 9dc7961..09fd665 100644
--- a/src/components/HTMView.vue
+++ b/src/components/HTMView.vue
@@ -2,9 +2,11 @@
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import HTMHeader from '@/components/HTMHeader.vue';
 import HTMLoginForm from '@/components/HTMLoginForm.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
 import { useTokensStore } from '@/stores/tokens.store';
 
 const tokensStore = useTokensStore();
@@ -38,9 +40,18 @@ const goToRegistration = () => {
 
 <template>
   <div class="p-8">
+    <!-- Show account overview component -->
+    <div v-if="isAuthenticated">
+      <div class="w-full px-4 py-2 mb-2">
+        <HTMHeader />
+      </div>
+      <Separator />
+      <!-- Show slot content when authenticated -->
+      <slot />
+    </div>
     <!-- Show login/registration page when not authenticated -->
     <div
-      v-if="!isAuthenticated"
+      v-else
       class="container mx-auto py-12 px-4 max-w-2xl"
     >
       <!-- Show HTM Login Form -->
@@ -82,7 +93,7 @@ const goToRegistration = () => {
               class="w-full"
               @click="showHTMLogin"
             >
-              Access HTM Wallet
+              Login to HTM Wallet
             </Button>
 
             <!-- Or register new HTM account -->
@@ -115,10 +126,5 @@ const goToRegistration = () => {
         </CardContent>
       </Card>
     </div>
-
-    <!-- Show slot content when authenticated -->
-    <div v-else>
-      <slot />
-    </div>
   </div>
 </template>
diff --git a/src/components/navigation/AppHeader.vue b/src/components/navigation/AppHeader.vue
index f515619..276187c 100644
--- a/src/components/navigation/AppHeader.vue
+++ b/src/components/navigation/AppHeader.vue
@@ -2,6 +2,8 @@
 import { mdiLogout } from '@mdi/js';
 import { computed } from 'vue';
 
+import hiveLogoUrl from '@/assets/icons/hive.svg';
+import cTokensLogoUrl from '@/assets/icons/wallets/ctokens.svg';
 import ToggleSidebar from '@/components/navigation/ToggleSidebar.vue';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -10,6 +12,7 @@ import { useSettingsStore, getWalletIcon } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
+import { toastError } from '@/utils/parse-error';
 
 const settingsStore = useSettingsStore();
 const hasUser = computed(() => settingsStore.settings.account !== undefined);
@@ -17,11 +20,17 @@ const walletStore = useWalletStore();
 const userStore = useUserStore();
 const tokensStore = useTokensStore();
 
-const logout = () => {
-  settingsStore.resetSettings();
-  walletStore.resetWallet();
-  userStore.resetSettings();
-  tokensStore.reset();
+const isL2WalletLoggedIn = computed(() => walletStore.isL2Wallet);
+
+const logout = async () => {
+  try {
+    settingsStore.resetSettings();
+    walletStore.resetWallet();
+    userStore.resetSettings();
+    await tokensStore.reset();
+  } catch(error) {
+    toastError('Failed to log out', error);
+  }
 };
 </script>
 
@@ -31,7 +40,7 @@ const logout = () => {
       <ToggleSidebar />
       <div
         v-if="settingsStore.isLoaded && hasUser"
-        class="ml-2 inline-flex items-center"
+        class="ml-2 inline-flex items-center relative"
       >
         <Avatar class="w-8 h-8 mr-2 border">
           <AvatarImage
@@ -42,6 +51,16 @@ const logout = () => {
             {{ userStore.userDisplayName?.slice(1, 3) }}
           </AvatarFallback>
         </Avatar>
+        <img
+          v-if="isL2WalletLoggedIn && hasUser"
+          :src="cTokensLogoUrl"
+          class="h-[16px] w-[16px] absolute top-5 left-5 rounded-full border bg-background"
+        >
+        <img
+          v-if="!isL2WalletLoggedIn && hasUser"
+          :src="hiveLogoUrl"
+          class="h-[16px] w-[16px] absolute top-5 left-5 rounded-full border bg-background"
+        >
         <span
           v-if="settingsStore.isLoaded && hasUser"
           class="font-bold max-w-[150px] md:max-w-full truncate"
diff --git a/src/components/wallet/HTMProvidePassword.vue b/src/components/wallet/HTMProvidePassword.vue
index d4e55d8..3b88ce8 100644
--- a/src/components/wallet/HTMProvidePassword.vue
+++ b/src/components/wallet/HTMProvidePassword.vue
@@ -8,18 +8,24 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { UsedWallet, getWalletIcon, useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
 import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
+import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 const walletStore = useWalletStore();
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
+const tokensStore = useTokensStore();
 
 const isLoading = ref(false);
 
-const close = () => {
+const close = (ignoreLogIn = false) => {
+  if (ignoreLogIn) // Do not show log in dialog every time if user ignored it
+    tokensStore.ignoreLogIn = true;
+
   walletStore.isProvideWalletPasswordModalOpen = false;
 };
 
@@ -29,11 +35,17 @@ const connect = async () => {
   try {
     isLoading.value = true;
 
+    const wax = await getWax();
+
     await CTokensProvider.login(password.value);
 
     try {
+
       await walletStore.createWalletFor(settingsStore.settings, 'posting');
 
+      if (!walletStore.isL2Wallet)
+        await tokensStore.reset(await CTokensProvider.for(wax, 'posting'));
+
       await userStore.parseUserData(settingsStore.settings.account!);
     } catch (error) {
       toastError('Failed to create wallet', error);
@@ -41,7 +53,7 @@ const connect = async () => {
 
     toast.success('Logged in successfully!');
 
-    close();
+    close(false);
   } catch (error) {
     toastError('Failed to connect to HTM', error);
   } finally {
@@ -68,7 +80,7 @@ const connect = async () => {
                 variant="ghost"
                 size="sm"
                 class="px-2"
-                @click="close"
+                @click="close(true)"
               >
                 <svg
                   width="24"
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index 6d456a9..5fa4f4e 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -191,7 +191,7 @@ const createToken = async () => {
   try {
     const wax = await getWax();
 
-    tokensStore.reset(await CTokensProvider.for(wax, 'active'));
+    await tokensStore.reset(await CTokensProvider.for(wax, 'active'));
 
     const identifier: asset = {
       amount: parseAssetAmount(initialSupply.value, parseInt(precision.value)),
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index 7c208d9..acf7ace 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -286,7 +286,7 @@ const registerHTMAccount = async () => {
       }
     });
 
-    tokensStore.reset(await CTokensProvider.for(wax, 'owner'));
+    await tokensStore.reset(await CTokensProvider.for(wax, 'owner'));
 
     await tokensStore.wallet?.signTransaction(l2Transaction);
 
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 8c845e9..2c7912c 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -301,17 +301,6 @@ const handleTransfer = async () => {
   try {
     isTransferring.value = true;
 
-    // For now, just show a placeholder message
-    // In a real implementation, this would use the transfer API
-    console.log('Transfer:', {
-      token: token.value.nai,
-      precision: token.value.precision,
-      to: transferForm.value.to,
-      amount: transferForm.value.amount,
-      amountInBaseUnits: validation.parsedAmount,
-      memo: transferForm.value.memo
-    });
-
     // TODO: Implement actual transfer functionality
     throw new Error('Transfer functionality not yet implemented');
 
diff --git a/src/stores/metamask.store.ts b/src/stores/metamask.store.ts
index 49ca9ed..4b1ba32 100644
--- a/src/stores/metamask.store.ts
+++ b/src/stores/metamask.store.ts
@@ -34,7 +34,6 @@ export const useMetamaskStore = defineStore('metamask', {
       try {
         this.performingOperation = true;
 
-        console.log('Connecting to Metamask with account index:', accountIndex, 'and role:', role);
         metamaskWallet.value = await MetamaskProvider.for(accountIndex, role, defaultSnapOrigin);
       } finally {
         this.performingOperation = false;
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index adff00e..b4d2270 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -16,6 +16,8 @@ import type {
 } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+import { transformUserName } from './user.store';
+
 export interface CTokenDisplay {
   nai: string;
   isStaked: boolean;
@@ -83,7 +85,8 @@ export const useTokensStore = defineStore('tokens', {
     isLoadingBalances: false,
     isLoadingTokens: false,
     isLoadingRegisteredTokens: false,
-    lastError: null as string | null
+    lastError: null as string | null,
+    ignoreLogIn: false
   }),
   getters: {
     wallet: () => cTokensProvider.value,
@@ -219,6 +222,30 @@ export const useTokensStore = defineStore('tokens', {
         this.isLoadingTokens = false;
       }
     },
+    async getCurrentUserMetadata () {
+      const wax = await getWax();
+
+      console.log(this.wallet);
+
+      if (this.wallet?.publicKey === undefined)
+        throw new Error('Could not load CTokens wallet');
+
+      const [ user ] = await wax.restApi.ctokensApi.registeredUsers({ user: this.wallet.publicKey });
+
+      if (!user)
+        throw new Error('CTokens user not found');
+
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+      const metadata = user.metadata as Record<string, any>;
+
+      return {
+        displayName: metadata?.name || transformUserName(this.wallet.publicKey),
+        about: metadata?.about,
+        name: metadata?.name,
+        profileImage: metadata?.profile_image,
+        website: metadata?.website
+      };
+    },
     /**
      * Load registered tokens with pre-formatted display data
      */
@@ -352,7 +379,8 @@ export const useTokensStore = defineStore('tokens', {
       // Refresh token data after update
       await this.loadRegisteredTokens(nai, precision, 1, true);
     },
-    reset (cTokensWallet?: CTokensProvider | undefined) {
+    async reset (cTokensWallet?: CTokensProvider | undefined) {
+      await cTokensProvider.value?.destroy();
       cTokensProvider.value = cTokensWallet;
     }
   }
diff --git a/src/stores/wallet.store.ts b/src/stores/wallet.store.ts
index 8606ced..69ba2eb 100644
--- a/src/stores/wallet.store.ts
+++ b/src/stores/wallet.store.ts
@@ -118,7 +118,7 @@ export const useWalletStore = defineStore('wallet', {
 
         const tokensStore = useTokensStore();
 
-        tokensStore.reset(currentWallet.value as CTokensProvider);
+        await tokensStore.reset(currentWallet.value as CTokensProvider);
         this.isL2Wallet = true;
 
         break;
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index 09080c0..beaa906 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -127,6 +127,14 @@ export class CTokensProvider extends AEncryptionProvider {
     }
   }
 
+  public static async hasWallet (): Promise<boolean> {
+    if (!CTokensProvider.#beekeeper)
+      await CTokensProvider.prepareBeekeeper();
+    const session = CTokensProvider.#beekeeper!.createSession(Math.random().toString());
+
+    return session.hasWallet(CTokensProvider.currentOperationalWalletName);
+  }
+
   public static async createWallet (userNewWalletPassword: string, operationalPrivateKey: TPublicKey, managementPrivateKey?: TPublicKey): Promise<{ management?: TPublicKey; operational: TPublicKey; }> {
     await CTokensProvider.prepareBeekeeper();
 
-- 
GitLab


From 08345211d85238a26c3ea88da36a2b4dfbe01bb4 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 16 Oct 2025 05:32:27 +0200
Subject: [PATCH 028/102] Fix initial log in

---
 src/components/HTMHeader.vue                 | 26 +++++++++++++++++---
 src/components/wallet/HTMProvidePassword.vue |  3 +--
 src/stores/tokens.store.ts                   |  4 ++-
 src/utils/wallet/ctokens/signer.ts           |  3 +++
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/HTMHeader.vue b/src/components/HTMHeader.vue
index 5bde430..7054d18 100644
--- a/src/components/HTMHeader.vue
+++ b/src/components/HTMHeader.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
 import { mdiLogout } from '@mdi/js';
 import { computed, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 
 import cTokensLogoUrl from '@/assets/icons/wallets/ctokens.svg';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
+import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+const router = useRouter();
+
+const settingsStore = useSettingsStore();
 const tokensStore = useTokensStore();
 const walletStore = useWalletStore();
 
@@ -49,15 +54,30 @@ const logout = async () => {
     toastError('Failed to logout', error);
   }
 };
-const goToLoginPage = () => {
-  walletStore.isProvideWalletPasswordModalOpen = true;
+const goToLoginPage = async () => {
+  try {
+    // If L1 logged in, show provide password modal, show the wallet select modal otherwise
+    if (settingsStore.settings?.account)
+      walletStore.isProvideWalletPasswordModalOpen = true;
+    else if (await CTokensProvider.hasWallet())
+      walletStore.isWalletSelectModalOpen = true;
+    else
+      router.push('/tokens/register-account');
+  } catch(error) {
+    toastError('Failed to log in', error);
+  }
 };
 onMounted(async () => {
   try {
-    if (await CTokensProvider.hasWallet() && CTokensProvider.isLoggedIn() && tokensStore.wallet !== undefined)
+    const hasWallet = await CTokensProvider.hasWallet();
+    if (!hasWallet)
+      return;
+
+    if (CTokensProvider.isLoggedIn() && tokensStore.wallet !== undefined)
       void refetchUserData();
     else if (!tokensStore.ignoreLogIn)
       walletStore.isProvideWalletPasswordModalOpen = true;
+
   } catch (error){
     toastError('Error checking cTokens wallet', error);
   }
diff --git a/src/components/wallet/HTMProvidePassword.vue b/src/components/wallet/HTMProvidePassword.vue
index 3b88ce8..ae7cd76 100644
--- a/src/components/wallet/HTMProvidePassword.vue
+++ b/src/components/wallet/HTMProvidePassword.vue
@@ -40,13 +40,12 @@ const connect = async () => {
     await CTokensProvider.login(password.value);
 
     try {
-
       await walletStore.createWalletFor(settingsStore.settings, 'posting');
 
       if (!walletStore.isL2Wallet)
         await tokensStore.reset(await CTokensProvider.for(wax, 'posting'));
 
-      await userStore.parseUserData(settingsStore.settings.account!);
+      await userStore.parseUserData(settingsStore.settings!.account!);
     } catch (error) {
       toastError('Failed to create wallet', error);
     }
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index b4d2270..2371122 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -380,7 +380,9 @@ export const useTokensStore = defineStore('tokens', {
       await this.loadRegisteredTokens(nai, precision, 1, true);
     },
     async reset (cTokensWallet?: CTokensProvider | undefined) {
-      await cTokensProvider.value?.destroy();
+      // Cleanup only if we don't want to use any other L2 wallet
+      if (cTokensWallet === undefined)
+        await cTokensProvider.value?.destroy();
       cTokensProvider.value = cTokensWallet;
     }
   }
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index beaa906..74d6e59 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -168,6 +168,9 @@ export class CTokensProvider extends AEncryptionProvider {
         throw new WaxCTokensEncryptionProviderError('Management wallet is not available. Make sure to login with the correct password and import the required key.');
     }
 
+    if (!CTokensProvider.#beekeeper)
+      await CTokensProvider.prepareBeekeeper();
+
     const instance = new CTokensProvider(chain, role, ctokensUrl);
 
     if (!(await instance.publicKeyHasAccount()))
-- 
GitLab


From fd73a1fc2133df2e0399a8d756b36c496bae648a Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Thu, 16 Oct 2025 10:32:21 +0200
Subject: [PATCH 029/102] Remove all mocks

---
 src/stores/tokens.store.ts | 54 ++------------------------------------
 1 file changed, 2 insertions(+), 52 deletions(-)

diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 2371122..9d59320 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -90,14 +90,6 @@ export const useTokensStore = defineStore('tokens', {
   }),
   getters: {
     wallet: () => cTokensProvider.value,
-    totalValue: (state) => {
-      return state.balances.reduce((total, balance) => {
-        // Mock price of $0.01 per token for now
-        const price = 0.01;
-        const amount = parseFloat(balance.amount!);
-        return total + (amount * price);
-      }, 0);
-    },
     tokenCount: (state) => state.balances.length,
     hasBalances: (state) => state.balances.length > 0,
     hasTokenDefinitions: (state) => state.tokenDefinitions.length > 0,
@@ -148,26 +140,7 @@ export const useTokensStore = defineStore('tokens', {
       } catch (error) {
         console.error('Failed to load balances:', error);
         this.lastError = error instanceof Error ? error.message : 'Failed to load balances';
-
-        // Fallback to mock data for development
-        console.log('Using fallback mock data for development');
-        this.balances = [
-          {
-            nai: '@@000000021',
-            precision: 3,
-            amount: '150.500'
-          },
-          {
-            nai: '@@000000013',
-            precision: 3,
-            amount: '75.250'
-          },
-          {
-            nai: '@@123456789',
-            precision: 3,
-            amount: '0.000'
-          }
-        ];
+        this.balances = [];
       } finally {
         this.isLoadingBalances = false;
       }
@@ -194,30 +167,7 @@ export const useTokensStore = defineStore('tokens', {
       } catch (error) {
         console.error('Failed to load token definitions:', error);
         this.lastError = error instanceof Error ? error.message : 'Failed to load token definitions';
-
-        // Fallback to mock data for development
-        console.log('Using fallback mock data for token definitions');
-        this.tokenDefinitions = [
-          {
-            nai: '@@123456789',
-            owner: creator || 'testaccount',
-            precision: 3,
-            total_supply: '1000000',
-            max_supply: '0',
-            capped: false,
-            others_can_stake: true,
-            others_can_unstake: true,
-            is_nft: false,
-            metadata: {
-              symbol: 'MAT',
-              name: 'My Awesome Token',
-              description: 'A test token for demonstration purposes',
-              initial_supply: '1000000',
-              created_at: '2024-01-15T10:30:00Z',
-              active: true
-            }
-          }
-        ];
+        this.tokenDefinitions = [];
       } finally {
         this.isLoadingTokens = false;
       }
-- 
GitLab


From 046547cb9af1d6bd67b68999d604c2ee5463062e Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 16 Oct 2025 12:17:45 +0200
Subject: [PATCH 030/102] Add option to ignore online check during ctokens
 provider creation

---
 src/pages/tokens/register-account.vue |  2 +-
 src/utils/wallet/ctokens/signer.ts    | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index acf7ace..76a4d8b 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -286,7 +286,7 @@ const registerHTMAccount = async () => {
       }
     });
 
-    await tokensStore.reset(await CTokensProvider.for(wax, 'owner'));
+    await tokensStore.reset(await CTokensProvider.for(wax, 'owner', false));
 
     await tokensStore.wallet?.signTransaction(l2Transaction);
 
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index 74d6e59..0e87a86 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -159,7 +159,7 @@ export class CTokensProvider extends AEncryptionProvider {
     return { management, operational };
   }
 
-  public static async for (chain: IHiveChainInterface, role: TRole, ctokensUrl: string = (import.meta.env.VITE_CTOKENS_API_URL || DEFAULT_CTOKENS_API_URL)): Promise<CTokensProvider> {
+  public static async for (chain: IHiveChainInterface, role: TRole, onlineCheckKeys = true, ctokensUrl: string = (import.meta.env.VITE_CTOKENS_API_URL || DEFAULT_CTOKENS_API_URL)): Promise<CTokensProvider> {
     if (role === 'owner') {
       if (!CTokensProvider.#managementWallet)
         throw new WaxCTokensEncryptionProviderError('Owner wallet is not available. Make sure to login with the correct password and import the required key.');
@@ -173,8 +173,12 @@ export class CTokensProvider extends AEncryptionProvider {
 
     const instance = new CTokensProvider(chain, role, ctokensUrl);
 
-    if (!(await instance.publicKeyHasAccount()))
-      throw new WaxCTokensEncryptionProviderError(`The provided ${role} key is not registered in the ctokens system. Please use a different key.`);
+    if (onlineCheckKeys) {
+      const hasPublicKeyInSystem = await instance.publicKeyHasAccount();
+
+      if (!hasPublicKeyInSystem)
+        throw new WaxCTokensEncryptionProviderError(`The provided ${role} key is not registered in the ctokens system. Please use a different key.`);
+    }
 
     return instance;
   }
-- 
GitLab


From aeafa4502368dc26b616fdef79389a3de9f1ccf4 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 16 Oct 2025 13:56:06 +0200
Subject: [PATCH 031/102] Add user metadata update operation to registering
 account

---
 src/pages/tokens/register-account.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index 76a4d8b..4c6d06c 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -284,6 +284,18 @@ const registerHTMAccount = async () => {
         management_key: keys.management!,
         operational_key: keys.operational
       }
+    }).pushOperation({
+      user_metadata_update_operation: {
+        user: keys.operational,
+        metadata: {
+          items: [
+            { key: 'name', value: registrationData.value.name.trim() },
+            ...(registrationData.value.about.trim() ? [{ key: 'about', value: registrationData.value.about.trim() }] : []),
+            ...(registrationData.value.website.trim() ? [{ key: 'website', value: registrationData.value.website.trim() }] : []),
+            ...(registrationData.value.profile_image.trim() ? [{ key: 'profile_image', value: registrationData.value.profile_image.trim() }] : [])
+          ]
+        }
+      }
     });
 
     await tokensStore.reset(await CTokensProvider.for(wax, 'owner', false));
-- 
GitLab


From 5133e7d221daffdbbd34c4fec13a3c332456644c Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Thu, 16 Oct 2025 14:09:14 +0200
Subject: [PATCH 032/102] Fix top holders

---
 src/pages/tokens/token.vue | 39 ++++++++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 2c7912c..3df1412 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -108,6 +108,34 @@ const formattedTotalSupply = ref('0');
 const formattedMaxSupply = ref('0');
 const formattedUserBalance = ref('0.000');
 
+// Formatted top holders with proper balance display
+const formattedTopHolders = computed(() => {
+  if (!token.value || topHolders.value.length === 0) return [];
+
+  return topHolders.value.map(holder => {
+    return {
+      ...holder,
+      formattedAmount: formatAmount(holder.amount || '0', token.value!.precision || 0)
+    };
+  });
+});
+
+// Helper to format amount synchronously
+const formatAmount = (amount: string, precision: number): string => {
+  try {
+    // Simple formatter - convert to number with proper decimal places
+    const num = parseFloat(amount);
+    if (isNaN(num)) return amount;
+
+    // Format with precision and add thousand separators
+    const parts = num.toFixed(precision).split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return parts.join('.');
+  } catch {
+    return amount;
+  }
+};
+
 // Update formatted values
 const updateFormattedValues = async () => {
   if (!token.value) return;
@@ -360,10 +388,9 @@ const copyNAI = () => {
 onMounted(async () => {
   isLoading.value = true;
 
-  await Promise.allSettled([
-    loadTokenDetails(),
-    loadTopHolders()
-  ]);
+  // First load token details, then load top holders
+  await loadTokenDetails();
+  await loadTopHolders();
 
   isLoading.value = false;
 });
@@ -871,7 +898,7 @@ onMounted(async () => {
                 class="space-y-2"
               >
                 <div
-                  v-for="(holder, index) in topHolders.slice(0, 10)"
+                  v-for="(holder, index) in formattedTopHolders.slice(0, 10)"
                   :key="holder.user"
                   class="flex items-center gap-4 p-3 rounded-lg border hover:border-primary/20 hover:bg-accent/50 transition-colors"
                 >
@@ -910,7 +937,7 @@ onMounted(async () => {
 
                   <div class="text-right flex-shrink-0">
                     <p class="font-bold text-foreground">
-                      {{ holder.amount }}
+                      {{ holder.formattedAmount }}
                     </p>
                     <p class="text-xs text-muted-foreground">
                       {{ tokenSymbol || 'tokens' }}
-- 
GitLab


From cb934aa34288a1aa0246ea4d0e3277ac4d03ae32 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 16 Oct 2025 18:26:43 +0200
Subject: [PATCH 033/102] Allow signing up other users

---
 src/components/navigation/AppSidebar.vue |  2 --
 src/pages/tokens/create.vue              |  6 +++---
 src/pages/tokens/register-account.vue    | 13 ++++++++++---
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/navigation/AppSidebar.vue b/src/components/navigation/AppSidebar.vue
index 5548f1b..70f4e5f 100644
--- a/src/components/navigation/AppSidebar.vue
+++ b/src/components/navigation/AppSidebar.vue
@@ -20,7 +20,6 @@ const walletStore = useWalletStore();
 
 const isL1BasedView = computed(() => walletStore.hasWallet && !walletStore.isL2Wallet);
 const hasHTMWallet = computed(() => !!tokensStore.wallet);
-const hasNoHTMWallet = computed(() => !tokensStore.wallet);
 
 const groups: { title: string; items: Array<{ title: string; url: string; icon: string; badge?: string; visible?: Ref<boolean>; disabled?: Ref<boolean> }> }[] = [{
   title: 'Hive Account Management',
@@ -72,7 +71,6 @@ const groups: { title: string; items: Array<{ title: string; url: string; icon:
       title: 'Register HTM Account',
       url: '/tokens/register-account',
       icon: mdiAccountPlusOutline,
-      visible: hasNoHTMWallet
     }
   ]
 }, {
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index 5fa4f4e..c265df8 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -271,8 +271,8 @@ const resetForm = () => {
   tokenDescription.value = '';
   initialSupply.value = '1000000';
   precision.value = '3';
-  othersCanStake.value = false;
-  othersCanUnstake.value = false;
+  othersCanStake.value = true;
+  othersCanUnstake.value = true;
   agreedToDisclaimer.value = false;
   generatedNAI.value = '';
   naiGenerated.value = false;
@@ -293,7 +293,7 @@ const previewToken = computed(() => ({
   nai: generatedNAI.value || undefined,
   totalSupply: initialSupply.value,
   maxSupply: capped.value ? initialSupply.value : undefined,
-  precision: parseInt(precision.value) || 3,
+  precision: parseInt(precision.value) ?? 3,
   capped: capped.value,
   othersCanStake: othersCanStake.value,
   othersCanUnstake: othersCanUnstake.value,
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index 4c6d06c..49e29b3 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -8,7 +8,7 @@ import {
   mdiRefresh
 } from '@mdi/js';
 import { HtmTransaction } from '@mtyszczak-cargo/htm';
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
@@ -175,7 +175,7 @@ const downloadKeysFile = () => {
 
   const link = document.createElement('a');
   link.href = url;
-  link.download = `htm-keys-${new Date().toISOString()}.json`;
+  link.download = `htm-keys-${keysFile.display_name}.json`;
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
@@ -252,7 +252,6 @@ const registerHTMAccount = async () => {
     if (registrationData.value.profile_image && !isValidUrl(registrationData.value.profile_image))
       throw new Error('Please enter a valid profile image URL');
 
-
     // Get wax instance
     const wax = await getWax();
 
@@ -326,6 +325,14 @@ const registerHTMAccount = async () => {
     isLoading.value = false;
   }
 };
+
+onMounted(() => {
+  if (walletStore.wallet) {
+    // If already logged in using L1 wallet,
+    // show the registration page in case someone wants to create another account
+    showRegistrationForm.value = true;
+  }
+});
 </script>
 
 <template>
-- 
GitLab


From 710b67b6e991ebf4fb9b346efba28ac73ee650c3 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 16 Oct 2025 19:35:03 +0200
Subject: [PATCH 034/102] Fix generating NAI

---
 src/components/navigation/AppSidebar.vue |  2 +-
 src/pages/tokens/create.vue              |  6 ++++--
 src/utils/htm-utils.ts                   |  9 ---------
 src/utils/htm.ts                         |  9 ---------
 src/utils/nai-tokens.ts                  | 18 ++++++++++++------
 5 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/src/components/navigation/AppSidebar.vue b/src/components/navigation/AppSidebar.vue
index 70f4e5f..a4381dc 100644
--- a/src/components/navigation/AppSidebar.vue
+++ b/src/components/navigation/AppSidebar.vue
@@ -70,7 +70,7 @@ const groups: { title: string; items: Array<{ title: string; url: string; icon:
     {
       title: 'Register HTM Account',
       url: '/tokens/register-account',
-      icon: mdiAccountPlusOutline,
+      icon: mdiAccountPlusOutline
     }
   ]
 }, {
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index c265df8..7144f03 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -25,7 +25,8 @@ import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
-import { generateNAI as generateHTMNAI, parseAssetAmount } from '@/utils/htm-utils';
+import { parseAssetAmount } from '@/utils/htm-utils';
+import { generateNAI as generateHTMNAI } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
@@ -130,7 +131,8 @@ const generateNAI = (): string | undefined => {
     return;
 
   try {
-    generatedNAI.value = generateHTMNAI();
+    generatedNAI.value = generateHTMNAI(tokenSymbol.value);
+    console.log('Regenerating NAI', generatedNAI.value);
     naiGenerated.value = true;
 
     return generatedNAI.value;
diff --git a/src/utils/htm-utils.ts b/src/utils/htm-utils.ts
index 0c525e4..9d0e0b2 100644
--- a/src/utils/htm-utils.ts
+++ b/src/utils/htm-utils.ts
@@ -198,15 +198,6 @@ export async function updateHTMAssetMetadata (
   return l1Tx.id.toString();
 }
 
-/**
- * Generate a random NAI identifier for new tokens
- */
-export function generateNAI (): string {
-  // Generate a random number between 100000000 and 999999999
-  const randomNum = Math.floor(Math.random() * 900000000) + 100000000;
-  return `@@${randomNum}`;
-}
-
 /**
  * Validate public key format
  */
diff --git a/src/utils/htm.ts b/src/utils/htm.ts
index 35e22ef..20eb54b 100644
--- a/src/utils/htm.ts
+++ b/src/utils/htm.ts
@@ -352,15 +352,6 @@ export async function updateHTMAssetMetadata (
   return l1Tx.id.toString();
 }
 
-/**
- * Generate a random NAI identifier for new tokens
- */
-export function generateNAI (): string {
-  // Generate a random number between 100000000 and 999999999
-  const randomNum = Math.floor(Math.random() * 900000000) + 100000000;
-  return `@@${randomNum}`;
-}
-
 /**
  * Validate public key format
  */
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index ca1c0ec..1063538 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -38,13 +38,19 @@ export const generateNAI = (symbol: string): string => {
   const timestamp = Date.now();
   const symbolUpper = symbol.trim().toUpperCase();
 
-  // Create a simple hash-like value for uniqueness
-  const hash = (symbolUpper + timestamp).split('').reduce((acc, char) => {
-    return acc + char.charCodeAt(0);
-  }, 0);
+  // Create a hash-like value for uniqueness using a safer approach
+  // Use modular arithmetic to prevent overflow
+  const input = symbolUpper + timestamp;
+  let hash = 0;
+
+  for (let i = 0; i < input.length; i++) {
+    const char = input.charCodeAt(i);
+    // Use bitwise operations and modular arithmetic to prevent overflow
+    hash = ((hash << 5) - hash + char) & 0x7fffffff; // Keep within 31-bit positive range
+  }
 
-  // NAI format: @@[8 digits]
-  const naiNumber = (hash % 100000000).toString().padStart(8, '0');
+  // Ensure we have a positive number and convert to 8-digit string
+  const naiNumber = Math.abs(hash % 100000000).toString().padStart(8, '0');
 
   const table = [
     [0, 3, 1, 7, 5, 9, 8, 6, 4, 2],
-- 
GitLab


From e6d2507e2e11e70c4296ebaa7ac5cc835c46b288 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 16 Oct 2025 21:09:12 +0200
Subject: [PATCH 035/102] Fix generating liquid assets

---
 src/components/HTMTokenPreview.vue | 40 +++++++++++++-----------------
 src/pages/tokens/create.vue        |  2 +-
 src/stores/tokens.store.ts         |  2 +-
 src/utils/nai-tokens.ts            | 25 ++++++++++---------
 4 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/src/components/HTMTokenPreview.vue b/src/components/HTMTokenPreview.vue
index 14da7bd..e7cf48c 100644
--- a/src/components/HTMTokenPreview.vue
+++ b/src/components/HTMTokenPreview.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { IWaxBaseInterface } from '@hiveio/wax/vite';
+import { computed, onMounted, ref } from 'vue';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import type { CTokenDisplay } from '@/stores/tokens.store';
+import { getWax } from '@/stores/wax.store';
 
 interface TokenPreviewData {
   name?: string;
@@ -64,33 +66,15 @@ const isFullToken = (token: TokenPreviewData | CTokenDisplay): token is CTokenDi
   return 'displayTotalSupply' in token && 'displayMaxSupply' in token;
 };
 
+const formatter = ref<IWaxBaseInterface['formatter'] | undefined>(undefined);
+
 // Format number with precision
 const formatTokenAmount = (amount: string | bigint | undefined, precision: number | string = 3): string => {
   if (!amount) return '0';
 
-  const precisionNum = typeof precision === 'string' ? parseInt(precision) : precision;
-
-  // If it's a bigint, convert to string first
-  if (typeof amount === 'bigint') {
-    const divisor = BigInt(10) ** BigInt(precisionNum);
-    const integerPart = amount / divisor;
-    const fractionalPart = amount % divisor;
-
-    if (fractionalPart === BigInt(0))
-      return integerPart.toLocaleString();
-
-    const fractionalStr = fractionalPart.toString().padStart(precisionNum, '0').replace(/0+$/, '');
-    return `${integerPart.toLocaleString()}.${fractionalStr}`;
-  }
-
-  const num = parseFloat(amount);
+  precision = typeof precision === 'string' ? parseInt(precision) : precision;
 
-  if (isNaN(num)) return amount;
-
-  return num.toLocaleString(undefined, {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: precisionNum
-  });
+  return formatter.value?.formatNumber(amount, precision) || '0';
 };
 
 const displayTotalSupply = computed(() => {
@@ -110,6 +94,16 @@ const displayMaxSupply = computed(() => {
   const symbol = props.token.symbol || props.token.name;
   return symbol ? `${formatted} ${symbol}` : formatted;
 });
+
+onMounted(async () => {
+  const wax = await getWax();
+
+  formatter.value = wax.formatter.extend({ asset: {
+    appendTokenName: false,
+    displayAsNai: false,
+    formatAmount: true
+  }});
+});
 </script>
 
 <template>
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index 7144f03..ac73d75 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -131,7 +131,7 @@ const generateNAI = (): string | undefined => {
     return;
 
   try {
-    generatedNAI.value = generateHTMNAI(tokenSymbol.value);
+    generatedNAI.value = generateHTMNAI(tokenSymbol.value, Number.parseInt(precision.value));
     console.log('Regenerating NAI', generatedNAI.value);
     naiGenerated.value = true;
 
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 9d59320..93e6db3 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -43,7 +43,7 @@ export interface CTokenDisplay {
 const cTokensProvider = shallowRef<CTokensProvider | undefined>(undefined);
 
 // Helper functions for token transformation
-const isVesting = (nai: string, precision: number): boolean =>
+export const isVesting = (nai: string, precision: number): boolean =>
   (((Number(nai.slice(2, -1)) << 5) | 0x10 | precision) & 0x20) !== 0;
 
 const formatAsset = async (value: string | bigint, precision: number, name?: string): Promise<string> => {
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index 1063538..49f13a7 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -1,4 +1,5 @@
 import { useSettingsStore } from '@/stores/settings.store';
+import { isVesting } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 
@@ -31,10 +32,7 @@ export interface TokenStakeParams {
   direction: 'stake' | 'unstake';
 }
 
-/**
- * Generate a unique NAI identifier for a token
- */
-export const generateNAI = (symbol: string): string => {
+const generateRandomNAI = (symbol: string): string => {
   const timestamp = Date.now();
   const symbolUpper = symbol.trim().toUpperCase();
 
@@ -79,6 +77,17 @@ export const generateNAI = (symbol: string): string => {
   return `@@${naiNumber}${dammDigit(naiNumber)}`;
 };
 
+/**
+ * Generate a unique NAI identifier for a token
+ */
+export const generateNAI = (symbol: string, precision: number): string => {
+  let randomNAI: string;
+  do
+    randomNAI = generateRandomNAI(symbol);
+  while (!isVesting(randomNAI, precision));
+  return randomNAI;
+};
+
 /**
  * Create a new NAI token
  */
@@ -366,14 +375,6 @@ export const validateAccountName = (accountName: string): boolean => {
   return regex.test(accountName);
 };
 
-/**
- * Format token amount with precision
- */
-export const formatTokenAmount = (amount: string | number, precision: number): string => {
-  const num = typeof amount === 'string' ? parseFloat(amount) : amount;
-  return num.toFixed(precision);
-};
-
 /**
  * Parse token amount to remove precision
  */
-- 
GitLab


From a3bb72039f3e4c9d2cf4a333d98be286e3ed1054 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Fri, 17 Oct 2025 09:57:54 +0200
Subject: [PATCH 036/102] Improve switching accounts

---
 src/components/HTMView.vue                    |   6 -
 src/components/navigation/AccountSwitcher.vue | 337 ++++++++++++++++++
 src/components/navigation/AppHeader.vue       |  83 +----
 3 files changed, 348 insertions(+), 78 deletions(-)
 create mode 100644 src/components/navigation/AccountSwitcher.vue

diff --git a/src/components/HTMView.vue b/src/components/HTMView.vue
index 09fd665..4b92a15 100644
--- a/src/components/HTMView.vue
+++ b/src/components/HTMView.vue
@@ -2,11 +2,9 @@
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import HTMHeader from '@/components/HTMHeader.vue';
 import HTMLoginForm from '@/components/HTMLoginForm.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Separator } from '@/components/ui/separator';
 import { useTokensStore } from '@/stores/tokens.store';
 
 const tokensStore = useTokensStore();
@@ -42,10 +40,6 @@ const goToRegistration = () => {
   <div class="p-8">
     <!-- Show account overview component -->
     <div v-if="isAuthenticated">
-      <div class="w-full px-4 py-2 mb-2">
-        <HTMHeader />
-      </div>
-      <Separator />
       <!-- Show slot content when authenticated -->
       <slot />
     </div>
diff --git a/src/components/navigation/AccountSwitcher.vue b/src/components/navigation/AccountSwitcher.vue
new file mode 100644
index 0000000..31977c0
--- /dev/null
+++ b/src/components/navigation/AccountSwitcher.vue
@@ -0,0 +1,337 @@
+<script setup lang="ts">
+import { mdiSwapHorizontal } from '@mdi/js';
+import { computed, onMounted, ref, watch } from 'vue';
+
+import hiveLogoUrl from '@/assets/icons/hive.svg';
+import cTokensLogoUrl from '@/assets/icons/wallets/ctokens.svg';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
+import { useUserStore } from '@/stores/user.store';
+import { useWalletStore } from '@/stores/wallet.store';
+import { toastError } from '@/utils/parse-error';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+const settingsStore = useSettingsStore();
+const walletStore = useWalletStore();
+const userStore = useUserStore();
+const tokensStore = useTokensStore();
+
+// Current active account type
+const activeAccount = ref<'hive' | 'htm'>('hive');
+
+// Hive account data - check if wallet is actually connected, not just settings exist
+const hasHiveAccount = computed(() =>
+  settingsStore.settings.account !== undefined &&
+  walletStore.hasWallet &&
+  !walletStore.isL2Wallet
+);
+
+// HTM account data
+const hasHTMAccount = computed(() => tokensStore.wallet !== undefined);
+
+const htmUserMetadata = ref<{
+  displayName: string;
+  about?: string;
+  name?: string;
+  profileImage?: string;
+  website?: string;
+} | undefined>(undefined);
+
+// Determine which account to show by default
+const determineActiveAccount = () => {
+  // Priority: show HTM if it's the only one or if L2 wallet is active
+  if (hasHTMAccount.value && (!hasHiveAccount.value || walletStore.isL2Wallet))
+    activeAccount.value = 'htm';
+  else if (hasHiveAccount.value)
+    activeAccount.value = 'hive';
+  else if (hasHTMAccount.value)
+    activeAccount.value = 'htm';
+};
+
+// Fetch HTM user metadata
+const fetchHTMUserData = async () => {
+  try {
+    if (hasHTMAccount.value)
+      htmUserMetadata.value = await tokensStore.getCurrentUserMetadata();
+  } catch (error) {
+    toastError('Error fetching HTM user data', error);
+  }
+};
+
+// Watch for changes in HTM wallet
+watch(hasHTMAccount, (hasAccount) => {
+  if (hasAccount)
+    void fetchHTMUserData();
+  else
+    htmUserMetadata.value = undefined;
+
+  determineActiveAccount();
+});
+
+watch(() => walletStore.isL2Wallet, () => {
+  determineActiveAccount();
+});
+
+// Switch active account
+const switchAccount = (type: 'hive' | 'htm') => {
+  activeAccount.value = type;
+};
+
+// Connect to Hive
+const connectToHive = () => {
+  walletStore.openWalletSelectModal();
+};
+
+// Connect to HTM
+const connectToHTM = async () => {
+  try {
+    if (settingsStore.settings?.account)
+      walletStore.isProvideWalletPasswordModalOpen = true;
+    else if (await CTokensProvider.hasWallet())
+      walletStore.openWalletSelectModal();
+  } catch (error) {
+    toastError('Failed to connect to HTM', error);
+  }
+};
+
+// Disconnect from Hive
+const disconnectFromHive = async () => {
+  try {
+    settingsStore.resetSettings();
+    walletStore.resetWallet();
+    userStore.resetSettings();
+    // If only Hive was connected, also reset tokens
+    if (!hasHTMAccount.value)
+      await tokensStore.reset();
+    // Switch to HTM if available
+    if (hasHTMAccount.value)
+      activeAccount.value = 'htm';
+  } catch (error) {
+    toastError('Failed to disconnect from Hive', error);
+  }
+};
+
+// Disconnect from HTM
+const disconnectFromHTM = async () => {
+  try {
+    await tokensStore.reset();
+    htmUserMetadata.value = undefined;
+    // Switch to Hive if available
+    if (hasHiveAccount.value)
+      activeAccount.value = 'hive';
+  } catch (error) {
+    toastError('Failed to disconnect from HTM', error);
+  }
+};
+
+onMounted(async () => {
+  determineActiveAccount();
+
+  // Check if HTM wallet is available and fetch data
+  try {
+    const hasWallet = await CTokensProvider.hasWallet();
+    if (hasWallet && CTokensProvider.isLoggedIn() && tokensStore.wallet !== undefined)
+      await fetchHTMUserData();
+  } catch (_error) {
+    // Silently fail - user might not have HTM wallet
+  }
+});
+
+// Currently displayed account info based on active selection
+const displayedAccount = computed(() => {
+  if (activeAccount.value === 'htm' && hasHTMAccount.value && htmUserMetadata.value) {
+    return {
+      type: 'htm' as const,
+      displayName: htmUserMetadata.value.displayName,
+      profileImage: htmUserMetadata.value.profileImage,
+      icon: cTokensLogoUrl
+    };
+  } else if (activeAccount.value === 'hive' && hasHiveAccount.value) {
+    return {
+      type: 'hive' as const,
+      displayName: userStore.userDisplayName || '',
+      profileImage: userStore.profileImage,
+      icon: hiveLogoUrl
+    };
+  }
+
+  return null;
+});
+
+// Check if user has both accounts
+const hasBothAccounts = computed(() => hasHiveAccount.value && hasHTMAccount.value && htmUserMetadata.value);
+
+// Get info about the other account (not currently displayed)
+const otherAccount = computed(() => {
+  if (!hasBothAccounts.value) return null;
+
+  if (activeAccount.value === 'hive' && htmUserMetadata.value) {
+    return {
+      type: 'htm' as const,
+      displayName: htmUserMetadata.value.displayName,
+      profileImage: htmUserMetadata.value.profileImage,
+      icon: cTokensLogoUrl
+    };
+  } else if (activeAccount.value === 'htm') {
+    return {
+      type: 'hive' as const,
+      displayName: userStore.userDisplayName || '',
+      profileImage: userStore.profileImage,
+      icon: hiveLogoUrl
+    };
+  }
+
+  return null;
+});
+</script>
+
+<template>
+  <div class="inline-flex items-center relative gap-2">
+    <!-- Main account display (shown when at least one account is connected) -->
+    <div
+      v-if="displayedAccount"
+      class="inline-flex items-center relative"
+    >
+      <Avatar class="w-8 h-8 mr-2 border">
+        <AvatarImage
+          v-if="displayedAccount.profileImage"
+          :src="displayedAccount.profileImage"
+        />
+        <AvatarFallback>
+          {{ displayedAccount.displayName?.slice(1, 3) }}
+        </AvatarFallback>
+      </Avatar>
+      <img
+        :src="displayedAccount.icon"
+        class="h-[16px] w-[16px] absolute top-5 left-5 rounded-full border bg-background"
+      >
+      <span class="font-bold max-w-[150px] md:max-w-full truncate">
+        {{ displayedAccount.displayName }}
+      </span>
+
+      <!-- Dropdown for disconnect current account -->
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="h-6 w-6 ml-1"
+              @click="displayedAccount.type === 'hive' ? disconnectFromHive() : disconnectFromHTM()"
+            >
+              <svg
+                class="w-3 h-3"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  style="fill: hsl(var(--destructive))"
+                  d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z"
+                />
+              </svg>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <span>Disconnect {{ displayedAccount.type === 'hive' ? 'Hive' : 'HTM' }} account</span>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+
+    <!-- Account management buttons -->
+    <div class="inline-flex items-center gap-1">
+      <!-- When both accounts exist: Switch button -->
+      <TooltipProvider v-if="hasBothAccounts && otherAccount">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="outline"
+              size="icon"
+              class="h-8 w-8 rounded-full"
+              @click="switchAccount(otherAccount.type)"
+            >
+              <svg
+                class="w-4 h-4"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  style="fill: hsl(var(--foreground))"
+                  :d="mdiSwapHorizontal"
+                />
+              </svg>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <div class="flex items-center gap-2">
+              <span>Switch to</span>
+              <div class="flex items-center relative">
+                <Avatar class="w-5 h-5 border">
+                  <AvatarImage
+                    v-if="otherAccount.profileImage"
+                    :src="otherAccount.profileImage"
+                  />
+                  <AvatarFallback class="text-xs">
+                    {{ otherAccount.displayName?.slice(1, 3) }}
+                  </AvatarFallback>
+                </Avatar>
+                <img
+                  :src="otherAccount.icon"
+                  class="h-[10px] w-[10px] absolute -bottom-0.5 -right-0.5 rounded-full border bg-background"
+                >
+              </div>
+              <span class="font-semibold">{{ otherAccount.displayName }}</span>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <!-- When only Hive connected: Add HTM button -->
+      <TooltipProvider v-if="hasHiveAccount && !hasHTMAccount">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="outline"
+              size="icon"
+              class="h-8 w-8 rounded-full"
+              @click="connectToHTM"
+            >
+              <img
+                :src="cTokensLogoUrl"
+                class="h-4 w-4"
+              >
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <span>Connect HTM account</span>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <!-- When only HTM connected: Add Hive button -->
+      <TooltipProvider v-if="!hasHiveAccount && hasHTMAccount">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="outline"
+              size="icon"
+              class="h-8 w-8 rounded-full"
+              @click="connectToHive"
+            >
+              <img
+                :src="hiveLogoUrl"
+                class="h-4 w-4"
+              >
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <span>Connect Hive account</span>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  </div>
+</template>
diff --git a/src/components/navigation/AppHeader.vue b/src/components/navigation/AppHeader.vue
index 276187c..2183547 100644
--- a/src/components/navigation/AppHeader.vue
+++ b/src/components/navigation/AppHeader.vue
@@ -1,99 +1,38 @@
 <script setup lang="ts">
-import { mdiLogout } from '@mdi/js';
 import { computed } from 'vue';
 
-import hiveLogoUrl from '@/assets/icons/hive.svg';
-import cTokensLogoUrl from '@/assets/icons/wallets/ctokens.svg';
+import AccountSwitcher from '@/components/navigation/AccountSwitcher.vue';
 import ToggleSidebar from '@/components/navigation/ToggleSidebar.vue';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import ThemeSwitch from '@/components/ui/theme-switch';
-import { useSettingsStore, getWalletIcon } from '@/stores/settings.store';
+import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
-import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
-import { toastError } from '@/utils/parse-error';
 
 const settingsStore = useSettingsStore();
-const hasUser = computed(() => settingsStore.settings.account !== undefined);
 const walletStore = useWalletStore();
-const userStore = useUserStore();
 const tokensStore = useTokensStore();
 
-const isL2WalletLoggedIn = computed(() => walletStore.isL2Wallet);
-
-const logout = async () => {
-  try {
-    settingsStore.resetSettings();
-    walletStore.resetWallet();
-    userStore.resetSettings();
-    await tokensStore.reset();
-  } catch(error) {
-    toastError('Failed to log out', error);
-  }
-};
+const hasAnyAccount = computed(() =>
+  (settingsStore.settings.account !== undefined && walletStore.hasWallet) ||
+  tokensStore.wallet !== undefined
+);
 </script>
 
 <template>
   <header class="w-full h-[60px] bg-background">
     <div class="fixed top-0 z-10 bg-background/60 backdrop-blur-sm px-4 h-[60px] border-b w-full md:w-[calc(100%-var(--sidebar-width))] flex items-center justify-between">
       <ToggleSidebar />
-      <div
-        v-if="settingsStore.isLoaded && hasUser"
-        class="ml-2 inline-flex items-center relative"
-      >
-        <Avatar class="w-8 h-8 mr-2 border">
-          <AvatarImage
-            v-if="userStore.profileImage"
-            :src="userStore.profileImage"
-          />
-          <AvatarFallback v-if="settingsStore.isLoaded && hasUser">
-            {{ userStore.userDisplayName?.slice(1, 3) }}
-          </AvatarFallback>
-        </Avatar>
-        <img
-          v-if="isL2WalletLoggedIn && hasUser"
-          :src="cTokensLogoUrl"
-          class="h-[16px] w-[16px] absolute top-5 left-5 rounded-full border bg-background"
-        >
-        <img
-          v-if="!isL2WalletLoggedIn && hasUser"
-          :src="hiveLogoUrl"
-          class="h-[16px] w-[16px] absolute top-5 left-5 rounded-full border bg-background"
-        >
-        <span
-          v-if="settingsStore.isLoaded && hasUser"
-          class="font-bold max-w-[150px] md:max-w-full truncate"
-        >{{ userStore.userDisplayName }}</span>
-      </div>
+      <AccountSwitcher v-if="settingsStore.isLoaded && hasAnyAccount" />
       <div class="ml-auto inline-flex items-center space-x-4 md:space-x-6">
         <ThemeSwitch class="w-6 h-6" />
         <Button
+          v-if="!hasAnyAccount"
           variant="outline"
-          class="[&_svg]:size-6 px-2 md:px-4 font-bold"
-          @click="settingsStore.isLoaded && hasUser ? logout() : walletStore.openWalletSelectModal()"
+          class="px-2 md:px-4 font-bold"
+          @click="walletStore.openWalletSelectModal()"
         >
-          <img
-            v-if="hasUser"
-            :src="getWalletIcon(settingsStore.settings.wallet!)"
-            class="h-6 w-6"
-          >
-          <span v-if="settingsStore.isLoaded && hasUser">
-            <span class="hidden md:inline">Disconnect</span>
-            <svg
-              class="inline md:hidden"
-              width="24"
-              height="24"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-            >
-              <path
-                style="fill: hsl(var(--foreground))"
-                :d="mdiLogout"
-              />
-            </svg>
-          </span>
-          <span v-else>Connect</span>
+          <span>Connect</span>
         </Button>
       </div>
     </div>
-- 
GitLab


From eb3e32a493b2cecfd738b6dced0ceb14152b8073 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Fri, 17 Oct 2025 11:25:40 +0200
Subject: [PATCH 037/102] Better handle when user does not own any amount of
 specific token

---
 src/pages/tokens/create.vue |  2 +-
 src/pages/tokens/token.vue  | 31 +++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index ac73d75..d42e449 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -131,7 +131,7 @@ const generateNAI = (): string | undefined => {
     return;
 
   try {
-    generatedNAI.value = generateHTMNAI(tokenSymbol.value, Number.parseInt(precision.value));
+    generatedNAI.value = generateHTMNAI(tokenSymbol.value, Number(precision.value));
     console.log('Regenerating NAI', generatedNAI.value);
     naiGenerated.value = true;
 
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 3df1412..0ca48d3 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -698,6 +698,7 @@ onMounted(async () => {
               </CardDescription>
             </CardHeader>
             <CardContent class="space-y-6 flex-1">
+              <!-- Not logged in state -->
               <div
                 v-if="!isLoggedIn"
                 class="text-center py-12 space-y-4"
@@ -727,6 +728,36 @@ onMounted(async () => {
                 </Button>
               </div>
 
+              <!-- No balance / token not owned state -->
+              <div
+                v-else-if="!userBalance || Number(userBalance.amount) === 0"
+                class="text-center py-12 space-y-4"
+              >
+                <div class="w-16 h-16 mx-auto bg-amber-100 dark:bg-amber-900/20 rounded-full flex items-center justify-center">
+                  <svg
+                    width="24"
+                    height="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="text-amber-600 dark:text-amber-400"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <p class="text-foreground font-semibold mb-2">
+                    You don't own this token
+                  </p>
+                  <p class="text-sm text-muted-foreground">
+                    Your account doesn't have any {{ tokenSymbol || tokenName }} tokens to transfer.
+                  </p>
+                </div>
+              </div>
+
+              <!-- Transfer form - only shown when logged in and has balance -->
               <div
                 v-else
                 class="space-y-5"
-- 
GitLab


From ecdffefba344639d43ba10c76f8cc9fe737d34b1 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Mon, 20 Oct 2025 13:16:27 +0200
Subject: [PATCH 038/102] Fix generating NAI

---
 src/utils/nai-tokens.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index 49f13a7..78a8aaf 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -78,13 +78,13 @@ const generateRandomNAI = (symbol: string): string => {
 };
 
 /**
- * Generate a unique NAI identifier for a token
+ * Generate a unique NAI identifier for a token (liquid, not vesting)
  */
 export const generateNAI = (symbol: string, precision: number): string => {
   let randomNAI: string;
   do
     randomNAI = generateRandomNAI(symbol);
-  while (!isVesting(randomNAI, precision));
+  while (isVesting(randomNAI, precision)); // Keep generating until we get a liquid (non-vesting) NAI
   return randomNAI;
 };
 
-- 
GitLab


From 3267fe491909c57040ced7dc0da84e3b9dcc4e21 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Mon, 20 Oct 2025 13:35:20 +0200
Subject: [PATCH 039/102] Get user operational key

---
 src/pages/tokens/my-balance.vue |  2 +-
 src/stores/tokens.store.ts      |  6 +++---
 src/utils/ctokens-api.ts        | 20 ++++++++++----------
 src/utils/nai-tokens.ts         |  2 +-
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 502ce31..477ffaf 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -159,7 +159,7 @@ watch(searchQuery, () => {
 const loadAccountStatistics = async () => {
   try {
     const wax = await getWax();
-    const operationalKey = getUserOperationalKey();
+    const operationalKey = await getUserOperationalKey();
 
     if (!operationalKey) {
       console.warn('No operational key available');
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 93e6db3..4c6b97f 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -113,7 +113,7 @@ export const useTokensStore = defineStore('tokens', {
   },
   actions: {
     async loadBalances (forceRefresh = false) {
-      const operationalKey = getUserOperationalKey();
+      const operationalKey = await getUserOperationalKey();
 
       if (!operationalKey) {
         this.lastError = 'No operational key available';
@@ -251,7 +251,7 @@ export const useTokensStore = defineStore('tokens', {
       );
     },
     async getBalanceHistory (nai: string, precision: number, page = 1): Promise<CtokensAppBalanceHistory[]> {
-      const operationalKey = getUserOperationalKey();
+      const operationalKey = await getUserOperationalKey();
       if (!operationalKey)
         throw new Error('No operational key available');
 
@@ -283,7 +283,7 @@ export const useTokensStore = defineStore('tokens', {
       precision: number,
       metadata: Record<string, string>
     ): Promise<void> {
-      const operationalKey = getUserOperationalKey();
+      const operationalKey = await getUserOperationalKey();
       if (!operationalKey)
         throw new Error('No operational key available');
 
diff --git a/src/utils/ctokens-api.ts b/src/utils/ctokens-api.ts
index 7cad43b..11f9379 100644
--- a/src/utils/ctokens-api.ts
+++ b/src/utils/ctokens-api.ts
@@ -1,6 +1,5 @@
 import type { TWaxRestExtended, IHiveChainInterface } from '@hiveio/wax';
 
-import { useSettingsStore } from '@/stores/settings.store';
 import { getWax } from '@/stores/wax.store';
 import type {
   CtokensAppBalance,
@@ -257,19 +256,20 @@ export const canTokenStake = (token: CToken): boolean => {
 
 /**
  * Get user's operational key (for API calls)
+ * Returns the operational public key from the user's wallet
  */
-export const getUserOperationalKey = (): string => {
-  const settingsStore = useSettingsStore();
-  // For now, use the connected account name as operational key
-  // In a real implementation, this would be derived from user's keys
-  const account = settingsStore.settings.account;
-
-  if (!account) {
-    console.warn('No account connected - using empty operational key');
+export const getUserOperationalKey = async (): Promise<string> => {
+  // Import CTokensProvider to access the actual operational key from wallet
+  const { CTokensProvider } = await import('@/utils/wallet/ctokens/signer');
+
+  const operationalKey = CTokensProvider.getOperationalPublicKey();
+
+  if (!operationalKey) {
+    console.warn('No operational key available - user may not be logged in');
     return '';
   }
 
-  return account;
+  return operationalKey;
 };
 
 /**
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index 78a8aaf..93a6f2f 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -250,7 +250,7 @@ export const getTokenDefinitions = async (creator?: string): Promise<CtokensAppA
  */
 export const getAccountBalances = async (): Promise<CtokensAppArrayOfTokens> => {
   try {
-    const operationalKey = getUserOperationalKey();
+    const operationalKey = await getUserOperationalKey();
     if (!operationalKey)
       throw new Error('No operational key available');
 
-- 
GitLab


From 78d5185930e35ea2b17f95fb5024628bdf29824c Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Tue, 21 Oct 2025 08:57:27 +0200
Subject: [PATCH 040/102] Add mising HTM functions

---
 src/pages/tokens/my-balance.vue |  26 +-
 src/pages/tokens/token.vue      | 460 +++++++++++++++++++++++++++++++-
 src/utils/htm.ts                |  81 ++++++
 src/utils/nai-tokens.ts         | 139 +++++++---
 4 files changed, 637 insertions(+), 69 deletions(-)

diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 477ffaf..39f3cc5 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -222,7 +222,8 @@ const transferTokens = async () => {
     await transferNAIToken({
       to: transferRecipient.value,
       amount: transferAmount.value,
-      symbol: getTokenSymbol(selectedTokenForTransfer.value),
+      nai: selectedTokenForTransfer.value.nai || '',
+      precision: selectedTokenForTransfer.value.precision || 0,
       memo: transferMemo.value || undefined
     });
 
@@ -258,7 +259,8 @@ const transformTokens = async () => {
 
     await stakeNAIToken({
       amount: transformAmount.value,
-      symbol: getTokenSymbol(selectedToken.value),
+      nai: selectedToken.value.nai || '',
+      precision: selectedToken.value.precision || 0,
       direction: transformDirection.value === 'liquid-to-staked' ? 'stake' : 'unstake'
     });
 
@@ -299,37 +301,29 @@ const navigateToToken = (balance: CtokensAppBalance) => {
   });
 };
 
-// Set max transfer amount with proper precision
+// Set max transfer amount - use raw amount without precision formatting
 const setMaxTransferAmount = async () => {
   if (!selectedTokenForTransfer.value) return;
 
   try {
-    const wax = await getWax();
-    const formattedAmount = wax.formatter.formatNumber(
-      selectedTokenForTransfer.value.amount || '0',
-      selectedTokenForTransfer.value.precision || 0
-    );
-    transferAmount.value = formattedAmount;
+    // Use the raw amount directly from the balance
+    transferAmount.value = selectedTokenForTransfer.value.amount || '0';
   } catch (error) {
     console.error('Failed to set max transfer amount:', error);
   }
 };
 
-// Set max transform amount with proper precision
+// Set max transform amount - use raw amount without precision formatting
 const setMaxTransformAmount = async () => {
   if (!selectedToken.value) return;
 
   try {
-    const wax = await getWax();
     const amount = transformDirection.value === 'liquid-to-staked'
       ? (selectedToken.value.amount || '0')
       : getStakedBalance(selectedToken.value);
 
-    const formattedAmount = wax.formatter.formatNumber(
-      amount,
-      selectedToken.value.precision || 0
-    );
-    transformAmount.value = formattedAmount;
+    // Use the raw amount directly without formatting
+    transformAmount.value = amount;
   } catch (error) {
     console.error('Failed to set max transform amount:', error);
   }
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 0ca48d3..73ac775 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { mdiPencilOutline, mdiContentCopy, mdiCheck } from '@mdi/js';
+import { HtmTransaction } from '@mtyszczak-cargo/htm';
 import { onMounted, ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
@@ -17,6 +18,7 @@ import { useTokensStore } from '@/stores/tokens.store';
 import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
 import { isValidPublicKey } from '@/utils/htm';
+import { transferNAIToken } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import type { CtokensAppToken, CtokensAppBalance, CtokensAppTopHolder } from '@/utils/wallet/ctokens/api';
 
@@ -35,6 +37,8 @@ const topHolders = ref<CtokensAppTopHolder[]>([]);
 const isLoading = ref(true);
 const isLoadingHolders = ref(false);
 const isTransferring = ref(false);
+const isStaking = ref(false);
+const isUnstaking = ref(false);
 const isCopied = ref(false);
 const isNaiCopied = ref(false);
 
@@ -45,6 +49,12 @@ const transferForm = ref({
   memo: ''
 });
 
+// Stake/Unstake form
+const stakeForm = ref({
+  amount: '',
+  receiver: '' // Optional: can stake to another account
+});
+
 // Get NAI from route parameter
 const nai = computed(() => route.query.nai as string);
 const precision = computed(() => route.query.precision);
@@ -220,17 +230,13 @@ const loadTopHolders = async () => {
   }
 };
 
-// Set max amount with proper precision
+// Set max amount - use raw amount without precision formatting
 const setMaxAmount = async () => {
   if (!userBalance.value || !token.value) return;
 
   try {
-    const wax = await getWax();
-    const formattedAmount = wax.formatter.formatNumber(
-      userBalance.value.amount!,
-      token.value.precision || 0
-    );
-    transferForm.value.amount = formattedAmount;
+    // Use the raw amount directly from the balance
+    transferForm.value.amount = userBalance.value.amount!;
   } catch (error) {
     console.error('Failed to set max amount:', error);
   }
@@ -329,8 +335,31 @@ const handleTransfer = async () => {
   try {
     isTransferring.value = true;
 
-    // TODO: Implement actual transfer functionality
-    throw new Error('Transfer functionality not yet implemented');
+    // Get token symbol from metadata
+    const metadata = token.value.metadata as { symbol?: string } | undefined;
+    const symbol = metadata?.symbol || token.value.nai || '';
+
+    // Transfer the tokens using transferNAIToken
+    await transferNAIToken({
+      to: transferForm.value.to,
+      amount: transferForm.value.amount,
+      nai: token.value.nai!,
+      precision: token.value.precision || 0,
+      memo: transferForm.value.memo || undefined
+    });
+
+    toast.success(`Successfully transferred ${transferForm.value.amount} ${symbol} tokens`);
+
+    // Reset form
+    transferForm.value = {
+      to: '',
+      amount: '',
+      memo: ''
+    };
+
+    // Reload user balance
+    await tokensStore.loadBalances(true);
+    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
 
   } catch (error) {
     toastError('Transfer failed', error);
@@ -339,6 +368,187 @@ const handleTransfer = async () => {
   }
 };
 
+// Handle stake tokens
+const handleStake = async () => {
+  if (!token.value || !isLoggedIn.value) {
+    toastError('You must be logged in to stake tokens', new Error('Not logged in'));
+    return;
+  }
+
+  if (!tokensStore.wallet?.publicKey) {
+    toastError('HTM wallet not available', new Error('No wallet'));
+    return;
+  }
+
+  if (!stakeForm.value.amount) {
+    toastError('Please enter amount to stake', new Error('Missing amount'));
+    return;
+  }
+
+  // Check if staking is allowed
+  if (!token.value.others_can_stake && !isTokenOwner.value) {
+    toastError('Staking is not allowed for this token', new Error('Staking disabled'));
+    return;
+  }
+
+  // Validate amount precision
+  const validation = validateAmountPrecision(stakeForm.value.amount, token.value.precision || 0);
+  if (!validation.isValid) {
+    toastError('Invalid amount', new Error(validation.error || 'Invalid amount format'));
+    return;
+  }
+
+  // Validate receiver if provided
+  if (stakeForm.value.receiver && !isValidPublicKey(stakeForm.value.receiver)) {
+    toastError('Invalid receiver address', new Error('Receiver must be a valid public key'));
+    return;
+  }
+
+  try {
+    isStaking.value = true;
+
+    const wax = await getWax();
+
+    // Set proxy account for HTM transactions
+    HtmTransaction.HiveProxyAccount = settingsStore.settings.account!;
+
+    // Create Layer 2 HTM transaction for token transform (stake)
+    const l2Transaction = new HtmTransaction(wax);
+
+    l2Transaction.pushOperation({
+      token_transform: {
+        holder: tokensStore.wallet.publicKey,
+        receiver: stakeForm.value.receiver || undefined,
+        amount: {
+          amount: stakeForm.value.amount,
+          nai: token.value.nai!,
+          precision: token.value.precision || 0
+        }
+      }
+    });
+
+    await tokensStore.wallet.signTransaction(l2Transaction);
+
+    // Create Layer 1 transaction and broadcast
+    const l1Transaction = await wax.createTransaction();
+    l1Transaction.pushOperation(l2Transaction);
+
+    // Broadcast the transaction
+    await wax.broadcast(l1Transaction);
+
+    const metadata = token.value.metadata as { symbol?: string } | undefined;
+    const symbol = metadata?.symbol || token.value.nai || '';
+
+    toast.success(`Successfully staked ${stakeForm.value.amount} ${symbol} tokens`);
+
+    // Reset form
+    stakeForm.value = {
+      amount: '',
+      receiver: ''
+    };
+
+    // Reload user balance
+    await tokensStore.loadBalances(true);
+    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
+
+  } catch (error) {
+    toastError('Staking failed', error);
+  } finally {
+    isStaking.value = false;
+  }
+};
+
+// Handle unstake tokens
+const handleUnstake = async () => {
+  if (!token.value || !isLoggedIn.value) {
+    toastError('You must be logged in to unstake tokens', new Error('Not logged in'));
+    return;
+  }
+
+  if (!tokensStore.wallet?.publicKey) {
+    toastError('HTM wallet not available', new Error('No wallet'));
+    return;
+  }
+
+  if (!stakeForm.value.amount) {
+    toastError('Please enter amount to unstake', new Error('Missing amount'));
+    return;
+  }
+
+  // Check if unstaking is allowed
+  if (!token.value.others_can_unstake && !isTokenOwner.value) {
+    toastError('Unstaking is not allowed for this token', new Error('Unstaking disabled'));
+    return;
+  }
+
+  // Validate amount precision
+  const validation = validateAmountPrecision(stakeForm.value.amount, token.value.precision || 0);
+  if (!validation.isValid) {
+    toastError('Invalid amount', new Error(validation.error || 'Invalid amount format'));
+    return;
+  }
+
+  // Validate receiver if provided
+  if (stakeForm.value.receiver && !isValidPublicKey(stakeForm.value.receiver)) {
+    toastError('Invalid receiver address', new Error('Receiver must be a valid public key'));
+    return;
+  }
+
+  try {
+    isUnstaking.value = true;
+
+    const wax = await getWax();
+
+    // Set proxy account for HTM transactions
+    HtmTransaction.HiveProxyAccount = settingsStore.settings.account!;
+
+    // Create Layer 2 HTM transaction for token transform (unstake)
+    const l2Transaction = new HtmTransaction(wax);
+
+    l2Transaction.pushOperation({
+      // @ts-expect-error TODO: Interface issue to resolve
+      token_transform_operation: {
+        holder: tokensStore.wallet.publicKey,
+        receiver: stakeForm.value.receiver || undefined,
+        amount: {
+          amount: stakeForm.value.amount,
+          nai: token.value.nai!,
+          precision: token.value.precision || 0
+        }
+      }
+    });
+
+    await tokensStore.wallet.signTransaction(l2Transaction);
+
+    // Create Layer 1 transaction and broadcast
+    const l1Transaction = await wax.createTransaction();
+    l1Transaction.pushOperation(l2Transaction);
+
+    // Broadcast the transaction
+    await wax.broadcast(l1Transaction);
+
+    const metadata = token.value.metadata as { symbol?: string } | undefined;
+    const symbol = metadata?.symbol || token.value.nai || '';
+
+    toast.success(`Successfully unstaked ${stakeForm.value.amount} ${symbol} tokens`);
+
+    // Reset form
+    stakeForm.value = {
+      amount: '',
+      receiver: ''
+    };
+
+    // Reload user balance
+    await tokensStore.loadBalances(true);
+    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
+
+  } catch (error) {
+    toastError('Unstaking failed', error);
+  } finally {
+    isUnstaking.value = false;
+  }
+};
+
 // Navigate back to token list
 const goBack = () => {
   router.push('/tokens/list');
@@ -880,6 +1090,238 @@ onMounted(async () => {
             </CardContent>
           </Card>
 
+          <!-- Stake/Unstake Section -->
+          <Card
+            v-if="token && (token.others_can_stake || token.others_can_unstake || isTokenOwner)"
+            class="flex flex-col h-full"
+          >
+            <CardHeader>
+              <CardTitle class="flex items-center gap-2">
+                <svg
+                  width="20"
+                  height="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  class="text-primary"
+                >
+                  <path
+                    style="fill: currentColor"
+                    d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z"
+                  />
+                </svg>
+                Stake / Unstake Tokens
+              </CardTitle>
+              <CardDescription>
+                Transform between liquid and staked tokens
+              </CardDescription>
+            </CardHeader>
+            <CardContent class="space-y-6 flex-1">
+              <!-- Not logged in state -->
+              <div
+                v-if="!isLoggedIn"
+                class="text-center py-12 space-y-4"
+              >
+                <div class="w-16 h-16 mx-auto bg-muted rounded-full flex items-center justify-center">
+                  <svg
+                    width="24"
+                    height="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="text-muted-foreground"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+                    />
+                  </svg>
+                </div>
+                <p class="text-muted-foreground font-medium">
+                  Connect your wallet to stake/unstake tokens
+                </p>
+                <Button
+                  size="lg"
+                  @click="$router.push('/')"
+                >
+                  Connect Wallet
+                </Button>
+              </div>
+
+              <!-- No balance state -->
+              <div
+                v-else-if="!userBalance || Number(userBalance.amount) === 0"
+                class="text-center py-12 space-y-4"
+              >
+                <div class="w-16 h-16 mx-auto bg-amber-100 dark:bg-amber-900/20 rounded-full flex items-center justify-center">
+                  <svg
+                    width="24"
+                    height="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="text-amber-600 dark:text-amber-400"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <p class="text-foreground font-semibold mb-2">
+                    You don't own this token
+                  </p>
+                  <p class="text-sm text-muted-foreground">
+                    Your account doesn't have any {{ tokenSymbol || tokenName }} tokens to stake/unstake.
+                  </p>
+                </div>
+              </div>
+
+              <!-- Stake/Unstake form -->
+              <div
+                v-else
+                class="space-y-5"
+              >
+                <div class="space-y-2">
+                  <Label
+                    for="stake-amount"
+                    class="text-sm font-medium text-foreground"
+                  >
+                    Amount
+                  </Label>
+                  <div class="relative">
+                    <Input
+                      id="stake-amount"
+                      v-model="stakeForm.amount"
+                      type="text"
+                      inputmode="decimal"
+                      :placeholder="`Amount in ${tokenSymbol || tokenName}`"
+                      :disabled="isStaking || isUnstaking"
+                      class="pr-20 transition-colors"
+                    />
+                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground font-medium">
+                      {{ tokenSymbol }}
+                    </span>
+                  </div>
+                  <p
+                    v-if="token"
+                    class="text-xs text-muted-foreground"
+                  >
+                    Precision: {{ token.precision }} decimal places
+                  </p>
+                </div>
+
+                <div class="space-y-2">
+                  <Label
+                    for="stake-receiver"
+                    class="text-sm font-medium text-foreground"
+                  >
+                    Receiver (Optional)
+                  </Label>
+                  <Input
+                    id="stake-receiver"
+                    v-model="stakeForm.receiver"
+                    placeholder="Receiver public key (defaults to you)"
+                    :disabled="isStaking || isUnstaking"
+                    class="transition-colors font-mono text-sm"
+                  />
+                  <p class="text-xs text-muted-foreground">
+                    Leave empty to stake/unstake to yourself
+                  </p>
+                </div>
+
+                <div class="grid grid-cols-2 gap-3">
+                  <Button
+                    v-if="token.others_can_stake || isTokenOwner"
+                    size="lg"
+                    :disabled="isStaking || isUnstaking || !stakeForm.amount"
+                    @click="handleStake"
+                  >
+                    <svg
+                      v-if="isStaking"
+                      width="16"
+                      height="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      class="mr-2 animate-spin"
+                    >
+                      <path
+                        style="fill: currentColor"
+                        d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+                      />
+                    </svg>
+                    <svg
+                      v-else
+                      width="16"
+                      height="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      class="mr-2"
+                    >
+                      <path
+                        style="fill: currentColor"
+                        d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2Z"
+                      />
+                    </svg>
+                    {{ isStaking ? 'Staking...' : 'Stake' }}
+                  </Button>
+
+                  <Button
+                    v-if="token.others_can_unstake || isTokenOwner"
+                    variant="outline"
+                    size="lg"
+                    :disabled="isStaking || isUnstaking || !stakeForm.amount"
+                    @click="handleUnstake"
+                  >
+                    <svg
+                      v-if="isUnstaking"
+                      width="16"
+                      height="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      class="mr-2 animate-spin"
+                    >
+                      <path
+                        style="fill: currentColor"
+                        d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+                      />
+                    </svg>
+                    <svg
+                      v-else
+                      width="16"
+                      height="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      class="mr-2"
+                    >
+                      <path
+                        style="fill: currentColor"
+                        d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z"
+                      />
+                    </svg>
+                    {{ isUnstaking ? 'Unstaking...' : 'Unstake' }}
+                  </Button>
+                </div>
+
+                <Alert
+                  v-if="!token.others_can_stake && !isTokenOwner"
+                  class="bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800"
+                >
+                  <AlertDescription class="text-amber-800 dark:text-amber-200 text-sm">
+                    ⚠️ Staking is disabled for this token (only owner can stake)
+                  </AlertDescription>
+                </Alert>
+
+                <Alert
+                  v-if="!token.others_can_unstake && !isTokenOwner"
+                  class="bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800"
+                >
+                  <AlertDescription class="text-amber-800 dark:text-amber-200 text-sm">
+                    ⚠️ Unstaking is disabled for this token (only owner can unstake)
+                  </AlertDescription>
+                </Alert>
+              </div>
+            </CardContent>
+          </Card>
+
           <!-- Top Holders Section -->
           <Card class="flex flex-col h-full">
             <CardHeader>
diff --git a/src/utils/htm.ts b/src/utils/htm.ts
index 20eb54b..65459f4 100644
--- a/src/utils/htm.ts
+++ b/src/utils/htm.ts
@@ -54,6 +54,16 @@ export interface HTMAssetMetadataUpdateData {
   }[];
 }
 
+export interface HTMTokenTransformData {
+  holder: TPublicKey;
+  receiver?: TPublicKey;
+  amount: {
+    amount: string;
+    nai: string;
+    precision: number;
+  };
+}
+
 /**
  * HTM Transaction Builder - Utility class for creating and managing HTM transactions
  */
@@ -142,6 +152,21 @@ export class HTMTransactionBuilder {
     return this;
   }
 
+  /**
+   * Add token transform operation (stake/unstake) to the transaction
+   * The operation automatically detects whether to stake or unstake based on the asset type
+   */
+  addTokenTransform (data: HTMTokenTransformData): this {
+    this.transaction.pushOperation({
+      token_transform: {
+        holder: data.holder,
+        receiver: data.receiver,
+        amount: data.amount
+      }
+    });
+    return this;
+  }
+
   /**
    * Sign the transaction with the provided wallet
    */
@@ -352,6 +377,62 @@ export async function updateHTMAssetMetadata (
   return l1Tx.id.toString();
 }
 
+/**
+ * Stake HTM tokens (transform liquid tokens to staked/vesting)
+ */
+export async function stakeHTMToken (
+  transformData: HTMTokenTransformData,
+  wallet: IBeekeeperUnlockedWallet,
+  operationalAccount: string
+): Promise<string> {
+  const wax = await getWax();
+
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = operationalAccount;
+
+  // Create L2 transaction for token transform (stake)
+  const htmBuilder = await HTMTransactionBuilder.create();
+  htmBuilder.addTokenTransform(transformData);
+  await htmBuilder.sign(wallet);
+
+  // Create L1 transaction to broadcast the HTM transaction
+  const l1Tx = await wax.createTransaction();
+  l1Tx.pushOperation(htmBuilder.getTransaction());
+  l1Tx.sign(wallet, transformData.holder);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Tx);
+  return l1Tx.id.toString();
+}
+
+/**
+ * Unstake HTM tokens (transform staked/vesting tokens to liquid)
+ */
+export async function unstakeHTMToken (
+  transformData: HTMTokenTransformData,
+  wallet: IBeekeeperUnlockedWallet,
+  operationalAccount: string
+): Promise<string> {
+  const wax = await getWax();
+
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = operationalAccount;
+
+  // Create L2 transaction for token transform (unstake)
+  const htmBuilder = await HTMTransactionBuilder.create();
+  htmBuilder.addTokenTransform(transformData);
+  await htmBuilder.sign(wallet);
+
+  // Create L1 transaction to broadcast the HTM transaction
+  const l1Tx = await wax.createTransaction();
+  l1Tx.pushOperation(htmBuilder.getTransaction());
+  l1Tx.sign(wallet, transformData.holder);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Tx);
+  return l1Tx.id.toString();
+}
+
 /**
  * Validate public key format
  */
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index 93a6f2f..634d9b0 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -1,5 +1,7 @@
+import { HtmTransaction } from '@mtyszczak-cargo/htm';
+
 import { useSettingsStore } from '@/stores/settings.store';
-import { isVesting } from '@/stores/tokens.store';
+import { isVesting, useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 
@@ -8,6 +10,7 @@ import {
   getUserOperationalKey
 } from './ctokens-api';
 import type { CtokensAppArrayOfTokens } from './wallet/ctokens/api';
+import CTokensProvider from './wallet/ctokens/signer';
 
 export interface TokenCreationParams {
   symbol: string;
@@ -22,14 +25,17 @@ export interface TokenCreationParams {
 export interface TokenTransferParams {
   to: string;
   amount: string;
-  symbol: string;
+  nai: string;
+  precision: number;
   memo?: string;
 }
 
 export interface TokenStakeParams {
   amount: string;
-  symbol: string;
+  nai: string;
+  precision: number;
   direction: 'stake' | 'unstake';
+  receiver?: string;
 }
 
 const generateRandomNAI = (symbol: string): string => {
@@ -117,16 +123,17 @@ export const createNAIToken = async (params: TokenCreationParams) => {
     custom_json_operation: {
       required_auths: [],
       required_posting_auths: [settingsStore.settings.account],
-      id: 'nai_token_create',
+      id: 'htm',
       json: JSON.stringify(tokenData)
     }
   });
 
   await walletStore.wallet!.signTransaction(tx);
 
-  // TODO: Here you would broadcast to the blockchain
-  // For now, return the transaction
-  return tx.toApi();
+  // Broadcast the transaction to the blockchain
+  await wax.broadcast(tx);
+
+  return tx.id.toString();
 };
 
 /**
@@ -136,38 +143,58 @@ export const transferNAIToken = async (params: TokenTransferParams) => {
   const wax = await getWax();
   const settingsStore = useSettingsStore();
   const walletStore = useWalletStore();
+  const tokensStore = useTokensStore();
 
   if (!settingsStore.settings.account)
     throw new Error('No account connected');
 
-
   if (!walletStore.hasWallet)
     throw new Error('No wallet available');
 
+  // Check if HTM wallet is connected
+  if (!tokensStore.wallet)
+    throw new Error('Please connect your HTM wallet first');
 
-  const tx = await wax.createTransaction();
+  // For fee payment
+  await walletStore.createWalletFor(settingsStore.settings, 'active');
 
-  // Create custom JSON operation for token transfer
-  const transferData = {
-    action: 'transfer_token',
-    data: {
-      ...params,
-      from: settingsStore.settings.account
-    }
-  };
+  // Reset tokens store with CTokens provider
+  await tokensStore.reset(await CTokensProvider.for(wax, 'active'));
 
-  tx.pushOperation({
-    custom_json_operation: {
-      required_auths: [],
-      required_posting_auths: [settingsStore.settings.account],
-      id: 'nai_token_transfer',
-      json: JSON.stringify(transferData)
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = settingsStore.settings.account;
+
+  // Create Layer 2 HTM transaction for token transfer
+  const l2Transaction = new HtmTransaction(wax);
+
+  l2Transaction.pushOperation({
+    token_transfer_operation: {
+      sender: tokensStore.wallet.publicKey!,
+      receiver: params.to,
+      amount: {
+        amount: params.amount,
+        nai: params.nai,
+        precision: params.precision
+      },
+      memo: params.memo || ''
     }
   });
 
-  await walletStore.wallet!.signTransaction(tx);
+  await tokensStore.wallet!.signTransaction(l2Transaction);
+
+  // Create Layer 1 transaction and broadcast
+  const l1Transaction = await wax.createTransaction();
 
-  return tx.toApi();
+  // Add the L2 transaction as an operation in L1 transaction
+  l1Transaction.pushOperation(l2Transaction);
+
+  // Sign Layer 1 transaction with the Hive active key
+  await walletStore.wallet!.signTransaction(l1Transaction);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Transaction);
+
+  return l1Transaction.id.toString();
 };
 
 /**
@@ -177,38 +204,58 @@ export const stakeNAIToken = async (params: TokenStakeParams) => {
   const wax = await getWax();
   const settingsStore = useSettingsStore();
   const walletStore = useWalletStore();
+  const tokensStore = useTokensStore();
 
   if (!settingsStore.settings.account)
     throw new Error('No account connected');
 
-
   if (!walletStore.hasWallet)
     throw new Error('No wallet available');
 
+  // Check if HTM wallet is connected
+  if (!tokensStore.wallet)
+    throw new Error('Please connect your HTM wallet first');
 
-  const tx = await wax.createTransaction();
+  // For fee payment
+  await walletStore.createWalletFor(settingsStore.settings, 'active');
 
-  // Create custom JSON operation for token staking
-  const stakeData = {
-    action: 'stake_token',
-    data: {
-      ...params,
-      account: settingsStore.settings.account
-    }
-  };
+  // Reset tokens store with CTokens provider
+  await tokensStore.reset(await CTokensProvider.for(wax, 'active'));
 
-  tx.pushOperation({
-    custom_json_operation: {
-      required_auths: [],
-      required_posting_auths: [settingsStore.settings.account],
-      id: 'nai_token_stake',
-      json: JSON.stringify(stakeData)
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = settingsStore.settings.account;
+
+  // Create Layer 2 HTM transaction for token transform (stake/unstake)
+  const l2Transaction = new HtmTransaction(wax);
+
+  l2Transaction.pushOperation({
+    // @ts-expect-error TODO: Interface issue to resolve
+    token_transform_operation: {
+      holder: tokensStore.wallet.publicKey,
+      receiver: params.receiver || undefined,
+      amount: {
+        amount: params.amount,
+        nai: params.nai,
+        precision: params.precision
+      }
     }
   });
 
-  await walletStore.wallet!.signTransaction(tx);
+  await tokensStore.wallet!.signTransaction(l2Transaction);
 
-  return tx.toApi();
+  // Create Layer 1 transaction and broadcast
+  const l1Transaction = await wax.createTransaction();
+
+  // Add the L2 transaction as an operation in L1 transaction
+  l1Transaction.pushOperation(l2Transaction);
+
+  // Sign Layer 1 transaction with the Hive active key
+  await walletStore.wallet!.signTransaction(l1Transaction);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Transaction);
+
+  return l1Transaction.id.toString();
 };
 
 /**
@@ -354,10 +401,14 @@ export const userSignup = async (account: string, email?: string, referrer?: str
 
     await walletStore.wallet!.signTransaction(tx);
 
+    // Broadcast the transaction to the blockchain
+    await wax.broadcast(tx);
+
     return {
       success: true,
       account_exists: false,
-      message: 'User signup completed successfully'
+      message: 'User signup completed successfully',
+      transaction_id: tx.id.toString()
     };
 
   } catch (error) {
-- 
GitLab


From 7ee01d7f6c4ed50b8d3468eb3fd4a3f852e657cd Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 22 Oct 2025 09:07:02 +0200
Subject: [PATCH 041/102] Add transaction status

---
 src/pages/tokens/create.vue           |  17 ++--
 src/pages/tokens/edit.vue             |  36 ++++---
 src/pages/tokens/my-balance.vue       |  41 ++++----
 src/pages/tokens/register-account.vue |  18 ++--
 src/pages/tokens/token.vue            |  95 ++++++++++---------
 src/stores/tokens.store.ts            |   9 +-
 src/utils/transaction-status.ts       | 130 ++++++++++++++++++++++++++
 7 files changed, 256 insertions(+), 90 deletions(-)
 create mode 100644 src/utils/transaction-status.ts

diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index d42e449..f24ff66 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -28,6 +28,7 @@ import { copyText } from '@/utils/copy';
 import { parseAssetAmount } from '@/utils/htm-utils';
 import { generateNAI as generateHTMNAI } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
+import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 const tokensStore = useTokensStore();
@@ -252,13 +253,17 @@ const createToken = async () => {
     // Broadcast the transaction
     await wax.broadcast(l1Transaction);
 
-    // Success!
-    toast.success('Token created successfully!', {
-      description: `Token ${assetTokenName} has been created and deployed to the Hive Token Machine.`
-    });
+    const txId = l1Transaction.id.toString();
 
-    // Reset form
-    resetForm();
+    // Wait for transaction status
+    await waitForTransactionStatus(
+      txId,
+      'Token creation',
+      async () => {
+        // Success, reset form
+        resetForm();
+      }
+    );
   } catch (error) {
     toastError('Failed to create token', error);
   } finally {
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index e7e2408..e71c0be 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -18,6 +18,7 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
+import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 
 // Router
@@ -149,25 +150,32 @@ const handleUpdateToken = async () => {
     };
 
     // Call store method to update token metadata
-    await tokensStore.updateTokenMetadata(
+    const txId = await tokensStore.updateTokenMetadata(
       token.value.nai!,
       token.value.precision!,
       metadata
     );
 
-    toast.success('Token metadata updated successfully!');
-
-    // Navigate back to token detail page
-    setTimeout(() => {
-      router.push({
-        path: '/tokens/token',
-        query: {
-          nai: token.value!.nai,
-          precision: token.value!.precision
-        }
-      });
-    }, 1000);
-
+    // Wait for transaction status
+    await waitForTransactionStatus(
+      txId,
+      'Token metadata update',
+      async () => {
+        // Refresh token data after update
+        await tokensStore.loadRegisteredTokens(token.value!.nai, token.value!.precision, 1, true);
+
+        // Navigate back to token detail page
+        setTimeout(() => {
+          router.push({
+            path: '/tokens/token',
+            query: {
+              nai: token.value!.nai,
+              precision: token.value!.precision
+            }
+          });
+        }, 1000);
+      }
+    );
   } catch (error) {
     toastError('Failed to update token metadata', error);
   } finally {
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 39f3cc5..7013edb 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -27,6 +27,7 @@ import { getWax } from '@/stores/wax.store';
 import { getUserOperationalKey } from '@/utils/ctokens-api';
 import { transferNAIToken, stakeNAIToken } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
+import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppBalance } from '@/utils/wallet/ctokens/api';
 
 const router = useRouter();
@@ -219,7 +220,7 @@ const transferTokens = async () => {
   try {
     isTransferLoading.value = true;
 
-    await transferNAIToken({
+    const txId = await transferNAIToken({
       to: transferRecipient.value,
       amount: transferAmount.value,
       nai: selectedTokenForTransfer.value.nai || '',
@@ -227,13 +228,17 @@ const transferTokens = async () => {
       memo: transferMemo.value || undefined
     });
 
-    const symbol = getTokenSymbol(selectedTokenForTransfer.value);
-    toast.success(`Successfully transferred ${transferAmount.value} ${symbol} to ${transferRecipient.value}`);
+    // Wait for transaction status
+    await waitForTransactionStatus(
+      txId,
+      'Transfer',
+      async () => {
+        // Refresh balances on success
+        await loadAccountBalances();
+        isTransferDialogOpen.value = false;
+      }
+    );
 
-    // Refresh balances
-    await loadAccountBalances();
-
-    isTransferDialogOpen.value = false;
   } catch (error) {
     toastError('Failed to transfer tokens', error);
   } finally {
@@ -257,21 +262,25 @@ const transformTokens = async () => {
   try {
     isTransformLoading.value = true;
 
-    await stakeNAIToken({
+    const txId = await stakeNAIToken({
       amount: transformAmount.value,
       nai: selectedToken.value.nai || '',
       precision: selectedToken.value.precision || 0,
       direction: transformDirection.value === 'liquid-to-staked' ? 'stake' : 'unstake'
     });
 
-    const action = transformDirection.value === 'liquid-to-staked' ? 'staked' : 'unstaked';
-    const symbol = getTokenSymbol(selectedToken.value);
-    toast.success(`Successfully ${action} ${transformAmount.value} ${symbol}`);
-
-    // Refresh balances
-    await loadAccountBalances();
-
-    isTransformDialogOpen.value = false;
+    const action = transformDirection.value === 'liquid-to-staked' ? 'Stake' : 'Unstake';
+
+    // Wait for transaction status
+    await waitForTransactionStatus(
+      txId,
+      action,
+      async () => {
+        // Refresh balances on success
+        await loadAccountBalances();
+        isTransformDialogOpen.value = false;
+      }
+    );
   } catch (error) {
     toastError('Failed to transform tokens', error);
   } finally {
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index 49e29b3..a628f96 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -23,6 +23,7 @@ import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
+import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 const walletStore = useWalletStore();
@@ -312,13 +313,18 @@ const registerHTMAccount = async () => {
     // Broadcast the transaction
     await wax.broadcast(l1Transaction);
 
-    // Success!
-    toast.success('HTM Account registered successfully!');
-
-    // After successful registration, redirect to login
-    showRegistrationForm.value = false;
-    showHTMLogin();
+    const txId = l1Transaction.id.toString();
 
+    // Wait for transaction status
+    await waitForTransactionStatus(
+      txId,
+      'HTM account registration',
+      async () => {
+        // After successful registration, redirect to login
+        showRegistrationForm.value = false;
+        showHTMLogin();
+      }
+    );
   } catch (error) {
     toastError('Failed to create HTM account', error);
   } finally {
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 73ac775..cd3f3f5 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -20,6 +20,7 @@ import { copyText } from '@/utils/copy';
 import { isValidPublicKey } from '@/utils/htm';
 import { transferNAIToken } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
+import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppToken, CtokensAppBalance, CtokensAppTopHolder } from '@/utils/wallet/ctokens/api';
 
 // Router
@@ -335,12 +336,8 @@ const handleTransfer = async () => {
   try {
     isTransferring.value = true;
 
-    // Get token symbol from metadata
-    const metadata = token.value.metadata as { symbol?: string } | undefined;
-    const symbol = metadata?.symbol || token.value.nai || '';
-
     // Transfer the tokens using transferNAIToken
-    await transferNAIToken({
+    const txId = await transferNAIToken({
       to: transferForm.value.to,
       amount: transferForm.value.amount,
       nai: token.value.nai!,
@@ -348,18 +345,23 @@ const handleTransfer = async () => {
       memo: transferForm.value.memo || undefined
     });
 
-    toast.success(`Successfully transferred ${transferForm.value.amount} ${symbol} tokens`);
-
-    // Reset form
-    transferForm.value = {
-      to: '',
-      amount: '',
-      memo: ''
-    };
+    // Wait for transaction status
+    await waitForTransactionStatus(
+      txId,
+      'Transfer',
+      async () => {
+        // Reset form on success
+        transferForm.value = {
+          to: '',
+          amount: '',
+          memo: ''
+        };
 
-    // Reload user balance
-    await tokensStore.loadBalances(true);
-    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
+        // Reload user balance
+        await tokensStore.loadBalances(true);
+        userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
+      }
+    );
 
   } catch (error) {
     toastError('Transfer failed', error);
@@ -436,20 +438,24 @@ const handleStake = async () => {
     // Broadcast the transaction
     await wax.broadcast(l1Transaction);
 
-    const metadata = token.value.metadata as { symbol?: string } | undefined;
-    const symbol = metadata?.symbol || token.value.nai || '';
-
-    toast.success(`Successfully staked ${stakeForm.value.amount} ${symbol} tokens`);
-
-    // Reset form
-    stakeForm.value = {
-      amount: '',
-      receiver: ''
-    };
+    const txId = l1Transaction.id.toString();
+
+    // Wait for transaction status
+    await waitForTransactionStatus(
+      txId,
+      'Stake',
+      async () => {
+        // Reset form on success
+        stakeForm.value = {
+          amount: '',
+          receiver: ''
+        };
 
-    // Reload user balance
-    await tokensStore.loadBalances(true);
-    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
+        // Reload user balance
+        await tokensStore.loadBalances(true);
+        userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
+      }
+    );
 
   } catch (error) {
     toastError('Staking failed', error);
@@ -527,21 +533,24 @@ const handleUnstake = async () => {
     // Broadcast the transaction
     await wax.broadcast(l1Transaction);
 
-    const metadata = token.value.metadata as { symbol?: string } | undefined;
-    const symbol = metadata?.symbol || token.value.nai || '';
-
-    toast.success(`Successfully unstaked ${stakeForm.value.amount} ${symbol} tokens`);
-
-    // Reset form
-    stakeForm.value = {
-      amount: '',
-      receiver: ''
-    };
-
-    // Reload user balance
-    await tokensStore.loadBalances(true);
-    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
+    const txId = l1Transaction.id.toString();
+
+    // Wait for transaction status
+    await waitForTransactionStatus(
+      txId,
+      'Unstake',
+      async () => {
+        // Reset form on success
+        stakeForm.value = {
+          amount: '',
+          receiver: ''
+        };
 
+        // Reload user balance
+        await tokensStore.loadBalances(true);
+        userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
+      }
+    );
   } catch (error) {
     toastError('Unstaking failed', error);
   } finally {
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 4c6b97f..18599d5 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -282,7 +282,7 @@ export const useTokensStore = defineStore('tokens', {
       nai: string,
       precision: number,
       metadata: Record<string, string>
-    ): Promise<void> {
+    ): Promise<string> {
       const operationalKey = await getUserOperationalKey();
       if (!operationalKey)
         throw new Error('No operational key available');
@@ -318,16 +318,15 @@ export const useTokensStore = defineStore('tokens', {
       if (!operationalAccount)
         throw new Error('No operational account configured');
 
-      // Broadcast the metadata update transaction
-      await updateHTMAssetMetadata(
+      // Broadcast the metadata update transaction and return transaction ID
+      const txId = await updateHTMAssetMetadata(
         metadataUpdateData,
         managementWallet,
         operationalAccount,
         0.001 // Fee amount in HIVE
       );
 
-      // Refresh token data after update
-      await this.loadRegisteredTokens(nai, precision, 1, true);
+      return txId;
     },
     async reset (cTokensWallet?: CTokensProvider | undefined) {
       // Cleanup only if we don't want to use any other L2 wallet
diff --git a/src/utils/transaction-status.ts b/src/utils/transaction-status.ts
new file mode 100644
index 0000000..ffc4d64
--- /dev/null
+++ b/src/utils/transaction-status.ts
@@ -0,0 +1,130 @@
+import { toast } from 'vue-sonner';
+
+import { getCTokensApi } from './ctokens-api';
+
+/**
+ * Poll transaction status until it's confirmed or failed
+ * @param refId - Transaction reference ID (transaction hash)
+ * @param maxAttempts - Maximum number of polling attempts (default: 30)
+ * @param intervalMs - Interval between polls in milliseconds (default: 2000)
+ * @returns Promise that resolves with transaction status
+ */
+export async function pollTransactionStatus (
+  refId: string,
+  maxAttempts: number = 30,
+  intervalMs: number = 2000
+): Promise<{ success: boolean; message: string; details?: string }> {
+  const cTokensApi = await getCTokensApi();
+
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    try {
+      // Call status endpoint
+      const status = await cTokensApi.getTransactionStatus(refId);
+
+      // Check if we got a successful response
+      if (status) {
+        // Transaction found in database - it's confirmed
+        return {
+          success: true,
+          message: status.message || 'Transaction confirmed successfully',
+          details: status.details
+        };
+      }
+    } catch (error: unknown) {
+      // Check HTTP status code from error
+      const errorObj = error as Record<string, unknown>;
+      const response = errorObj?.response as Record<string, unknown> | undefined;
+      const httpCode = errorObj?.httpCode || errorObj?.status || response?.status;
+
+      // 404 means transaction not yet processed - keep polling
+      if (httpCode === 404) {
+        // Wait before next attempt
+        if (attempt < maxAttempts - 1) {
+          await new Promise(resolve => setTimeout(resolve, intervalMs));
+          continue;
+        }
+
+        // Max attempts reached
+        return {
+          success: false,
+          message: 'Transaction status timeout',
+          details: 'Transaction was broadcast but status could not be confirmed. It may still be processing.'
+        };
+      }
+
+      // Any other error means transaction failed
+      return {
+        success: false,
+        message: (errorObj?.message as string) || 'Transaction failed',
+        details: (errorObj?.details as string) || (errorObj?.hint as string) || JSON.stringify(error)
+      };
+    }
+  }
+
+  // Timeout - transaction not confirmed within max attempts
+  return {
+    success: false,
+    message: 'Transaction status timeout',
+    details: 'Could not confirm transaction status within the expected time.'
+  };
+}
+
+/**
+ * Wait for transaction status and show appropriate toast
+ * @param refId - Transaction reference ID (transaction hash)
+ * @param operationName - Name of the operation for toast messages (e.g., "Transfer", "Stake")
+ * @param onSuccess - Optional callback to execute on success
+ * @param onFailure - Optional callback to execute on failure
+ */
+export async function waitForTransactionStatus (
+  refId: string,
+  operationName: string,
+  onSuccess?: () => void | Promise<void>,
+  onFailure?: (error: Error) => void | Promise<void>
+): Promise<void> {
+  // Show pending toast
+  const loadingToast = toast.loading(`${operationName} in progress...`, {
+    description: 'Waiting for transaction confirmation'
+  });
+
+  try {
+    const result = await pollTransactionStatus(refId);
+
+    // Dismiss loading toast
+    toast.dismiss(loadingToast);
+
+    if (result.success) {
+      // Show success toast
+      toast.success(`${operationName} successful`, {
+        description: result.message
+      });
+
+      // Execute success callback if provided
+      if (onSuccess)
+        await onSuccess();
+    } else {
+      // Show error toast
+      toast.error(`${operationName} failed`, {
+        description: result.details || result.message
+      });
+
+      // Execute failure callback if provided
+      if (onFailure)
+        await onFailure(new Error(result.message));
+    }
+  } catch (error: unknown) {
+    // Dismiss loading toast
+    toast.dismiss(loadingToast);
+
+    const err = error as Error;
+
+    // Show error toast
+    toast.error(`${operationName} failed`, {
+      description: err?.message || 'Unknown error occurred'
+    });
+
+    // Execute failure callback if provided
+    if (onFailure)
+      await onFailure(err);
+  }
+}
-- 
GitLab


From cef1fb3fb3c7fa72bd64b49f3c8e60163d76923d Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 22 Oct 2025 09:12:04 +0200
Subject: [PATCH 042/102] Do not take fee in update token metadata operation

---
 src/stores/tokens.store.ts |  3 +--
 src/utils/htm-utils.ts     | 20 +++-----------------
 src/utils/htm.ts           | 20 +++-----------------
 3 files changed, 7 insertions(+), 36 deletions(-)

diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 18599d5..eac325a 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -322,8 +322,7 @@ export const useTokensStore = defineStore('tokens', {
       const txId = await updateHTMAssetMetadata(
         metadataUpdateData,
         managementWallet,
-        operationalAccount,
-        0.001 // Fee amount in HIVE
+        operationalAccount
       );
 
       return txId;
diff --git a/src/utils/htm-utils.ts b/src/utils/htm-utils.ts
index 9d0e0b2..82aad75 100644
--- a/src/utils/htm-utils.ts
+++ b/src/utils/htm-utils.ts
@@ -155,12 +155,12 @@ export async function updateHTMUserMetadata (
 /**
  * Update HTM asset metadata
  * This is the full implementation using HTM library and beekeeper wallets.
+ * This operation is free (no fee required)
  */
 export async function updateHTMAssetMetadata (
   metadataData: HTMAssetMetadataUpdateData,
   wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string,
-  feeAmount = 0.001
+  operationalAccount: string
 ): Promise<string> {
   const wax = await getWax();
 
@@ -172,22 +172,8 @@ export async function updateHTMAssetMetadata (
   htmBuilder.addAssetMetadataUpdate(metadataData);
   await htmBuilder.sign(wallet);
 
-  // Create L1 transaction with optional fee transfer and HTM operation
+  // Create L1 transaction to broadcast the HTM transaction
   const l1Tx = await wax.createTransaction();
-
-  // Add fee transfer operation if fee > 0
-  if (feeAmount > 0) {
-    l1Tx.pushOperation({
-      transfer_operation: {
-        from: operationalAccount,
-        to: 'fee.htm',
-        amount: wax.hiveCoins(feeAmount),
-        memo: 'L2 asset metadata update fee'
-      }
-    });
-  }
-
-  // Add HTM asset metadata update operation
   l1Tx.pushOperation(htmBuilder.getTransaction());
 
   // Sign with owner key (management key)
diff --git a/src/utils/htm.ts b/src/utils/htm.ts
index 65459f4..cc318db 100644
--- a/src/utils/htm.ts
+++ b/src/utils/htm.ts
@@ -334,12 +334,12 @@ export async function updateHTMUserMetadata (
 
 /**
  * Update HTM asset metadata
+ * This operation is free (no fee required)
  */
 export async function updateHTMAssetMetadata (
   metadataData: HTMAssetMetadataUpdateData,
   wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string,
-  feeAmount = 0.001
+  operationalAccount: string
 ): Promise<string> {
   const wax = await getWax();
 
@@ -351,22 +351,8 @@ export async function updateHTMAssetMetadata (
   htmBuilder.addAssetMetadataUpdate(metadataData);
   await htmBuilder.sign(wallet);
 
-  // Create L1 transaction with optional fee transfer and HTM operation
+  // Create L1 transaction to broadcast the HTM transaction
   const l1Tx = await wax.createTransaction();
-
-  // Add fee transfer operation if fee > 0
-  if (feeAmount > 0) {
-    l1Tx.pushOperation({
-      transfer_operation: {
-        from: operationalAccount,
-        to: 'fee.htm',
-        amount: wax.hiveCoins(feeAmount),
-        memo: 'L2 asset metadata update fee'
-      }
-    });
-  }
-
-  // Add HTM asset metadata update operation
   l1Tx.pushOperation(htmBuilder.getTransaction());
 
   // Sign with owner key (management key)
-- 
GitLab


From fddaf76e2e6af1bb77c417bf07559371ef29d047 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 22 Oct 2025 10:21:52 +0200
Subject: [PATCH 043/102] Use correct key when creating token

---
 src/pages/tokens/create.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index f24ff66..353c8e9 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -201,7 +201,7 @@ const createToken = async () => {
       nai: generatedNAI.value,
       precision: parseInt(precision.value)
     };
-    const owner = tokensStore.wallet.publicKey!;
+    const owner = CTokensProvider.getOperationalPublicKey()!;
     const assetTokenName = tokenName.value.trim();
 
     // Prepare HTM asset definition data
@@ -304,7 +304,7 @@ const previewToken = computed(() => ({
   capped: capped.value,
   othersCanStake: othersCanStake.value,
   othersCanUnstake: othersCanUnstake.value,
-  ownerPublicKey: tokensStore.wallet?.publicKey
+  ownerPublicKey: CTokensProvider.getOperationalPublicKey()
 }));
 </script>
 
-- 
GitLab


From f68eb14a2cc3d1dfd1322d87039205a20a1a5e77 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 22 Oct 2025 11:27:58 +0200
Subject: [PATCH 044/102] Fix token edit

---
 src/pages/tokens/edit.vue          |  5 +-
 src/pages/tokens/token.vue         |  5 +-
 src/stores/tokens.store.ts         | 82 +++++++++++++++++++-----------
 src/utils/wallet/ctokens/signer.ts |  2 +-
 4 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index e71c0be..e2bea00 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -20,6 +20,7 @@ import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 // Router
 const route = useRoute();
@@ -52,8 +53,8 @@ const isLoggedIn = computed(() => !!settingsStore.settings.account);
 
 // Check if current user is the token owner
 const isTokenOwner = computed(() => {
-  if (!token.value?.owner || !tokensStore.wallet?.publicKey) return false;
-  return token.value.owner === tokensStore.wallet.publicKey;
+  if (!token.value?.owner || !CTokensProvider.getOperationalPublicKey()) return false;
+  return token.value.owner === CTokensProvider.getOperationalPublicKey();
 });
 
 // Computed properties for display
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index cd3f3f5..ba5b5b2 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -22,6 +22,7 @@ import { transferNAIToken } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppToken, CtokensAppBalance, CtokensAppTopHolder } from '@/utils/wallet/ctokens/api';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 // Router
 const route = useRoute();
@@ -65,8 +66,8 @@ const isLoggedIn = computed(() => !!settingsStore.settings.account);
 
 // Check if current user is the token owner
 const isTokenOwner = computed(() => {
-  if (!token.value?.owner || !tokensStore.wallet?.publicKey) return false;
-  return token.value.owner === tokensStore.wallet.publicKey;
+  if (!token.value?.owner || !CTokensProvider.getOperationalPublicKey()) return false;
+  return token.value.owner === CTokensProvider.getOperationalPublicKey();
 });
 
 // Validate recipient address (must be a public key)
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index eac325a..82526b6 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -287,30 +287,6 @@ export const useTokensStore = defineStore('tokens', {
       if (!operationalKey)
         throw new Error('No operational key available');
 
-      // Get management wallet from CTokensProvider
-      const managementWallet = CTokensProvider.getManagementWallet();
-      if (!managementWallet)
-        throw new Error('No management wallet available');
-
-      const { updateHTMAssetMetadata } = await import('@/utils/htm-utils');
-
-      // Convert metadata object to array of key-value pairs
-      const metadataItems = Object.entries(metadata).map(([key, value]) => ({
-        key,
-        value
-      }));
-
-      // Prepare metadata update data
-      const metadataUpdateData = {
-        owner: operationalKey,
-        identifier: {
-          amount: '0',
-          nai,
-          precision
-        },
-        metadata: metadataItems
-      };
-
       // Get operational account from settings
       const settingsStore = await import('@/stores/settings.store').then(m => m.useSettingsStore());
       const operationalAccount = settingsStore.settings.account;
@@ -318,14 +294,58 @@ export const useTokensStore = defineStore('tokens', {
       if (!operationalAccount)
         throw new Error('No operational account configured');
 
-      // Broadcast the metadata update transaction and return transaction ID
-      const txId = await updateHTMAssetMetadata(
-        metadataUpdateData,
-        managementWallet,
-        operationalAccount
-      );
+      // Get L1 wallet for signing the transaction
+      const walletStore = await import('@/stores/wallet.store').then(m => m.useWalletStore());
+      await walletStore.createWalletFor(settingsStore.settings, 'active');
+
+      if (!walletStore.wallet)
+        throw new Error('No L1 wallet available');
+
+      const wax = await getWax();
+      const { HtmTransaction } = await import('@mtyszczak-cargo/htm');
+
+      // Create CTokensProvider instance for L2 signing (owner role for metadata updates)
+      const l2Wallet = await CTokensProvider.for(wax, 'owner');
+
+      // Convert metadata object to array of key-value pairs
+      const metadataItems = Object.entries(metadata).map(([key, value]) => ({
+        key,
+        value
+      }));
 
-      return txId;
+      // Set proxy account for HTM transactions
+      HtmTransaction.HiveProxyAccount = operationalAccount;
+
+      // Create L2 HTM transaction for asset metadata update
+      const l2Transaction = new HtmTransaction(wax);
+      l2Transaction.pushOperation({
+        asset_metadata_update_operation: {
+          owner: operationalKey,
+          identifier: {
+            amount: '0',
+            nai,
+            precision
+          },
+          metadata: {
+            items: metadataItems
+          }
+        }
+      });
+
+      // Sign L2 transaction with management wallet (owner role)
+      await l2Wallet.signTransaction(l2Transaction);
+
+      // Create L1 transaction to broadcast the HTM transaction
+      const l1Transaction = await wax.createTransaction();
+      l1Transaction.pushOperation(l2Transaction);
+
+      // Sign L1 transaction with active wallet
+      await walletStore.wallet.signTransaction(l1Transaction);
+
+      // Broadcast the transaction
+      await wax.broadcast(l1Transaction);
+
+      return l1Transaction.id.toString();
     },
     async reset (cTokensWallet?: CTokensProvider | undefined) {
       // Cleanup only if we don't want to use any other L2 wallet
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index 0e87a86..ad450fd 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -34,7 +34,7 @@ export class CTokensProvider extends AEncryptionProvider {
   }
 
   public static getOperationalPublicKey (): string | undefined {
-    return CTokensProvider.#operationalWallet?.getPublicKeys()[0];
+    return CTokensProvider.#operationalWallet?.getPublicKeys()[1] ?? CTokensProvider.#operationalWallet?.getPublicKeys()[0];
   }
 
   public static getOperationalWallet (): IBeekeeperUnlockedWallet | undefined {
-- 
GitLab


From 1b51ba27a846dd6b293aefdde518d748cdde33c1 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 23 Oct 2025 11:31:00 +0200
Subject: [PATCH 045/102] Fix creating token

---
 src/components/navigation/AccountSwitcher.vue |  4 +-
 src/components/wallet/HTMProvidePassword.vue  | 14 +++--
 src/pages/tokens/create.vue                   | 32 +++++++---
 src/pages/tokens/edit.vue                     |  1 +
 src/pages/tokens/my-balance.vue               |  2 +
 src/pages/tokens/register-account.vue         |  5 +-
 src/pages/tokens/token.vue                    | 11 ++--
 src/stores/tokens.store.ts                    |  6 +-
 src/utils/nai-tokens.ts                       | 62 +++++++++++--------
 src/utils/transaction-status.ts               |  8 ++-
 src/utils/wallet/ctokens/signer.ts            |  8 ++-
 11 files changed, 94 insertions(+), 59 deletions(-)

diff --git a/src/components/navigation/AccountSwitcher.vue b/src/components/navigation/AccountSwitcher.vue
index 31977c0..1a3aaea 100644
--- a/src/components/navigation/AccountSwitcher.vue
+++ b/src/components/navigation/AccountSwitcher.vue
@@ -56,8 +56,8 @@ const fetchHTMUserData = async () => {
   try {
     if (hasHTMAccount.value)
       htmUserMetadata.value = await tokensStore.getCurrentUserMetadata();
-  } catch (error) {
-    toastError('Error fetching HTM user data', error);
+  } catch (_error) {
+    // toastError('Error fetching HTM user data', error); // TODO: Reformat this code to better handle edge cases...
   }
 };
 
diff --git a/src/components/wallet/HTMProvidePassword.vue b/src/components/wallet/HTMProvidePassword.vue
index ae7cd76..caf1c04 100644
--- a/src/components/wallet/HTMProvidePassword.vue
+++ b/src/components/wallet/HTMProvidePassword.vue
@@ -40,12 +40,14 @@ const connect = async () => {
     await CTokensProvider.login(password.value);
 
     try {
-      await walletStore.createWalletFor(settingsStore.settings, 'posting');
-
-      if (!walletStore.isL2Wallet)
-        await tokensStore.reset(await CTokensProvider.for(wax, 'posting'));
-
-      await userStore.parseUserData(settingsStore.settings!.account!);
+      if (walletStore.hasWallet) {
+        const ctokensWallet = await CTokensProvider.for(wax, 'posting');
+
+        await tokensStore.reset(ctokensWallet);
+      } else {
+        await walletStore.createWalletFor(settingsStore.settings, 'posting');
+        await userStore.parseUserData(settingsStore.settings!.account!);
+      }
     } catch (error) {
       toastError('Failed to create wallet', error);
     }
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index 353c8e9..46b5af2 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -26,7 +26,7 @@ import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
 import { parseAssetAmount } from '@/utils/htm-utils';
-import { generateNAI as generateHTMNAI } from '@/utils/nai-tokens';
+import { generateNAI as generateHTMNAI, toVesting } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
@@ -133,7 +133,6 @@ const generateNAI = (): string | undefined => {
 
   try {
     generatedNAI.value = generateHTMNAI(tokenSymbol.value, Number(precision.value));
-    console.log('Regenerating NAI', generatedNAI.value);
     naiGenerated.value = true;
 
     return generatedNAI.value;
@@ -195,11 +194,17 @@ const createToken = async () => {
     const wax = await getWax();
 
     await tokensStore.reset(await CTokensProvider.for(wax, 'active'));
+    const identifierPrecision = parseInt(precision.value);
 
     const identifier: asset = {
-      amount: parseAssetAmount(initialSupply.value, parseInt(precision.value)),
+      amount: parseAssetAmount(initialSupply.value, identifierPrecision),
       nai: generatedNAI.value,
-      precision: parseInt(precision.value)
+      precision: identifierPrecision
+    };
+    const identifierVesting: asset = {
+      amount: '0',
+      nai: toVesting(generatedNAI.value, identifierPrecision),
+      precision: identifierPrecision
     };
     const owner = CTokensProvider.getOperationalPublicKey()!;
     const assetTokenName = tokenName.value.trim();
@@ -232,6 +237,20 @@ const createToken = async () => {
       asset_definition_operation: assetDefinition
     });
 
+    l2Transaction.pushOperation({
+      asset_metadata_update_operation: {
+        identifier: identifierVesting,
+        owner,
+        metadata: {
+          items: [
+            { key: 'name', value: assetTokenName },
+            { key: 'symbol', value: tokenSymbol.value.trim() },
+            { key: 'description', value: tokenDescription.value.trim() }
+          ]
+        }
+      }
+    });
+
     await tokensStore.wallet!.signTransaction(l2Transaction);
 
     // Create Layer 1 transaction and broadcast
@@ -253,11 +272,10 @@ const createToken = async () => {
     // Broadcast the transaction
     await wax.broadcast(l1Transaction);
 
-    const txId = l1Transaction.id.toString();
-
     // Wait for transaction status
     await waitForTransactionStatus(
-      txId,
+      l1Transaction.legacy_id,
+      1, // First we have transfer, than HTM operation
       'Token creation',
       async () => {
         // Success, reset form
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index e2bea00..1a6b1cd 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -160,6 +160,7 @@ const handleUpdateToken = async () => {
     // Wait for transaction status
     await waitForTransactionStatus(
       txId,
+      0,
       'Token metadata update',
       async () => {
         // Refresh token data after update
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 7013edb..1731cc3 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -231,6 +231,7 @@ const transferTokens = async () => {
     // Wait for transaction status
     await waitForTransactionStatus(
       txId,
+      0,
       'Transfer',
       async () => {
         // Refresh balances on success
@@ -274,6 +275,7 @@ const transformTokens = async () => {
     // Wait for transaction status
     await waitForTransactionStatus(
       txId,
+      0,
       action,
       async () => {
         // Refresh balances on success
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index a628f96..55c0e06 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -313,11 +313,10 @@ const registerHTMAccount = async () => {
     // Broadcast the transaction
     await wax.broadcast(l1Transaction);
 
-    const txId = l1Transaction.id.toString();
-
     // Wait for transaction status
     await waitForTransactionStatus(
-      txId,
+      l1Transaction.legacy_id,
+      0,
       'HTM account registration',
       async () => {
         // After successful registration, redirect to login
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index ba5b5b2..d6da5a5 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -349,6 +349,7 @@ const handleTransfer = async () => {
     // Wait for transaction status
     await waitForTransactionStatus(
       txId,
+      0,
       'Transfer',
       async () => {
         // Reset form on success
@@ -439,11 +440,10 @@ const handleStake = async () => {
     // Broadcast the transaction
     await wax.broadcast(l1Transaction);
 
-    const txId = l1Transaction.id.toString();
-
     // Wait for transaction status
     await waitForTransactionStatus(
-      txId,
+      l1Transaction.legacy_id,
+      0,
       'Stake',
       async () => {
         // Reset form on success
@@ -534,11 +534,10 @@ const handleUnstake = async () => {
     // Broadcast the transaction
     await wax.broadcast(l1Transaction);
 
-    const txId = l1Transaction.id.toString();
-
     // Wait for transaction status
     await waitForTransactionStatus(
-      txId,
+      l1Transaction.legacy_id,
+      0,
       'Unstake',
       async () => {
         // Reset form on success
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 82526b6..1e2870e 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -175,8 +175,6 @@ export const useTokensStore = defineStore('tokens', {
     async getCurrentUserMetadata () {
       const wax = await getWax();
 
-      console.log(this.wallet);
-
       if (this.wallet?.publicKey === undefined)
         throw new Error('Could not load CTokens wallet');
 
@@ -211,8 +209,6 @@ export const useTokensStore = defineStore('tokens', {
         // Get raw tokens from API
         const tokens = await cTokensApi.getRegisteredTokens(nai, precision) as Required<CtokensAppToken>[];
 
-        console.log(tokens);
-
         // Transform tokens to display format
         const transformedTokens = await Promise.all(
           tokens.map(token => transformTokenToDisplayFormat(token))
@@ -345,7 +341,7 @@ export const useTokensStore = defineStore('tokens', {
       // Broadcast the transaction
       await wax.broadcast(l1Transaction);
 
-      return l1Transaction.id.toString();
+      return l1Transaction.legacy_id;
     },
     async reset (cTokensWallet?: CTokensProvider | undefined) {
       // Cleanup only if we don't want to use any other L2 wallet
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index 634d9b0..3eb0588 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -38,6 +38,34 @@ export interface TokenStakeParams {
   receiver?: string;
 }
 
+const table = [
+  [0, 3, 1, 7, 5, 9, 8, 6, 4, 2],
+  [7, 0, 9, 2, 1, 5, 4, 8, 6, 3],
+  [4, 2, 0, 6, 8, 7, 1, 3, 5, 9],
+  [1, 7, 5, 0, 9, 8, 3, 4, 2, 6],
+  [6, 1, 2, 3, 0, 4, 5, 9, 7, 8],
+  [3, 6, 7, 4, 2, 0, 9, 5, 8, 1],
+  [5, 8, 6, 9, 7, 2, 0, 1, 3, 4],
+  [8, 9, 4, 5, 3, 6, 2, 0, 1, 7],
+  [9, 4, 3, 8, 6, 1, 7, 2, 0, 5],
+  [2, 5, 8, 1, 4, 3, 6, 7, 9, 0]
+];
+
+const dammDigit = (str: string) => {
+  let row = 0;
+
+  for(let i = 0; i < str.length; i++) {
+    const col = str.charAt(i) as unknown as number;
+    row = table[row][col];
+  }
+
+  return row.toString();
+};
+
+const assetNumFromNAI = (nai: string, precision: number): number => {
+  return (Number.parseInt(nai.slice(2, -1)) << 5) | 0x10 | precision;
+};
+
 const generateRandomNAI = (symbol: string): string => {
   const timestamp = Date.now();
   const symbolUpper = symbol.trim().toUpperCase();
@@ -56,31 +84,15 @@ const generateRandomNAI = (symbol: string): string => {
   // Ensure we have a positive number and convert to 8-digit string
   const naiNumber = Math.abs(hash % 100000000).toString().padStart(8, '0');
 
-  const table = [
-    [0, 3, 1, 7, 5, 9, 8, 6, 4, 2],
-    [7, 0, 9, 2, 1, 5, 4, 8, 6, 3],
-    [4, 2, 0, 6, 8, 7, 1, 3, 5, 9],
-    [1, 7, 5, 0, 9, 8, 3, 4, 2, 6],
-    [6, 1, 2, 3, 0, 4, 5, 9, 7, 8],
-    [3, 6, 7, 4, 2, 0, 9, 5, 8, 1],
-    [5, 8, 6, 9, 7, 2, 0, 1, 3, 4],
-    [8, 9, 4, 5, 3, 6, 2, 0, 1, 7],
-    [9, 4, 3, 8, 6, 1, 7, 2, 0, 5],
-    [2, 5, 8, 1, 4, 3, 6, 7, 9, 0]
-  ];
-
-  const dammDigit = (str: string) => {
-    let row = 0;
-
-    for(let i = 0; i < str.length; i++) {
-      const col = str.charAt(i) as unknown as number;
-      row = table[row][col];
-    }
+  return `@@${naiNumber}${dammDigit(naiNumber)}`;
+};
 
-    return row.toString();
-  };
+export const toVesting = (nai: string, precision: number): string => {
+  const vestingNum = assetNumFromNAI(nai, precision) ^ 0x20;
 
-  return `@@${naiNumber}${dammDigit(naiNumber)}`;
+  const naiVesting = (vestingNum >> 5).toString().padStart(8, '0');
+
+  return `@@${naiVesting}${dammDigit(naiVesting)}`;
 };
 
 /**
@@ -194,7 +206,7 @@ export const transferNAIToken = async (params: TokenTransferParams) => {
   // Broadcast the transaction
   await wax.broadcast(l1Transaction);
 
-  return l1Transaction.id.toString();
+  return l1Transaction.legacy_id;
 };
 
 /**
@@ -255,7 +267,7 @@ export const stakeNAIToken = async (params: TokenStakeParams) => {
   // Broadcast the transaction
   await wax.broadcast(l1Transaction);
 
-  return l1Transaction.id.toString();
+  return l1Transaction.legacy_id;
 };
 
 /**
diff --git a/src/utils/transaction-status.ts b/src/utils/transaction-status.ts
index ffc4d64..ae1c690 100644
--- a/src/utils/transaction-status.ts
+++ b/src/utils/transaction-status.ts
@@ -71,13 +71,15 @@ export async function pollTransactionStatus (
 
 /**
  * Wait for transaction status and show appropriate toast
- * @param refId - Transaction reference ID (transaction hash)
+ * @param txId - Transaction reference ID (transaction hash)
+ * @param opSeq - Operation sequence number (e.g., for tracking specific operations)
  * @param operationName - Name of the operation for toast messages (e.g., "Transfer", "Stake")
  * @param onSuccess - Optional callback to execute on success
  * @param onFailure - Optional callback to execute on failure
  */
 export async function waitForTransactionStatus (
-  refId: string,
+  txId: string,
+  opSeq: number,
   operationName: string,
   onSuccess?: () => void | Promise<void>,
   onFailure?: (error: Error) => void | Promise<void>
@@ -88,7 +90,7 @@ export async function waitForTransactionStatus (
   });
 
   try {
-    const result = await pollTransactionStatus(refId);
+    const result = await pollTransactionStatus(`${txId}_${opSeq}`);
 
     // Dismiss loading toast
     toast.dismiss(loadingToast);
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index ad450fd..3da237d 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -33,8 +33,11 @@ export class CTokensProvider extends AEncryptionProvider {
     return !!CTokensProvider.#operationalWallet;
   }
 
+  // TODO: Remove this code after @hiveio/beekeeper bugfix - bump deps
+  private static lastOperationalPk: string | undefined = undefined;
+  // TODO: Remove this method !!!
   public static getOperationalPublicKey (): string | undefined {
-    return CTokensProvider.#operationalWallet?.getPublicKeys()[1] ?? CTokensProvider.#operationalWallet?.getPublicKeys()[0];
+    return CTokensProvider.lastOperationalPk;
   }
 
   public static getOperationalWallet (): IBeekeeperUnlockedWallet | undefined {
@@ -60,8 +63,9 @@ export class CTokensProvider extends AEncryptionProvider {
     if (!publicKey)
       throw new WaxCTokensEncryptionProviderError('The requested wallet does not have a public key.');
 
-
     this.publicKey = publicKey;
+    if (role !== 'owner')
+      CTokensProvider.lastOperationalPk = this.publicKey;
   }
 
   private async publicKeyHasAccount (): Promise<boolean> {
-- 
GitLab


From de80172092385c1688794a1cc4af15f1a5c0102e Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 23 Oct 2025 13:59:46 +0200
Subject: [PATCH 046/102] Fix basic operations on HTM

---
 package.json                    |  2 +-
 pnpm-lock.yaml                  | 10 +++++-----
 src/pages/tokens/create.vue     |  9 ++++-----
 src/pages/tokens/my-balance.vue | 22 ----------------------
 src/pages/tokens/token.vue      | 28 ++++++++++++++++++++++++----
 src/stores/tokens.store.ts      |  2 +-
 src/utils/htm.ts                |  2 +-
 src/utils/nai-tokens.ts         |  5 ++---
 8 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index 1f8aed3..db87293 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@hiveio/wax-signers-peakvault": "1.27.12-rc1-251007115925",
     "@mdi/js": "^7.4.47",
     "@metamask/providers": "^16.0.0",
-    "@mtyszczak-cargo/htm": "^1.0.0",
+    "@mtyszczak-cargo/htm": "^1.0.1",
     "@nabla/vite-plugin-eslint": "^2.0.6",
     "@stylistic/eslint-plugin": "^5.2.2",
     "@tanstack/vue-table": "^8.21.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b32868..0131481 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,8 +39,8 @@ importers:
         specifier: ^16.0.0
         version: 16.1.0
       '@mtyszczak-cargo/htm':
-        specifier: ^1.0.0
-        version: 1.0.0(@hiveio/wax@1.27.12-rc1-251007115925)
+        specifier: ^1.0.1
+        version: 1.0.1(@hiveio/wax@1.27.12-rc1-251007115925)
       '@nabla/vite-plugin-eslint':
         specifier: ^2.0.6
         version: 2.0.6(eslint@9.32.0(jiti@1.21.7))(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0))
@@ -516,8 +516,8 @@ packages:
     resolution: {integrity: sha512-w8CVbdkDrVXFJbfBSlDfafDR6BAkpDmv1bC1UJVCoVny5tW2RKAdn9i68Xf7asYT4TnUhl/hN4zfUiKQq9II4g==}
     engines: {node: '>=16.0.0'}
 
-  '@mtyszczak-cargo/htm@1.0.0':
-    resolution: {integrity: sha1-uE1bZ+x6nb7j8hpb/AvpQUZUbFA=, tarball: https://gitlab.syncad.com/api/v4/projects/541/packages/npm/@mtyszczak-cargo/htm/-/@mtyszczak-cargo/htm-1.0.0.tgz}
+  '@mtyszczak-cargo/htm@1.0.1':
+    resolution: {integrity: sha1-GGCQ3iWyOR6r5/2sr3jY44fwQTY=, tarball: https://gitlab.syncad.com/api/v4/projects/541/packages/npm/@mtyszczak-cargo/htm/-/@mtyszczak-cargo/htm-1.0.1.tgz}
     engines: {node: ^20.11 || >= 21.2}
     peerDependencies:
       '@hiveio/wax': '>=1.27.12-rc1-251007115925'
@@ -2887,7 +2887,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mtyszczak-cargo/htm@1.0.0(@hiveio/wax@1.27.12-rc1-251007115925)':
+  '@mtyszczak-cargo/htm@1.0.1(@hiveio/wax@1.27.12-rc1-251007115925)':
     dependencies:
       '@hiveio/wax': 1.27.12-rc1-251007115925
       protobufjs: 7.2.5
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index 46b5af2..154b5ee 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -213,7 +213,7 @@ const createToken = async () => {
     const assetDefinition: asset_definition = {
       identifier,
       capped: capped.value,
-      maxSupply: capped.value ? parseAssetAmount(initialSupply.value, parseInt(precision.value)) : '0',
+      max_supply: capped.value ? parseAssetAmount(initialSupply.value, parseInt(precision.value)) : '0',
       owner,
       metadata: {
         items: [
@@ -222,9 +222,9 @@ const createToken = async () => {
           { key: 'description', value: tokenDescription.value.trim() }
         ]
       },
-      isNft: false,
-      othersCanStake: othersCanStake.value,
-      othersCanUnstake: othersCanUnstake.value
+      is_nft: false,
+      others_can_stake: othersCanStake.value,
+      others_can_unstake: othersCanUnstake.value
     };
 
     // Set proxy account for HTM transactions
@@ -266,7 +266,6 @@ const createToken = async () => {
     l1Transaction.pushOperation(l2Transaction);
 
     // Sign Layer 1 transaction with the Hive active key
-    await walletStore.createWalletFor(settingsStore.settings, 'active');
     await walletStore.wallet!.signTransaction(l1Transaction);
 
     // Broadcast the transaction
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 1731cc3..c582a9b 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -573,9 +573,6 @@ onMounted(() => {
                     <th class="text-left p-4 font-medium text-muted-foreground">
                       Asset
                     </th>
-                    <th class="text-right p-4 font-medium text-muted-foreground">
-                      Price
-                    </th>
                     <th class="text-right p-4 font-medium text-muted-foreground">
                       Liquid
                     </th>
@@ -648,24 +645,11 @@ onMounted(() => {
                       </div>
                     </td>
 
-                    <!-- Price -->
-                    <td class="p-4 text-right">
-                      <div class="font-medium">
-                        $0.01
-                      </div>
-                      <div class="text-sm text-green-600">
-                        +0.00%
-                      </div>
-                    </td>
-
                     <!-- Liquid Balance -->
                     <td class="p-4 text-right">
                       <div class="font-medium">
                         {{ getLiquidBalance(balance) }}
                       </div>
-                      <div class="text-sm text-muted-foreground">
-                        ${{ (parseFloat(getLiquidBalance(balance)) * 0.01).toFixed(2) }}
-                      </div>
                     </td>
 
                     <!-- Staked Balance -->
@@ -673,9 +657,6 @@ onMounted(() => {
                       <div class="font-medium">
                         {{ getStakedBalance(balance) }}
                       </div>
-                      <div class="text-sm text-muted-foreground">
-                        ${{ (parseFloat(getStakedBalance(balance)) * 0.01).toFixed(2) }}
-                      </div>
                     </td>
 
                     <!-- Total Balance -->
@@ -683,9 +664,6 @@ onMounted(() => {
                       <div class="font-medium">
                         {{ getTotalBalance(balance) }}
                       </div>
-                      <div class="text-sm text-muted-foreground">
-                        ${{ (parseFloat(getTotalBalance(balance)) * 0.01).toFixed(2) }}
-                      </div>
                     </td>
 
                     <!-- Actions -->
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index d6da5a5..1d26a84 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { mdiPencilOutline, mdiContentCopy, mdiCheck } from '@mdi/js';
 import { HtmTransaction } from '@mtyszczak-cargo/htm';
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
@@ -15,6 +15,7 @@ import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
+import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
 import { isValidPublicKey } from '@/utils/htm';
@@ -31,6 +32,7 @@ const router = useRouter();
 // Stores
 const tokensStore = useTokensStore();
 const settingsStore = useSettingsStore();
+const walletStore = useWalletStore();
 
 // State
 const token = ref<CtokensAppToken | null>(null);
@@ -62,7 +64,7 @@ const nai = computed(() => route.query.nai as string);
 const precision = computed(() => route.query.precision);
 
 // Check if user is logged in
-const isLoggedIn = computed(() => !!settingsStore.settings.account);
+const isLoggedIn = computed(() => !!tokensStore.wallet);
 
 // Check if current user is the token owner
 const isTokenOwner = computed(() => {
@@ -334,6 +336,9 @@ const handleTransfer = async () => {
     return;
   }
 
+  if (typeof settingsStore.settings.account === 'undefined' || walletStore.isL2Wallet)
+    throw new Error('Transferring via proxy is not supported yet. Please log in using your L1 wallet first.');
+
   try {
     isTransferring.value = true;
 
@@ -420,7 +425,7 @@ const handleStake = async () => {
     const l2Transaction = new HtmTransaction(wax);
 
     l2Transaction.pushOperation({
-      token_transform: {
+      token_transform_operation: {
         holder: tokensStore.wallet.publicKey,
         receiver: stakeForm.value.receiver || undefined,
         amount: {
@@ -431,12 +436,17 @@ const handleStake = async () => {
       }
     });
 
+    if (typeof settingsStore.settings.account === 'undefined' || walletStore.isL2Wallet)
+      throw new Error('Staking via proxy is not supported yet. Please log in using your L1 wallet first.');
+
     await tokensStore.wallet.signTransaction(l2Transaction);
 
     // Create Layer 1 transaction and broadcast
     const l1Transaction = await wax.createTransaction();
     l1Transaction.pushOperation(l2Transaction);
 
+    await walletStore.wallet!.signTransaction(l1Transaction);
+
     // Broadcast the transaction
     await wax.broadcast(l1Transaction);
 
@@ -509,11 +519,13 @@ const handleUnstake = async () => {
     // Set proxy account for HTM transactions
     HtmTransaction.HiveProxyAccount = settingsStore.settings.account!;
 
+    if (typeof settingsStore.settings.account === 'undefined' || walletStore.isL2Wallet)
+      throw new Error('Unstaking via proxy is not supported yet. Please log in using your L1 wallet first.');
+
     // Create Layer 2 HTM transaction for token transform (unstake)
     const l2Transaction = new HtmTransaction(wax);
 
     l2Transaction.pushOperation({
-      // @ts-expect-error TODO: Interface issue to resolve
       token_transform_operation: {
         holder: tokensStore.wallet.publicKey,
         receiver: stakeForm.value.receiver || undefined,
@@ -531,6 +543,8 @@ const handleUnstake = async () => {
     const l1Transaction = await wax.createTransaction();
     l1Transaction.pushOperation(l2Transaction);
 
+    await walletStore.wallet!.signTransaction(l1Transaction);
+
     // Broadcast the transaction
     await wax.broadcast(l1Transaction);
 
@@ -603,6 +617,12 @@ const copyNAI = () => {
   }
 };
 
+watch(isLoggedIn, (newValue) => {
+  if (newValue)
+    void loadTokenDetails();
+
+});
+
 // Initialize
 onMounted(async () => {
   isLoading.value = true;
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 1e2870e..ae622c8 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -292,7 +292,7 @@ export const useTokensStore = defineStore('tokens', {
 
       // Get L1 wallet for signing the transaction
       const walletStore = await import('@/stores/wallet.store').then(m => m.useWalletStore());
-      await walletStore.createWalletFor(settingsStore.settings, 'active');
+      await walletStore.createWalletFor(settingsStore.settings, 'posting');
 
       if (!walletStore.wallet)
         throw new Error('No L1 wallet available');
diff --git a/src/utils/htm.ts b/src/utils/htm.ts
index cc318db..3341c10 100644
--- a/src/utils/htm.ts
+++ b/src/utils/htm.ts
@@ -158,7 +158,7 @@ export class HTMTransactionBuilder {
    */
   addTokenTransform (data: HTMTokenTransformData): this {
     this.transaction.pushOperation({
-      token_transform: {
+      token_transform_operation: {
         holder: data.holder,
         receiver: data.receiver,
         amount: data.amount
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index 3eb0588..105f49c 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -168,7 +168,7 @@ export const transferNAIToken = async (params: TokenTransferParams) => {
     throw new Error('Please connect your HTM wallet first');
 
   // For fee payment
-  await walletStore.createWalletFor(settingsStore.settings, 'active');
+  await walletStore.createWalletFor(settingsStore.settings, 'posting');
 
   // Reset tokens store with CTokens provider
   await tokensStore.reset(await CTokensProvider.for(wax, 'active'));
@@ -229,7 +229,7 @@ export const stakeNAIToken = async (params: TokenStakeParams) => {
     throw new Error('Please connect your HTM wallet first');
 
   // For fee payment
-  await walletStore.createWalletFor(settingsStore.settings, 'active');
+  await walletStore.createWalletFor(settingsStore.settings, 'posting');
 
   // Reset tokens store with CTokens provider
   await tokensStore.reset(await CTokensProvider.for(wax, 'active'));
@@ -241,7 +241,6 @@ export const stakeNAIToken = async (params: TokenStakeParams) => {
   const l2Transaction = new HtmTransaction(wax);
 
   l2Transaction.pushOperation({
-    // @ts-expect-error TODO: Interface issue to resolve
     token_transform_operation: {
       holder: tokensStore.wallet.publicKey,
       receiver: params.receiver || undefined,
-- 
GitLab


From df6f32d6c81b4764b3ac2374c71dcc880324e86d Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Fri, 24 Oct 2025 12:17:18 +0200
Subject: [PATCH 047/102] Improve application UX

---
 src/components/HTMHeader.vue                  |  13 +-
 src/components/HTMLoginForm.vue               |  70 ++++-
 src/components/navigation/AccountSwitcher.vue |  12 +-
 src/components/wallet/HTMProvidePassword.vue  |  14 +
 src/pages/tokens/create.vue                   |   4 +
 src/pages/tokens/edit.vue                     |  17 +-
 src/pages/tokens/my-balance.vue               | 249 +++++++++++++-----
 src/pages/tokens/register-account.vue         |   4 +
 src/utils/ctokens-api.ts                      |  15 +-
 src/utils/nai-tokens.ts                       |  48 ++--
 src/utils/wallet/ctokens/api/index.d.ts       |   9 +-
 src/utils/wallet/ctokens/signer.ts            |  56 +++-
 vite.config.ts                                |   5 +
 13 files changed, 392 insertions(+), 124 deletions(-)

diff --git a/src/components/HTMHeader.vue b/src/components/HTMHeader.vue
index 7054d18..505dff3 100644
--- a/src/components/HTMHeader.vue
+++ b/src/components/HTMHeader.vue
@@ -56,13 +56,14 @@ const logout = async () => {
 };
 const goToLoginPage = async () => {
   try {
-    // If L1 logged in, show provide password modal, show the wallet select modal otherwise
-    if (settingsStore.settings?.account)
+    const hasStoredWallet = await CTokensProvider.hasWallet();
+
+    if (settingsStore.settings?.account || hasStoredWallet) {
       walletStore.isProvideWalletPasswordModalOpen = true;
-    else if (await CTokensProvider.hasWallet())
-      walletStore.isWalletSelectModalOpen = true;
-    else
-      router.push('/tokens/register-account');
+      return;
+    }
+
+    router.push('/tokens/register-account');
   } catch(error) {
     toastError('Failed to log in', error);
   }
diff --git a/src/components/HTMLoginForm.vue b/src/components/HTMLoginForm.vue
index 7631e9d..c00f94d 100644
--- a/src/components/HTMLoginForm.vue
+++ b/src/components/HTMLoginForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { mdiClose } from '@mdi/js';
-import { computed, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
 import HTMLoginContent from '@/components/HTMLoginContent.vue';
@@ -35,19 +35,52 @@ const userStore = useUserStore();
 const settingsStore = useSettingsStore();
 
 const isLoading = ref(false);
+const isCheckingWalletStatus = ref(true);
 
 // Existing account login
 const password = ref('');
 
 const tokensStore = useTokensStore();
 
-// Check if user already has HTM wallet configured (only needs password)
-const hasHTMWallet = computed(() => CTokensProvider.isLoggedIn());
+const hasStoredHTMWallet = ref(false);
+const mode = ref<'login' | 'create'>('create');
 
 const close = () => {
   emit('close');
 };
 
+onMounted(async () => {
+  try {
+    const alreadyUnlocked = CTokensProvider.isLoggedIn();
+    let walletExists = alreadyUnlocked;
+
+    if (!walletExists)
+      walletExists = await CTokensProvider.hasWallet();
+
+    hasStoredHTMWallet.value = walletExists;
+    mode.value = walletExists ? 'login' : 'create';
+  } catch (error) {
+    toastError('Failed to verify existing HTM wallet', error);
+    hasStoredHTMWallet.value = false;
+    mode.value = 'create';
+  } finally {
+    isCheckingWalletStatus.value = false;
+  }
+});
+
+const switchToCreateWallet = () => {
+  mode.value = 'create';
+  password.value = '';
+};
+
+const switchToLoginMode = () => {
+  if (!hasStoredHTMWallet.value)
+    return;
+
+  mode.value = 'login';
+  password.value = '';
+};
+
 const handleConditionalSiteLogin = async (operationalKey: string) => {
   const wax = await getWax();
 
@@ -77,6 +110,8 @@ const handleSetAccount = async (account: string) => {
     await handleConditionalSiteLogin(account);
 
     toast.success('HTM wallet created successfully!');
+    hasStoredHTMWallet.value = true;
+    switchToLoginMode();
     emit('success');
     emit('setaccount', account);
   } catch (error) {
@@ -145,9 +180,15 @@ const loginExisting = async () => {
       <CardDescription>{{ description }}</CardDescription>
     </CardHeader>
     <CardContent class="space-y-4">
-      <!-- Simple password login for existing HTM wallet -->
       <div
-        v-if="hasHTMWallet"
+        v-if="isCheckingWalletStatus"
+        class="text-sm text-muted-foreground text-center py-6"
+      >
+        Checking for existing HTM wallet...
+      </div>
+
+      <div
+        v-else-if="mode === 'login'"
         class="space-y-4"
       >
         <div class="space-y-2">
@@ -175,9 +216,17 @@ const loginExisting = async () => {
           <span v-if="isLoading">Logging in...</span>
           <span v-else>Login to HTM</span>
         </Button>
+
+        <Button
+          v-if="hasStoredHTMWallet"
+          variant="link"
+          class="w-full justify-center text-sm"
+          @click="switchToCreateWallet"
+        >
+          Create a new HTM wallet instead
+        </Button>
       </div>
 
-      <!-- Wallet creation form for new users -->
       <div
         v-else
         class="space-y-4"
@@ -186,6 +235,15 @@ const loginExisting = async () => {
           :show-steps="false"
           @setaccount="handleSetAccount"
         />
+
+        <Button
+          v-if="hasStoredHTMWallet"
+          variant="link"
+          class="w-full justify-center text-sm"
+          @click="switchToLoginMode"
+        >
+          Use my existing HTM wallet
+        </Button>
       </div>
     </CardContent>
   </Card>
diff --git a/src/components/navigation/AccountSwitcher.vue b/src/components/navigation/AccountSwitcher.vue
index 1a3aaea..5116c34 100644
--- a/src/components/navigation/AccountSwitcher.vue
+++ b/src/components/navigation/AccountSwitcher.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { mdiSwapHorizontal } from '@mdi/js';
 import { computed, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 
 import hiveLogoUrl from '@/assets/icons/hive.svg';
 import cTokensLogoUrl from '@/assets/icons/wallets/ctokens.svg';
@@ -18,6 +19,7 @@ const settingsStore = useSettingsStore();
 const walletStore = useWalletStore();
 const userStore = useUserStore();
 const tokensStore = useTokensStore();
+const router = useRouter();
 
 // Current active account type
 const activeAccount = ref<'hive' | 'htm'>('hive');
@@ -88,10 +90,14 @@ const connectToHive = () => {
 // Connect to HTM
 const connectToHTM = async () => {
   try {
-    if (settingsStore.settings?.account)
+    const hasStoredWallet = await CTokensProvider.hasWallet();
+
+    if (settingsStore.settings?.account || hasStoredWallet) {
       walletStore.isProvideWalletPasswordModalOpen = true;
-    else if (await CTokensProvider.hasWallet())
-      walletStore.openWalletSelectModal();
+      return;
+    }
+
+    router.push('/tokens/register-account');
   } catch (error) {
     toastError('Failed to connect to HTM', error);
   }
diff --git a/src/components/wallet/HTMProvidePassword.vue b/src/components/wallet/HTMProvidePassword.vue
index caf1c04..cc17536 100644
--- a/src/components/wallet/HTMProvidePassword.vue
+++ b/src/components/wallet/HTMProvidePassword.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { mdiClose } from '@mdi/js';
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import { Button } from '@/components/ui/button';
@@ -15,6 +16,7 @@ import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+const router = useRouter();
 const walletStore = useWalletStore();
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
@@ -61,6 +63,11 @@ const connect = async () => {
     isLoading.value = false;
   }
 };
+
+const openRegistration = () => {
+  close();
+  router.push('/tokens/register-account');
+};
 </script>
 
 <template>
@@ -124,6 +131,13 @@ const connect = async () => {
                 <span class="text-md font-bold">Connect</span>
               </Button>
             </div>
+            <Button
+              variant="link"
+              class="w-full justify-center text-sm"
+              @click="openRegistration"
+            >
+              Create a new HTM wallet instead
+            </Button>
           </div>
         </CardContent>
         <CardFooter />
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index 154b5ee..c3c5c3f 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -8,6 +8,7 @@ import {
 } from '@mdi/js';
 import { HtmTransaction, type asset, type asset_definition } from '@mtyszczak-cargo/htm';
 import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import HTMTokenPreview from '@/components/HTMTokenPreview.vue';
@@ -31,6 +32,8 @@ import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+const router = useRouter();
+
 const tokensStore = useTokensStore();
 const walletStore = useWalletStore();
 const settingsStore = useSettingsStore();
@@ -278,6 +281,7 @@ const createToken = async () => {
       'Token creation',
       async () => {
         // Success, reset form
+        await router.push(`/tokens/token?nai=${generatedNAI.value}&precision=${precision.value}`);
         resetForm();
       }
     );
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index 1a6b1cd..8d270a1 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -166,16 +166,13 @@ const handleUpdateToken = async () => {
         // Refresh token data after update
         await tokensStore.loadRegisteredTokens(token.value!.nai, token.value!.precision, 1, true);
 
-        // Navigate back to token detail page
-        setTimeout(() => {
-          router.push({
-            path: '/tokens/token',
-            query: {
-              nai: token.value!.nai,
-              precision: token.value!.precision
-            }
-          });
-        }, 1000);
+        router.push({
+          path: '/tokens/token',
+          query: {
+            nai: token.value!.nai,
+            precision: token.value!.precision
+          }
+        });
       }
     );
   } catch (error) {
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index c582a9b..49cdc63 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -23,9 +23,8 @@ import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useTokensStore } from '@/stores/tokens.store';
-import { getWax } from '@/stores/wax.store';
-import { getUserOperationalKey } from '@/utils/ctokens-api';
-import { transferNAIToken, stakeNAIToken } from '@/utils/nai-tokens';
+import { getCTokensApi, getUserOperationalKey, formatCTokenAmount } from '@/utils/ctokens-api';
+import { transferNAIToken, stakeNAIToken, toVesting } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppBalance } from '@/utils/wallet/ctokens/api';
@@ -33,6 +32,17 @@ import type { CtokensAppBalance } from '@/utils/wallet/ctokens/api';
 const router = useRouter();
 const tokensStore = useTokensStore();
 
+interface AggregatedBalance {
+  key: string;
+  nai: string;
+  precision: number;
+  liquid: CtokensAppBalance | null;
+  vesting: CtokensAppBalance | null;
+  metadata?: Record<string, unknown>;
+}
+
+type BalanceLike = AggregatedBalance | CtokensAppBalance | null | undefined;
+
 // State
 const isLoading = ref(false);
 const searchQuery = ref('');
@@ -73,52 +83,140 @@ const formatCount = (count: number): string => {
 };
 
 // Helper functions for extracting data from metadata
-const getTokenSymbol = (balance: CtokensAppBalance): string => {
-  const metadata = balance.metadata as { symbol?: string; name?: string } | undefined;
-  return metadata?.symbol || balance.nai?.replace('@@', '') || 'Unknown';
+const isVesting = (nai: string, precision: number): boolean => {
+  return (((Number(nai.slice(2, -1)) << 5) | 0x10 | precision) & 0x20) !== 0;
+};
+
+const isAggregatedBalance = (balance: BalanceLike): balance is AggregatedBalance => {
+  return Boolean(balance && typeof (balance as AggregatedBalance).key === 'string');
+};
+
+const getBalanceMetadata = (balance: BalanceLike): Record<string, string> | undefined => {
+  if (!balance) return undefined;
+
+  if (isAggregatedBalance(balance)) {
+    const metadata = balance.metadata as Record<string, string> | undefined;
+    if (metadata) return metadata;
+
+    const liquidMetadata = balance.liquid?.metadata as Record<string, string> | undefined;
+    if (liquidMetadata) return liquidMetadata;
+
+    return balance.vesting?.metadata as Record<string, string> | undefined;
+  }
+
+  return balance.metadata as Record<string, string> | undefined;
+};
+
+const getBalanceNai = (balance: BalanceLike): string => {
+  if (!balance) return '';
+  if (isAggregatedBalance(balance)) return balance.nai;
+  return balance.nai || '';
 };
 
-const getTokenName = (balance: CtokensAppBalance): string => {
-  const metadata = balance.metadata as { name?: string; display_name?: string } | undefined;
+const getTokenSymbol = (balance: BalanceLike): string => {
+  const metadata = getBalanceMetadata(balance);
+  const nai = getBalanceNai(balance);
+  return metadata?.symbol || metadata?.name || nai.replace('@@', '') || 'Unknown';
+};
+
+const getTokenName = (balance: BalanceLike): string => {
+  const metadata = getBalanceMetadata(balance);
   return metadata?.display_name || metadata?.name || getTokenSymbol(balance);
 };
 
-const getTokenLogoUrl = (balance: CtokensAppBalance): string | undefined => {
-  const metadata = balance.metadata as { logo_url?: string; image?: string } | undefined;
+const getTokenLogoUrl = (balance: BalanceLike): string | undefined => {
+  const metadata = getBalanceMetadata(balance);
   return metadata?.logo_url || metadata?.image;
 };
 
-// Check if a token is staked (vesting) based on NAI
-const isVesting = (nai: string, precision: number): boolean => {
-  // The vesting bit is bit 5 (0x20) in the NAI encoding
-  return (((Number(nai.slice(2, -1)) << 5) | 0x10 | precision) & 0x20) != 0;
+const aggregatedBalances = computed<AggregatedBalance[]>(() => {
+  const map = new Map<string, AggregatedBalance>();
+  const order: string[] = [];
+
+  tokensStore.balances.forEach((balance) => {
+    if (!balance.nai)
+      return;
+
+    const precision = balance.precision ?? 0;
+    const isBalanceVesting = isVesting(balance.nai, precision);
+    const baseNai = isBalanceVesting ? toVesting(balance.nai, precision) : balance.nai;
+    const key = `${baseNai}:${precision}`;
+
+    if (!map.has(key)) {
+      map.set(key, {
+        key,
+        nai: baseNai,
+        precision,
+        liquid: null,
+        vesting: null,
+        metadata: balance.metadata as Record<string, unknown> | undefined
+      });
+      order.push(key);
+    }
+
+    const entry = map.get(key)!;
+
+    if (isBalanceVesting)
+      entry.vesting = balance;
+    else
+      entry.liquid = balance;
+
+    if (!entry.metadata && balance.metadata)
+      entry.metadata = balance.metadata as Record<string, unknown>;
+  });
+
+  return order.map(key => map.get(key)!);
+});
+
+const formatBalanceAmount = (amount: string | undefined, precision: number | undefined): string => {
+  if (!amount || amount === '0') return '0';
+  return formatCTokenAmount(amount, precision ?? 0);
 };
 
-// Get liquid balance - if the NAI indicates vesting (staked), return 0
-const getLiquidBalance = (balance: CtokensAppBalance): string => {
+const getLiquidBalance = (balance: BalanceLike): string => {
+  if (!balance) return '0';
+
+  if (isAggregatedBalance(balance))
+    return formatBalanceAmount(balance.liquid?.amount, balance.liquid?.precision ?? balance.precision);
+
   if (isVesting(balance.nai || '', balance.precision || 0))
     return '0';
 
-  return balance.amount || '0';
+  return formatBalanceAmount(balance.amount, balance.precision);
 };
 
-// Get staked balance - if the NAI indicates vesting (staked), return the amount
-const getStakedBalance = (balance: CtokensAppBalance): string => {
+const getStakedBalance = (balance: BalanceLike): string => {
+  if (!balance) return '0';
+
+  if (isAggregatedBalance(balance))
+    return formatBalanceAmount(balance.vesting?.amount, balance.vesting?.precision ?? balance.precision);
+
   if (isVesting(balance.nai || '', balance.precision || 0))
-    return balance.amount || '0';
+    return formatBalanceAmount(balance.amount, balance.precision);
 
   return '0';
 };
 
-const getTotalBalance = (balance: CtokensAppBalance): string => {
-  const liquid = parseFloat(getLiquidBalance(balance));
-  const staked = parseFloat(getStakedBalance(balance));
-  return (liquid + staked).toString();
+const getTotalBalance = (balance: BalanceLike): string => {
+  if (!balance) return '0';
+
+  if (isAggregatedBalance(balance)) {
+    const precision = balance.precision;
+    const liquidAmount = balance.liquid?.amount ? BigInt(balance.liquid.amount) : 0n;
+    const stakedAmount = balance.vesting?.amount ? BigInt(balance.vesting.amount) : 0n;
+    return formatBalanceAmount((liquidAmount + stakedAmount).toString(), precision);
+  }
+
+  if (isVesting(balance.nai || '', balance.precision || 0))
+    return getStakedBalance(balance);
+
+  return getLiquidBalance(balance);
 };
 
+
 // Filter balances based on search query
 const filteredBalancesAll = computed(() => {
-  const balances = tokensStore.balances;
+  const balances = aggregatedBalances.value;
 
   if (!searchQuery.value) return balances;
 
@@ -126,10 +224,14 @@ const filteredBalancesAll = computed(() => {
     const symbol = getTokenSymbol(balance);
     const name = getTokenName(balance);
     const nai = balance.nai || '';
+    const liquidNai = isAggregatedBalance(balance) ? balance.liquid?.nai || '' : '';
+    const vestingNai = isAggregatedBalance(balance) ? balance.vesting?.nai || '' : '';
 
     return symbol.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
       name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
-      nai.includes(searchQuery.value);
+      nai.includes(searchQuery.value) ||
+      liquidNai.includes(searchQuery.value) ||
+      vestingNai.includes(searchQuery.value);
   });
 });
 
@@ -159,7 +261,7 @@ watch(searchQuery, () => {
 // Methods
 const loadAccountStatistics = async () => {
   try {
-    const wax = await getWax();
+    const cTokensApi = await getCTokensApi();
     const operationalKey = await getUserOperationalKey();
 
     if (!operationalKey) {
@@ -168,21 +270,34 @@ const loadAccountStatistics = async () => {
     }
 
     // Get all tokens created by this user (owner field matches operational key)
-    const allTokens = await wax.restApi.ctokensApi.registeredTokens({});
+    const allTokens = await cTokensApi.getRegisteredTokens();
     const createdTokens = allTokens.filter(token => token.owner === operationalKey);
     createdTokensCount.value = createdTokens.length;
 
     // Get owned tokens (tokens with balance)
-    const balances = await wax.restApi.ctokensApi.balances({ user: operationalKey });
-    ownedTokensCount.value = balances.length;
+    const balances = await cTokensApi.getAccountBalances(operationalKey);
+    const uniqueBalanceKeys = new Set<string>();
+    const stakedTokenKeys = new Set<string>();
+
+    balances.forEach((balance) => {
+      if (!balance.nai) return;
+      const precision = balance.precision ?? 0;
+      const baseNai = isVesting(balance.nai, precision) ? toVesting(balance.nai, precision) : balance.nai;
+      const key = `${baseNai}:${precision}`;
+      uniqueBalanceKeys.add(key);
+
+      if (isVesting(balance.nai, precision))
+        stakedTokenKeys.add(key);
+    });
+
+    ownedTokensCount.value = uniqueBalanceKeys.size;
 
     // Get NFT collections (created NFT tokens)
     const nftTokens = createdTokens.filter(token => token.is_nft);
     nftCollectionsCount.value = nftTokens.length;
 
     // Get staked tokens (tokens with vesting bit set)
-    const stakedBalances = balances.filter(b => isVesting(b.nai || '', b.precision || 0));
-    stakedTokensCount.value = stakedBalances.length;
+    stakedTokensCount.value = stakedTokenKeys.size;
   } catch (error) {
     console.error('Failed to load account statistics:', error);
   }
@@ -203,8 +318,13 @@ const loadAccountBalances = async () => {
   }
 };
 
-const openTransferDialog = (balance: CtokensAppBalance) => {
-  selectedTokenForTransfer.value = balance;
+const openTransferDialog = (balance: AggregatedBalance) => {
+  if (!balance.liquid) {
+    toast.error('No liquid balance available for transfer');
+    return;
+  }
+
+  selectedTokenForTransfer.value = balance.liquid;
   transferAmount.value = '';
   transferRecipient.value = '';
   transferMemo.value = '';
@@ -247,8 +367,15 @@ const transferTokens = async () => {
   }
 };
 
-const openTransformDialog = (balance: CtokensAppBalance, direction: 'liquid-to-staked' | 'staked-to-liquid') => {
-  selectedToken.value = balance;
+const openTransformDialog = (balance: AggregatedBalance, direction: 'liquid-to-staked' | 'staked-to-liquid') => {
+  const tokenEntry = direction === 'liquid-to-staked' ? balance.liquid : balance.vesting;
+
+  if (!tokenEntry) {
+    toast.error(direction === 'liquid-to-staked' ? 'No liquid balance available to stake' : 'No staked balance available to unstake');
+    return;
+  }
+
+  selectedToken.value = tokenEntry;
   transformDirection.value = direction;
   transformAmount.value = '';
   isTransformDialogOpen.value = true;
@@ -296,18 +423,19 @@ const handleImageError = (nai: string) => {
 };
 
 // Check if image should be shown
-const shouldShowImage = (balance: CtokensAppBalance): boolean => {
+const shouldShowImage = (balance: BalanceLike): boolean => {
   const logoUrl = getTokenLogoUrl(balance);
-  return !!logoUrl && !failedImages.value.has(balance.nai || '');
+  const nai = getBalanceNai(balance);
+  return !!logoUrl && !failedImages.value.has(nai);
 };
 
 // Navigate to token details page
-const navigateToToken = (balance: CtokensAppBalance) => {
+const navigateToToken = (balance: AggregatedBalance) => {
   router.push({
     path: '/tokens/token',
     query: {
       nai: balance.nai,
-      precision: balance.precision?.toString()
+      precision: balance.precision.toString()
     }
   });
 };
@@ -317,7 +445,6 @@ const setMaxTransferAmount = async () => {
   if (!selectedTokenForTransfer.value) return;
 
   try {
-    // Use the raw amount directly from the balance
     transferAmount.value = selectedTokenForTransfer.value.amount || '0';
   } catch (error) {
     console.error('Failed to set max transfer amount:', error);
@@ -329,12 +456,7 @@ const setMaxTransformAmount = async () => {
   if (!selectedToken.value) return;
 
   try {
-    const amount = transformDirection.value === 'liquid-to-staked'
-      ? (selectedToken.value.amount || '0')
-      : getStakedBalance(selectedToken.value);
-
-    // Use the raw amount directly without formatting
-    transformAmount.value = amount;
+    transformAmount.value = selectedToken.value.amount || '0';
   } catch (error) {
     console.error('Failed to set max transform amount:', error);
   }
@@ -574,10 +696,7 @@ onMounted(() => {
                       Asset
                     </th>
                     <th class="text-right p-4 font-medium text-muted-foreground">
-                      Liquid
-                    </th>
-                    <th class="text-right p-4 font-medium text-muted-foreground">
-                      Staked
+                      Balances
                     </th>
                     <th class="text-right p-4 font-medium text-muted-foreground">
                       Total
@@ -590,7 +709,7 @@ onMounted(() => {
                 <tbody>
                   <tr
                     v-for="balance in filteredBalances"
-                    :key="balance.nai"
+                    :key="balance.key"
                     class="border-b hover:bg-muted/50 transition-colors cursor-pointer"
                     @click="navigateToToken(balance)"
                   >
@@ -618,7 +737,7 @@ onMounted(() => {
                               {{ getTokenName(balance) }}
                             </span>
                             <span
-                              v-if="isVesting(balance.nai || '', balance.precision || 0)"
+                              v-if="Number(getStakedBalance(balance)) > 0"
                               class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
                             >
                               <svg
@@ -645,17 +764,15 @@ onMounted(() => {
                       </div>
                     </td>
 
-                    <!-- Liquid Balance -->
+                    <!-- Combined Balances -->
                     <td class="p-4 text-right">
-                      <div class="font-medium">
-                        {{ getLiquidBalance(balance) }}
-                      </div>
-                    </td>
-
-                    <!-- Staked Balance -->
-                    <td class="p-4 text-right">
-                      <div class="font-medium">
-                        {{ getStakedBalance(balance) }}
+                      <div class="flex justify-end gap-3 text-sm">
+                        <span class="font-medium">
+                          Liquid: {{ getLiquidBalance(balance) }}
+                        </span>
+                        <span class="text-muted-foreground">
+                          Staked: {{ getStakedBalance(balance) }}
+                        </span>
                       </div>
                     </td>
 
@@ -672,7 +789,7 @@ onMounted(() => {
                         <Button
                           variant="ghost"
                           size="sm"
-                          :disabled="parseFloat(getLiquidBalance(balance)) === 0"
+                          :disabled="Number(getLiquidBalance(balance)) === 0"
                           title="Transfer tokens"
                           @click.stop="openTransferDialog(balance)"
                         >
@@ -692,7 +809,7 @@ onMounted(() => {
                         <Button
                           variant="ghost"
                           size="sm"
-                          :disabled="parseFloat(getLiquidBalance(balance)) === 0"
+                          :disabled="Number(getLiquidBalance(balance)) === 0"
                           title="Stake tokens"
                           @click.stop="openTransformDialog(balance, 'liquid-to-staked')"
                         >
@@ -712,7 +829,7 @@ onMounted(() => {
                         <Button
                           variant="ghost"
                           size="sm"
-                          :disabled="parseFloat(getStakedBalance(balance)) === 0"
+                          :disabled="Number(getStakedBalance(balance)) === 0"
                           title="Unstake tokens"
                           @click.stop="openTransformDialog(balance, 'staked-to-liquid')"
                         >
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index 55c0e06..1583d9b 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -265,6 +265,8 @@ const registerHTMAccount = async () => {
       generatedKeys.value.managementPrivateKey
     );
 
+    console.log(keys);
+
     await CTokensProvider.login(
       registrationData.value.walletPassword
     );
@@ -300,6 +302,8 @@ const registerHTMAccount = async () => {
 
     await tokensStore.reset(await CTokensProvider.for(wax, 'owner', false));
 
+    console.log(CTokensProvider.getOperationalPublicKey());
+
     await tokensStore.wallet?.signTransaction(l2Transaction);
 
     // Create Layer 1 transaction and broadcast
diff --git a/src/utils/ctokens-api.ts b/src/utils/ctokens-api.ts
index 11f9379..15c5b38 100644
--- a/src/utils/ctokens-api.ts
+++ b/src/utils/ctokens-api.ts
@@ -5,6 +5,7 @@ import type {
   CtokensAppBalance,
   CtokensAppBalanceHistory,
   CtokensAppTransactionStatusResponse,
+  CtokensAppArrayOfAccountBalances,
   CtokensAppArrayOfTokens,
   CtokensAppArrayOfUsers,
   CtokensAppArrayOfTopHolders
@@ -114,7 +115,19 @@ export class CTokensApiService {
    * Get account balances for a user
    */
   public async getAccountBalances (user: string, page: number = 1): Promise<CtokensAppBalance[]> {
-    return await this.extendedChain.restApi.ctokensApi.balances({ user, page });
+    const response = await this.extendedChain.restApi.ctokensApi.balances({ user, page }) as CtokensAppArrayOfAccountBalances;
+
+    return response.flatMap((entry) => {
+      const balances: CtokensAppBalance[] = [];
+
+      if (entry.liquid)
+        balances.push(entry.liquid);
+
+      if (entry.vesting)
+        balances.push(entry.vesting);
+
+      return balances;
+    });
   }
 
   /**
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index 105f49c..0978b64 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -9,7 +9,7 @@ import {
   getCTokensApi,
   getUserOperationalKey
 } from './ctokens-api';
-import type { CtokensAppArrayOfTokens } from './wallet/ctokens/api';
+import type { CtokensAppArrayOfTokens, CtokensAppBalance } from './wallet/ctokens/api';
 import CTokensProvider from './wallet/ctokens/signer';
 
 export interface TokenCreationParams {
@@ -55,7 +55,11 @@ const dammDigit = (str: string) => {
   let row = 0;
 
   for(let i = 0; i < str.length; i++) {
-    const col = str.charAt(i) as unknown as number;
+    const col = Number.parseInt(str.charAt(i), 10);
+
+    if (Number.isNaN(col) || col < 0 || col > 9)
+      throw new Error(`Invalid character '${str.charAt(i)}' in NAI string '${str}'`);
+
     row = table[row][col];
   }
 
@@ -306,7 +310,7 @@ export const getTokenDefinitions = async (creator?: string): Promise<CtokensAppA
 /**
  * Get account balances - now using ctokens-api
  */
-export const getAccountBalances = async (): Promise<CtokensAppArrayOfTokens> => {
+export const getAccountBalances = async (): Promise<CtokensAppBalance[]> => {
   try {
     const operationalKey = await getUserOperationalKey();
     if (!operationalKey)
@@ -318,36 +322,24 @@ export const getAccountBalances = async (): Promise<CtokensAppArrayOfTokens> =>
   } catch (error) {
     console.error('Failed to get account balances:', error);
     // Fallback to mock data for development
-    const mockBalances = [
-      {
-        symbol: 'HIVE',
-        name: 'Hive',
-        nai: '@@000000021',
-        liquid_balance: '150.500',
-        staked_balance: '0.000',
-        total_balance: '150.500',
-        precision: 3,
-        logo_url: undefined
-      },
+    const mockBalances: CtokensAppBalance[] = [
       {
-        symbol: 'HBD',
-        name: 'Hive Backed Dollar',
-        nai: '@@000000013',
-        liquid_balance: '75.250',
-        staked_balance: '0.000',
-        total_balance: '75.250',
+        nai: '@@000000308',
+        amount: '199800',
         precision: 3,
-        logo_url: undefined
+        metadata: {
+          name: 'Test Token',
+          symbol: 'TEST'
+        }
       },
       {
-        symbol: 'MAT',
-        name: 'My Awesome Token',
-        nai: '@@123456789',
-        liquid_balance: '1000.000',
-        staked_balance: '500.000',
-        total_balance: '1500.000',
+        nai: '@@000000319',
+        amount: '100',
         precision: 3,
-        logo_url: undefined
+        metadata: {
+          name: 'Test Token (Vesting)',
+          symbol: 'TEST'
+        }
       }
     ];
 
diff --git a/src/utils/wallet/ctokens/api/index.d.ts b/src/utils/wallet/ctokens/api/index.d.ts
index 6c0381a..85fb991 100644
--- a/src/utils/wallet/ctokens/api/index.d.ts
+++ b/src/utils/wallet/ctokens/api/index.d.ts
@@ -11,6 +11,13 @@ export interface CtokensAppBalance {
 
 export type CtokensAppArrayOfBalances = CtokensAppBalance[];
 
+export interface CtokensAppAccountBalance {
+  liquid?: CtokensAppBalance | null;
+  vesting?: CtokensAppBalance | null;
+}
+
+export type CtokensAppArrayOfAccountBalances = CtokensAppAccountBalance[];
+
 export interface CtokensAppToken {
   /** Currency NAI */
   nai?: string;
@@ -151,7 +158,7 @@ type TWaxExtended = {
       }
     },
     balances: {
-      result: CtokensAppArrayOfBalances,
+      result: CtokensAppArrayOfAccountBalances,
       params: CtokensEndpointsGetAccountBalancesParams & TEmptyReq & {
       }
     },
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index 3da237d..b18aaaf 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -16,6 +16,8 @@ const MANAGEMENT_WALLET_NAME_SUFFIX = 'management';
 
 const LOCAL_STORAGE_WALLET_INDEX_KEY = 'ctokens_wallet_index';
 const LOCAL_STORAGE_WALLET_INDEX_DEFAULT = 0;
+const LOCAL_STORAGE_OPERATIONAL_PUBLIC_KEY = 'ctokens_operational_public_key';
+const LOCAL_STORAGE_MANAGEMENT_PUBLIC_KEY = 'ctokens_management_public_key';
 
 export const DEFAULT_CTOKENS_API_URL = 'http://192.168.6.7';
 
@@ -35,11 +37,19 @@ export class CTokensProvider extends AEncryptionProvider {
 
   // TODO: Remove this code after @hiveio/beekeeper bugfix - bump deps
   private static lastOperationalPk: string | undefined = undefined;
+
+  private static lastManagementPk: string | undefined = undefined;
   // TODO: Remove this method !!!
   public static getOperationalPublicKey (): string | undefined {
+    CTokensProvider.ensurePublicKeysLoaded();
     return CTokensProvider.lastOperationalPk;
   }
 
+  public static getManagementPublicKey (): string | undefined {
+    CTokensProvider.ensurePublicKeysLoaded();
+    return CTokensProvider.lastManagementPk;
+  }
+
   public static getOperationalWallet (): IBeekeeperUnlockedWallet | undefined {
     return CTokensProvider.#operationalWallet;
   }
@@ -55,17 +65,17 @@ export class CTokensProvider extends AEncryptionProvider {
   ) {
     super();
 
+    CTokensProvider.ensurePublicKeysLoaded();
+
     this.extendedChain = chain.extendRest(RestApi);
     this.extendedChain.restApi.ctokensApi.endpointUrl = endpointUrl;
 
-    const publicKey = role === 'owner' ? CTokensProvider.#managementWallet?.getPublicKeys()[0] : CTokensProvider.#operationalWallet?.getPublicKeys()[0];
+    const publicKey = role === 'owner' ? CTokensProvider.lastOperationalPk : CTokensProvider.lastManagementPk;
 
     if (!publicKey)
       throw new WaxCTokensEncryptionProviderError('The requested wallet does not have a public key.');
 
     this.publicKey = publicKey;
-    if (role !== 'owner')
-      CTokensProvider.lastOperationalPk = this.publicKey;
   }
 
   private async publicKeyHasAccount (): Promise<boolean> {
@@ -115,6 +125,8 @@ export class CTokensProvider extends AEncryptionProvider {
   public static async login (password: string) {
     await CTokensProvider.prepareBeekeeper();
 
+    CTokensProvider.ensurePublicKeysLoaded();
+
     const session = CTokensProvider.#beekeeper!.createSession(Math.random().toString());
 
     try {
@@ -152,6 +164,8 @@ export class CTokensProvider extends AEncryptionProvider {
     const operational = await wallet.importKey(operationalPrivateKey);
     wallet.lock();
 
+    CTokensProvider.setOperationalPublicKey(operational);
+
     let management: TPublicKey | undefined;
 
     if (managementPrivateKey) {
@@ -160,10 +174,14 @@ export class CTokensProvider extends AEncryptionProvider {
       managementWallet.lock();
     }
 
+    CTokensProvider.setManagementPublicKey(management);
+
     return { management, operational };
   }
 
   public static async for (chain: IHiveChainInterface, role: TRole, onlineCheckKeys = true, ctokensUrl: string = (import.meta.env.VITE_CTOKENS_API_URL || DEFAULT_CTOKENS_API_URL)): Promise<CTokensProvider> {
+    CTokensProvider.ensurePublicKeysLoaded();
+
     if (role === 'owner') {
       if (!CTokensProvider.#managementWallet)
         throw new WaxCTokensEncryptionProviderError('Owner wallet is not available. Make sure to login with the correct password and import the required key.');
@@ -202,6 +220,38 @@ export class CTokensProvider extends AEncryptionProvider {
 
     return [signature];
   }
+
+  private static ensurePublicKeysLoaded () {
+    if (!CTokensProvider.lastOperationalPk) {
+      const storedOperational = localStorage.getItem(LOCAL_STORAGE_OPERATIONAL_PUBLIC_KEY);
+      if (storedOperational)
+        CTokensProvider.lastOperationalPk = storedOperational;
+    }
+
+    if (!CTokensProvider.lastManagementPk) {
+      const storedManagement = localStorage.getItem(LOCAL_STORAGE_MANAGEMENT_PUBLIC_KEY);
+      if (storedManagement)
+        CTokensProvider.lastManagementPk = storedManagement;
+    }
+  }
+
+  private static setOperationalPublicKey (publicKey: string | undefined) {
+    CTokensProvider.lastOperationalPk = publicKey;
+
+    if (!publicKey)
+      localStorage.removeItem(LOCAL_STORAGE_OPERATIONAL_PUBLIC_KEY);
+    else
+      localStorage.setItem(LOCAL_STORAGE_OPERATIONAL_PUBLIC_KEY, publicKey);
+  }
+
+  private static setManagementPublicKey (publicKey: string | undefined) {
+    CTokensProvider.lastManagementPk = publicKey;
+
+    if (!publicKey)
+      localStorage.removeItem(LOCAL_STORAGE_MANAGEMENT_PUBLIC_KEY);
+    else
+      localStorage.setItem(LOCAL_STORAGE_MANAGEMENT_PUBLIC_KEY, publicKey);
+  }
 }
 
 export default CTokensProvider;
diff --git a/vite.config.ts b/vite.config.ts
index 667e662..7c4e399 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -44,6 +44,11 @@ export default defineConfig(({ mode }) => {
         '@': path.resolve(import.meta.dirname, './src'),
       },
     },
+    server: {
+      allowedHosts: [
+        '15.bc.fqdn.pl'
+      ]
+    },
     define: {
       __COMMIT_HASH__: JSON.stringify(getCommitHash()),
       // Make environment variables available in the application
-- 
GitLab


From 4ebbabba91bfcf406b66977500bca6da4ac57176 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Fri, 24 Oct 2025 14:44:38 +0200
Subject: [PATCH 048/102] Small token improvements

---
 src/pages/tokens/register-account.vue |  8 ++---
 src/pages/tokens/token.vue            | 46 +++++++++++++++++++++++----
 src/stores/tokens.store.ts            |  2 +-
 src/utils/nai-tokens.ts               | 12 ++++---
 4 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index 1583d9b..bf3a4af 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -300,11 +300,9 @@ const registerHTMAccount = async () => {
       }
     });
 
-    await tokensStore.reset(await CTokensProvider.for(wax, 'owner', false));
+    const walletL2 = await CTokensProvider.for(wax, 'owner', false);
 
-    console.log(CTokensProvider.getOperationalPublicKey());
-
-    await tokensStore.wallet?.signTransaction(l2Transaction);
+    await walletL2.signTransaction(l2Transaction);
 
     // Create Layer 1 transaction and broadcast
     const l1Transaction = await wax.createTransaction();
@@ -326,6 +324,8 @@ const registerHTMAccount = async () => {
         // After successful registration, redirect to login
         showRegistrationForm.value = false;
         showHTMLogin();
+
+        await tokensStore.reset(walletL2);
       }
     );
   } catch (error) {
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 1d26a84..6ebd123 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -14,7 +14,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useTokensStore } from '@/stores/tokens.store';
+import { isVesting, useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
@@ -46,6 +46,8 @@ const isUnstaking = ref(false);
 const isCopied = ref(false);
 const isNaiCopied = ref(false);
 
+const isStaked = ref(false);
+
 // Transfer form
 const transferForm = ref({
   to: '',
@@ -193,6 +195,8 @@ const loadTokenDetails = async () => {
 
     token.value = tokens[0];
 
+    isStaked.value = isVesting(token.value.nai!, token.value.precision || 0);
+
     // Update formatted values
     await updateFormattedValues();
 
@@ -365,7 +369,11 @@ const handleTransfer = async () => {
         };
 
         // Reload user balance
-        await tokensStore.loadBalances(true);
+        await Promise.allSettled([
+          tokensStore.loadBalances(true),
+          loadTokenDetails(),
+          loadTopHolders()
+        ]);
         userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
       }
     );
@@ -424,9 +432,11 @@ const handleStake = async () => {
     // Create Layer 2 HTM transaction for token transform (stake)
     const l2Transaction = new HtmTransaction(wax);
 
+    const holder = CTokensProvider.getOperationalPublicKey()!;
+
     l2Transaction.pushOperation({
       token_transform_operation: {
-        holder: tokensStore.wallet.publicKey,
+        holder,
         receiver: stakeForm.value.receiver || undefined,
         amount: {
           amount: stakeForm.value.amount,
@@ -463,7 +473,11 @@ const handleStake = async () => {
         };
 
         // Reload user balance
-        await tokensStore.loadBalances(true);
+        await Promise.allSettled([
+          tokensStore.loadBalances(true),
+          loadTokenDetails(),
+          loadTopHolders()
+        ]);
         userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
       }
     );
@@ -525,9 +539,11 @@ const handleUnstake = async () => {
     // Create Layer 2 HTM transaction for token transform (unstake)
     const l2Transaction = new HtmTransaction(wax);
 
+    const holder = CTokensProvider.getOperationalPublicKey()!;
+
     l2Transaction.pushOperation({
       token_transform_operation: {
-        holder: tokensStore.wallet.publicKey,
+        holder,
         receiver: stakeForm.value.receiver || undefined,
         amount: {
           amount: stakeForm.value.amount,
@@ -561,7 +577,11 @@ const handleUnstake = async () => {
         };
 
         // Reload user balance
-        await tokensStore.loadBalances(true);
+        await Promise.allSettled([
+          tokensStore.loadBalances(true),
+          loadTokenDetails(),
+          loadTopHolders()
+        ]);
         userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
       }
     );
@@ -751,10 +771,22 @@ onMounted(async () => {
               </Avatar>
 
               <div class="flex-1 min-w-0">
-                <div class="flex flex-col sm:flex-row sm:items-center gap-3 mb-3">
+                <div class="flex flex-col sm:flex-row sm:items-center gap-2 mb-3">
                   <h1 class="text-2xl sm:text-3xl font-bold text-foreground">
                     {{ tokenName }}
                   </h1>
+                  <span
+                    v-if="token.is_nft"
+                    class="inline-flex items-center rounded-md bg-purple-500/10 text-[16px]/[18px] px-2 font-medium text-purple-500 border border-purple-500/20"
+                  >
+                    nft
+                  </span>
+                  <span
+                    v-if="isStaked"
+                    class="inline-flex items-center rounded-md bg-blue-500/10  text-[16px]/[18px] px-2 font-medium text-blue-500 border border-blue-500/20"
+                  >
+                    staked
+                  </span>
                 </div>
 
                 <p
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index ae622c8..69d3e8d 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -44,7 +44,7 @@ const cTokensProvider = shallowRef<CTokensProvider | undefined>(undefined);
 
 // Helper functions for token transformation
 export const isVesting = (nai: string, precision: number): boolean =>
-  (((Number(nai.slice(2, -1)) << 5) | 0x10 | precision) & 0x20) !== 0;
+  (((BigInt(nai.slice(2, -1)) << 5n) | 0x10n | BigInt(precision)) & 0x20n) !== 0n;
 
 const formatAsset = async (value: string | bigint, precision: number, name?: string): Promise<string> => {
   const wax = await getWax();
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index 0978b64..6121c88 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -66,8 +66,8 @@ const dammDigit = (str: string) => {
   return row.toString();
 };
 
-const assetNumFromNAI = (nai: string, precision: number): number => {
-  return (Number.parseInt(nai.slice(2, -1)) << 5) | 0x10 | precision;
+const assetNumFromNAI = (nai: string, precision: number): bigint => {
+  return (BigInt(Number.parseInt(nai.slice(2, -1))) << 5n) | 0x10n | BigInt(precision);
 };
 
 const generateRandomNAI = (symbol: string): string => {
@@ -92,9 +92,9 @@ const generateRandomNAI = (symbol: string): string => {
 };
 
 export const toVesting = (nai: string, precision: number): string => {
-  const vestingNum = assetNumFromNAI(nai, precision) ^ 0x20;
+  const vestingNum = assetNumFromNAI(nai, precision) ^ 0x20n;
 
-  const naiVesting = (vestingNum >> 5).toString().padStart(8, '0');
+  const naiVesting = (vestingNum >> 5n).toString().padStart(8, '0');
 
   return `@@${naiVesting}${dammDigit(naiVesting)}`;
 };
@@ -183,9 +183,11 @@ export const transferNAIToken = async (params: TokenTransferParams) => {
   // Create Layer 2 HTM transaction for token transfer
   const l2Transaction = new HtmTransaction(wax);
 
+  const sender = CTokensProvider.getOperationalPublicKey()!;
+
   l2Transaction.pushOperation({
     token_transfer_operation: {
-      sender: tokensStore.wallet.publicKey!,
+      sender,
       receiver: params.to,
       amount: {
         amount: params.amount,
-- 
GitLab


From 2fb8df99f8761d879b5748a4bd597f777bd86bb3 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Mon, 27 Oct 2025 11:36:52 +0100
Subject: [PATCH 049/102] Partially refactor L2 operations broadcasting code

---
 .../utilcards/SignTransactionCard.vue         |   1 +
 src/pages/tokens/create.vue                   |  94 ++--
 src/pages/tokens/edit.vue                     |  49 +-
 src/pages/tokens/my-balance.vue               |  99 ++--
 src/pages/tokens/register-account.vue         |  81 ++--
 src/pages/tokens/token.vue                    | 248 ++++------
 src/stores/tokens.store.ts                    |  48 +-
 src/utils/ctokens-api.ts                      | 309 ------------
 src/utils/htm-utils.ts                        | 218 ---------
 src/utils/htm.ts                              | 453 ------------------
 src/utils/nai-tokens.ts                       | 382 +--------------
 src/utils/transaction-status.ts               | 128 +++--
 12 files changed, 369 insertions(+), 1741 deletions(-)
 delete mode 100644 src/utils/ctokens-api.ts
 delete mode 100644 src/utils/htm-utils.ts
 delete mode 100644 src/utils/htm.ts

diff --git a/src/components/utilcards/SignTransactionCard.vue b/src/components/utilcards/SignTransactionCard.vue
index e23afcb..a296e33 100644
--- a/src/components/utilcards/SignTransactionCard.vue
+++ b/src/components/utilcards/SignTransactionCard.vue
@@ -5,6 +5,7 @@ import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
+import { AlertCircle } from 'lucide-vue-next';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index c3c5c3f..728df6c 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ITransaction } from '@hiveio/wax';
 import {
   mdiCurrencyUsd,
   mdiRefresh,
@@ -6,7 +7,7 @@ import {
   mdiRocket,
   mdiLoading
 } from '@mdi/js';
-import { HtmTransaction, type asset, type asset_definition } from '@mtyszczak-cargo/htm';
+import type { asset_metadata_update, htm_operation, asset, asset_definition } from '@mtyszczak-cargo/htm';
 import { computed, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
@@ -26,7 +27,6 @@ import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
-import { parseAssetAmount } from '@/utils/htm-utils';
 import { generateNAI as generateHTMNAI, toVesting } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
@@ -160,6 +160,12 @@ const copyNAI = async () => {
   }
 };
 
+const parseAssetAmount = (amountStr: string, precision: number): string => {
+  const [integerPart, fractionalPart = ''] = amountStr.split('.');
+  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
+  return integerPart + normalizedFractional;
+};
+
 // Create token using HTM
 const createToken = async () => {
   if (!isFormValid.value) {
@@ -229,62 +235,44 @@ const createToken = async () => {
       others_can_stake: othersCanStake.value,
       others_can_unstake: othersCanUnstake.value
     };
-
-    // Set proxy account for HTM transactions
-    HtmTransaction.HiveProxyAccount = settingsStore.settings.account!;
-
-    // Create Layer 2 HTM transaction for user signup
-    const l2Transaction = new HtmTransaction(wax);
-
-    l2Transaction.pushOperation({
-      asset_definition_operation: assetDefinition
-    });
-
-    l2Transaction.pushOperation({
-      asset_metadata_update_operation: {
-        identifier: identifierVesting,
-        owner,
-        metadata: {
-          items: [
-            { key: 'name', value: assetTokenName },
-            { key: 'symbol', value: tokenSymbol.value.trim() },
-            { key: 'description', value: tokenDescription.value.trim() }
-          ]
-        }
-      }
-    });
-
-    await tokensStore.wallet!.signTransaction(l2Transaction);
-
-    // Create Layer 1 transaction and broadcast
-    const l1Transaction = await wax.createTransaction();
-    l1Transaction.pushOperation({
-      transfer_operation: {
-        from: settingsStore.settings.account!,
-        to: 'htm.fee',
-        amount: wax.hiveCoins(1),
-        memo: `${assetTokenName} creation fee`
+    const modifyVestingDefinition: asset_metadata_update = {
+      identifier: identifierVesting,
+      owner,
+      metadata: {
+        items: [
+          { key: 'name', value: assetTokenName },
+          { key: 'symbol', value: tokenSymbol.value.trim() },
+          { key: 'description', value: tokenDescription.value.trim() }
+        ]
       }
-    });
-    l1Transaction.pushOperation(l2Transaction);
-
-    // Sign Layer 1 transaction with the Hive active key
-    await walletStore.wallet!.signTransaction(l1Transaction);
-
-    // Broadcast the transaction
-    await wax.broadcast(l1Transaction);
+    };
 
     // Wait for transaction status
     await waitForTransactionStatus(
-      l1Transaction.legacy_id,
-      1, // First we have transfer, than HTM operation
-      'Token creation',
-      async () => {
-        // Success, reset form
-        await router.push(`/tokens/token?nai=${generatedNAI.value}&precision=${precision.value}`);
-        resetForm();
-      }
+      (tx: ITransaction) => {
+        tx.pushOperation({
+          transfer_operation: {
+            from: settingsStore.settings.account!,
+            to: 'htm.fee',
+            amount: wax.hiveCoins(1),
+            memo: `${assetTokenName} creation fee`
+          }
+        });
+
+        return [
+          { asset_definition_operation: assetDefinition } satisfies htm_operation,
+          { asset_metadata_update_operation: modifyVestingDefinition } satisfies htm_operation
+        ];
+      },
+      'Token creation'
     );
+
+    const redirectUrl = `/tokens/token?nai=${generatedNAI.value}&precision=${precision.value}`;
+
+    resetForm();
+
+    // Success, reset form
+    await router.push(redirectUrl);
   } catch (error) {
     toastError('Failed to create token', error);
   } finally {
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index 8d270a1..bfe15c2 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { mdiArrowLeft, mdiContentSave, mdiLoading } from '@mdi/js';
+import type { htm_operation } from '@mtyszczak-cargo/htm';
 import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
@@ -150,31 +151,37 @@ const handleUpdateToken = async () => {
       website: form.value.website.trim()
     };
 
-    // Call store method to update token metadata
-    const txId = await tokensStore.updateTokenMetadata(
-      token.value.nai!,
-      token.value.precision!,
-      metadata
-    );
-
     // Wait for transaction status
     await waitForTransactionStatus(
-      txId,
-      0,
-      'Token metadata update',
-      async () => {
-        // Refresh token data after update
-        await tokensStore.loadRegisteredTokens(token.value!.nai, token.value!.precision, 1, true);
-
-        router.push({
-          path: '/tokens/token',
-          query: {
-            nai: token.value!.nai,
-            precision: token.value!.precision
+      () => ([{
+        asset_metadata_update_operation: {
+          identifier: {
+            amount: '0',
+            nai: token.value!.nai!,
+            precision: token.value!.precision!
+          },
+          owner: CTokensProvider.getOperationalPublicKey()!,
+          metadata: {
+            items: Object.entries(metadata).map(([key, value]) => ({
+              key,
+              value
+            }))
           }
-        });
-      }
+        }
+      } satisfies htm_operation]),
+      'Token metadata update'
     );
+
+    // Refresh token data after update
+    await tokensStore.loadRegisteredTokens(token.value!.nai, token.value!.precision, 1, true);
+
+    router.push({
+      path: '/tokens/token',
+      query: {
+        nai: token.value!.nai,
+        precision: token.value!.precision
+      }
+    });
   } catch (error) {
     toastError('Failed to update token metadata', error);
   } finally {
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 49cdc63..5584c8e 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -9,6 +9,7 @@ import {
   mdiWallet,
   mdiImageMultiple
 } from '@mdi/js';
+import type { htm_operation } from '@mtyszczak-cargo/htm';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
@@ -23,11 +24,12 @@ import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useTokensStore } from '@/stores/tokens.store';
-import { getCTokensApi, getUserOperationalKey, formatCTokenAmount } from '@/utils/ctokens-api';
-import { transferNAIToken, stakeNAIToken, toVesting } from '@/utils/nai-tokens';
+import { getWax } from '@/stores/wax.store';
+import { toVesting } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppBalance } from '@/utils/wallet/ctokens/api';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 const router = useRouter();
 const tokensStore = useTokensStore();
@@ -168,6 +170,12 @@ const aggregatedBalances = computed<AggregatedBalance[]>(() => {
   return order.map(key => map.get(key)!);
 });
 
+// Reformat this code and use wax one:
+const formatCTokenAmount = (amount: string, precision: number): string => {
+  const num = parseFloat(amount);
+  return (num / Math.pow(10, precision)).toFixed(precision);
+};
+
 const formatBalanceAmount = (amount: string | undefined, precision: number | undefined): string => {
   if (!amount || amount === '0') return '0';
   return formatCTokenAmount(amount, precision ?? 0);
@@ -261,33 +269,30 @@ watch(searchQuery, () => {
 // Methods
 const loadAccountStatistics = async () => {
   try {
-    const cTokensApi = await getCTokensApi();
-    const operationalKey = await getUserOperationalKey();
+    const operationalKey = CTokensProvider.getOperationalPublicKey();
 
     if (!operationalKey) {
       console.warn('No operational key available');
       return;
     }
 
+    const wax = await getWax();
+
     // Get all tokens created by this user (owner field matches operational key)
-    const allTokens = await cTokensApi.getRegisteredTokens();
+    const allTokens = await wax.restApi.ctokensApi.registeredTokens({});
     const createdTokens = allTokens.filter(token => token.owner === operationalKey);
     createdTokensCount.value = createdTokens.length;
 
     // Get owned tokens (tokens with balance)
-    const balances = await cTokensApi.getAccountBalances(operationalKey);
+    const balances = await wax.restApi.ctokensApi.balances({ user: operationalKey });
     const uniqueBalanceKeys = new Set<string>();
     const stakedTokenKeys = new Set<string>();
 
-    balances.forEach((balance) => {
-      if (!balance.nai) return;
-      const precision = balance.precision ?? 0;
-      const baseNai = isVesting(balance.nai, precision) ? toVesting(balance.nai, precision) : balance.nai;
-      const key = `${baseNai}:${precision}`;
-      uniqueBalanceKeys.add(key);
-
-      if (isVesting(balance.nai, precision))
-        stakedTokenKeys.add(key);
+    balances.forEach(({ liquid, vesting }) => {
+      if (liquid)
+        uniqueBalanceKeys.add(`${liquid.nai}:${liquid.precision}`);
+      if (vesting)
+        stakedTokenKeys.add(`${vesting.nai}:${vesting.precision}`);
     });
 
     ownedTokensCount.value = uniqueBalanceKeys.size;
@@ -340,26 +345,26 @@ const transferTokens = async () => {
   try {
     isTransferLoading.value = true;
 
-    const txId = await transferNAIToken({
-      to: transferRecipient.value,
-      amount: transferAmount.value,
-      nai: selectedTokenForTransfer.value.nai || '',
-      precision: selectedTokenForTransfer.value.precision || 0,
-      memo: transferMemo.value || undefined
-    });
-
     // Wait for transaction status
     await waitForTransactionStatus(
-      txId,
-      0,
-      'Transfer',
-      async () => {
-        // Refresh balances on success
-        await loadAccountBalances();
-        isTransferDialogOpen.value = false;
-      }
+      () => ([{
+        token_transfer_operation: {
+          receiver: transferRecipient.value,
+          sender: CTokensProvider.getOperationalPublicKey()!,
+          amount: {
+            amount: transferAmount.value,
+            nai: selectedTokenForTransfer.value?.nai || '',
+            precision: selectedTokenForTransfer.value?.precision || 0
+          },
+          memo: transferMemo.value
+        }
+      } satisfies htm_operation]),
+      'Transfer'
     );
 
+    // Refresh balances on success
+    await loadAccountBalances();
+    isTransferDialogOpen.value = false;
   } catch (error) {
     toastError('Failed to transfer tokens', error);
   } finally {
@@ -390,26 +395,24 @@ const transformTokens = async () => {
   try {
     isTransformLoading.value = true;
 
-    const txId = await stakeNAIToken({
-      amount: transformAmount.value,
-      nai: selectedToken.value.nai || '',
-      precision: selectedToken.value.precision || 0,
-      direction: transformDirection.value === 'liquid-to-staked' ? 'stake' : 'unstake'
-    });
-
-    const action = transformDirection.value === 'liquid-to-staked' ? 'Stake' : 'Unstake';
-
     // Wait for transaction status
     await waitForTransactionStatus(
-      txId,
-      0,
-      action,
-      async () => {
-        // Refresh balances on success
-        await loadAccountBalances();
-        isTransformDialogOpen.value = false;
-      }
+      () => ([{
+        token_transform_operation: {
+          amount: {
+            amount: transformAmount.value,
+            nai: transformDirection.value === 'liquid-to-staked' ? selectedToken.value!.nai! : toVesting(selectedToken.value!.nai!, selectedToken.value!.precision!),
+            precision: selectedToken.value!.precision!
+          },
+          holder: CTokensProvider.getOperationalPublicKey()!
+        }
+      } satisfies htm_operation]),
+      transformDirection.value === 'liquid-to-staked' ? 'Stake' : 'Unstake'
     );
+
+    // Refresh balances on success
+    await loadAccountBalances();
+    isTransformDialogOpen.value = false;
   } catch (error) {
     toastError('Failed to transform tokens', error);
   } finally {
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index bf3a4af..fcd7fb7 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -7,7 +7,7 @@ import {
   mdiNumeric3Circle,
   mdiRefresh
 } from '@mdi/js';
-import { HtmTransaction } from '@mtyszczak-cargo/htm';
+import type { htm_operation } from '@mtyszczak-cargo/htm';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
@@ -265,8 +265,6 @@ const registerHTMAccount = async () => {
       generatedKeys.value.managementPrivateKey
     );
 
-    console.log(keys);
-
     await CTokensProvider.login(
       registrationData.value.walletPassword
     );
@@ -274,60 +272,39 @@ const registerHTMAccount = async () => {
     if (typeof settingsStore.settings.account === 'undefined' || walletStore.isL2Wallet)
       throw new Error('Setting HTM Account via proxy is not supported yet. Please log in using your L1 wallet first.');
 
-    // Set proxy account for HTM transactions
-    HtmTransaction.HiveProxyAccount = settingsStore.settings.account;
-
-    // Create Layer 2 HTM transaction for user signup
-    const l2Transaction = new HtmTransaction(wax);
-
-    l2Transaction.pushOperation({
-      user_signup_operation: {
-        hive_account: settingsStore.settings.account,
-        management_key: keys.management!,
-        operational_key: keys.operational
-      }
-    }).pushOperation({
-      user_metadata_update_operation: {
-        user: keys.operational,
-        metadata: {
-          items: [
-            { key: 'name', value: registrationData.value.name.trim() },
-            ...(registrationData.value.about.trim() ? [{ key: 'about', value: registrationData.value.about.trim() }] : []),
-            ...(registrationData.value.website.trim() ? [{ key: 'website', value: registrationData.value.website.trim() }] : []),
-            ...(registrationData.value.profile_image.trim() ? [{ key: 'profile_image', value: registrationData.value.profile_image.trim() }] : [])
-          ]
-        }
-      }
-    });
-
-    const walletL2 = await CTokensProvider.for(wax, 'owner', false);
-
-    await walletL2.signTransaction(l2Transaction);
-
-    // Create Layer 1 transaction and broadcast
-    const l1Transaction = await wax.createTransaction();
-    l1Transaction.pushOperation(l2Transaction);
-
-    // Sign Layer 1 transaction with the Hive posting key
-    await walletStore.createWalletFor(settingsStore.settings, 'posting');
-    await walletStore.wallet!.signTransaction(l1Transaction);
-
-    // Broadcast the transaction
-    await wax.broadcast(l1Transaction);
+    const explicitWallet = await CTokensProvider.for(wax, 'owner', false);
 
     // Wait for transaction status
     await waitForTransactionStatus(
-      l1Transaction.legacy_id,
-      0,
+      () => ([{
+        user_signup_operation: {
+          hive_account: settingsStore.settings.account,
+          management_key: keys.management!,
+          operational_key: keys.operational
+        }
+      } satisfies htm_operation, {
+        user_metadata_update_operation: {
+          user: keys.operational,
+          metadata: {
+            items: [
+              { key: 'name', value: registrationData.value.name.trim() },
+              ...(registrationData.value.about.trim() ? [{ key: 'about', value: registrationData.value.about.trim() }] : []),
+              ...(registrationData.value.website.trim() ? [{ key: 'website', value: registrationData.value.website.trim() }] : []),
+              ...(registrationData.value.profile_image.trim() ? [{ key: 'profile_image', value: registrationData.value.profile_image.trim() }] : [])
+            ]
+          }
+        }
+      } satisfies htm_operation]),
       'HTM account registration',
-      async () => {
-        // After successful registration, redirect to login
-        showRegistrationForm.value = false;
-        showHTMLogin();
-
-        await tokensStore.reset(walletL2);
-      }
+      true,
+      explicitWallet
     );
+
+    tokensStore.reset(await CTokensProvider.for(wax, 'posting', false));
+
+    // After successful registration, redirect to login
+    showRegistrationForm.value = false;
+    showHTMLogin();
   } catch (error) {
     toastError('Failed to create HTM account', error);
   } finally {
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 6ebd123..b52ecf5 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { mdiPencilOutline, mdiContentCopy, mdiCheck } from '@mdi/js';
-import { HtmTransaction } from '@mtyszczak-cargo/htm';
+import type { htm_operation } from '@mtyszczak-cargo/htm';
 import { onMounted, ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
+import { AlertDescription, Alert } from '@/components/ui/alert';
 import HTMView from '@/components/HTMView.vue';
 import MemoInput from '@/components/MemoInput.vue';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
@@ -14,12 +15,11 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useSettingsStore } from '@/stores/settings.store';
-import { isVesting, useTokensStore } from '@/stores/tokens.store';
+import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
-import { isValidPublicKey } from '@/utils/htm';
-import { transferNAIToken } from '@/utils/nai-tokens';
+import { isVesting } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppToken, CtokensAppBalance, CtokensAppTopHolder } from '@/utils/wallet/ctokens/api';
@@ -74,6 +74,28 @@ const isTokenOwner = computed(() => {
   return token.value.owner === CTokensProvider.getOperationalPublicKey();
 });
 
+// Connect to HTM
+const connectToHTM = async () => {
+  try {
+    const hasStoredWallet = await CTokensProvider.hasWallet();
+
+    if (settingsStore.settings?.account || hasStoredWallet) {
+      walletStore.isProvideWalletPasswordModalOpen = true;
+      return;
+    }
+
+    router.push('/tokens/register-account');
+  } catch (error) {
+    toastError('Failed to connect to HTM', error);
+  }
+};
+
+const isValidPublicKey = (key: string): boolean => {
+  // Simple validation for Hive public key (starts with STM and has correct length)
+  const hivePublicKeyRegex = /^STM[0-9A-Za-z]{50}$/;
+  return hivePublicKeyRegex.test(key);
+};
+
 // Validate recipient address (must be a public key)
 const isRecipientValid = computed(() => {
   if (!transferForm.value.to) return false;
@@ -346,38 +368,37 @@ const handleTransfer = async () => {
   try {
     isTransferring.value = true;
 
-    // Transfer the tokens using transferNAIToken
-    const txId = await transferNAIToken({
-      to: transferForm.value.to,
-      amount: transferForm.value.amount,
-      nai: token.value.nai!,
-      precision: token.value.precision || 0,
-      memo: transferForm.value.memo || undefined
-    });
-
     // Wait for transaction status
     await waitForTransactionStatus(
-      txId,
-      0,
-      'Transfer',
-      async () => {
-        // Reset form on success
-        transferForm.value = {
-          to: '',
-          amount: '',
-          memo: ''
-        };
-
-        // Reload user balance
-        await Promise.allSettled([
-          tokensStore.loadBalances(true),
-          loadTokenDetails(),
-          loadTopHolders()
-        ]);
-        userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
-      }
+      () => ([{
+        token_transfer_operation: {
+          amount: {
+            amount: transferForm.value.amount,
+            nai: token.value!.nai!,
+            precision: token.value!.precision || 0
+          },
+          receiver: transferForm.value.to,
+          sender: CTokensProvider.getOperationalPublicKey()!,
+          memo: transferForm.value.memo
+        }
+      } satisfies htm_operation]),
+      'Transfer'
     );
 
+    // Reset form on success
+    transferForm.value = {
+      to: '',
+      amount: '',
+      memo: ''
+    };
+
+    // Reload user balance
+    await Promise.allSettled([
+      tokensStore.loadBalances(true),
+      loadTokenDetails(),
+      loadTopHolders()
+    ]);
+    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
   } catch (error) {
     toastError('Transfer failed', error);
   } finally {
@@ -424,64 +445,35 @@ const handleStake = async () => {
   try {
     isStaking.value = true;
 
-    const wax = await getWax();
-
-    // Set proxy account for HTM transactions
-    HtmTransaction.HiveProxyAccount = settingsStore.settings.account!;
-
-    // Create Layer 2 HTM transaction for token transform (stake)
-    const l2Transaction = new HtmTransaction(wax);
-
-    const holder = CTokensProvider.getOperationalPublicKey()!;
-
-    l2Transaction.pushOperation({
-      token_transform_operation: {
-        holder,
-        receiver: stakeForm.value.receiver || undefined,
-        amount: {
-          amount: stakeForm.value.amount,
-          nai: token.value.nai!,
-          precision: token.value.precision || 0
-        }
-      }
-    });
-
-    if (typeof settingsStore.settings.account === 'undefined' || walletStore.isL2Wallet)
-      throw new Error('Staking via proxy is not supported yet. Please log in using your L1 wallet first.');
-
-    await tokensStore.wallet.signTransaction(l2Transaction);
-
-    // Create Layer 1 transaction and broadcast
-    const l1Transaction = await wax.createTransaction();
-    l1Transaction.pushOperation(l2Transaction);
-
-    await walletStore.wallet!.signTransaction(l1Transaction);
-
-    // Broadcast the transaction
-    await wax.broadcast(l1Transaction);
-
     // Wait for transaction status
     await waitForTransactionStatus(
-      l1Transaction.legacy_id,
-      0,
-      'Stake',
-      async () => {
-        // Reset form on success
-        stakeForm.value = {
-          amount: '',
-          receiver: ''
-        };
-
-        // Reload user balance
-        await Promise.allSettled([
-          tokensStore.loadBalances(true),
-          loadTokenDetails(),
-          loadTopHolders()
-        ]);
-        userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
-      }
+      () => ([{
+        token_transform_operation: {
+          holder: CTokensProvider.getOperationalPublicKey()!,
+          receiver: stakeForm.value.receiver || undefined,
+          amount: {
+            amount: stakeForm.value.amount,
+            nai: token.value!.nai!,
+            precision: token.value!.precision || 0
+          }
+        }
+      } satisfies htm_operation]),
+      'Stake'
     );
 
+    // Reset form on success
+    stakeForm.value = {
+      amount: '',
+      receiver: ''
+    };
+
+    // Reload user balance
+    await Promise.allSettled([
+      tokensStore.loadBalances(true),
+      loadTokenDetails(),
+      loadTopHolders()
+    ]);
+    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
   } catch (error) {
     toastError('Staking failed', error);
   } finally {
@@ -528,63 +520,35 @@ const handleUnstake = async () => {
   try {
     isUnstaking.value = true;
 
-    const wax = await getWax();
-
-    // Set proxy account for HTM transactions
-    HtmTransaction.HiveProxyAccount = settingsStore.settings.account!;
-
-    if (typeof settingsStore.settings.account === 'undefined' || walletStore.isL2Wallet)
-      throw new Error('Unstaking via proxy is not supported yet. Please log in using your L1 wallet first.');
-
-    // Create Layer 2 HTM transaction for token transform (unstake)
-    const l2Transaction = new HtmTransaction(wax);
-
-    const holder = CTokensProvider.getOperationalPublicKey()!;
-
-    l2Transaction.pushOperation({
-      token_transform_operation: {
-        holder,
-        receiver: stakeForm.value.receiver || undefined,
-        amount: {
-          amount: stakeForm.value.amount,
-          nai: token.value.nai!,
-          precision: token.value.precision || 0
-        }
-      }
-    });
-
-    await tokensStore.wallet.signTransaction(l2Transaction);
-
-    // Create Layer 1 transaction and broadcast
-    const l1Transaction = await wax.createTransaction();
-    l1Transaction.pushOperation(l2Transaction);
-
-    await walletStore.wallet!.signTransaction(l1Transaction);
-
-    // Broadcast the transaction
-    await wax.broadcast(l1Transaction);
-
     // Wait for transaction status
     await waitForTransactionStatus(
-      l1Transaction.legacy_id,
-      0,
-      'Unstake',
-      async () => {
-        // Reset form on success
-        stakeForm.value = {
-          amount: '',
-          receiver: ''
-        };
-
-        // Reload user balance
-        await Promise.allSettled([
-          tokensStore.loadBalances(true),
-          loadTokenDetails(),
-          loadTopHolders()
-        ]);
-        userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
-      }
+      () => ([{
+        token_transform_operation: {
+          holder: CTokensProvider.getOperationalPublicKey()!,
+          receiver: stakeForm.value.receiver || undefined,
+          amount: {
+            amount: stakeForm.value.amount,
+            nai: token.value!.nai!,
+            precision: token.value!.precision || 0
+          }
+        }
+      } satisfies htm_operation]),
+      'Unstake'
     );
+
+    // Reset form on success
+    stakeForm.value = {
+      amount: '',
+      receiver: ''
+    };
+
+    // Reload user balance
+    await Promise.allSettled([
+      tokensStore.loadBalances(true),
+      loadTokenDetails(),
+      loadTopHolders()
+    ]);
+    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
   } catch (error) {
     toastError('Unstaking failed', error);
   } finally {
@@ -993,7 +957,7 @@ onMounted(async () => {
                 </p>
                 <Button
                   size="lg"
-                  @click="$router.push('/')"
+                  @click="connectToHTM"
                 >
                   Connect Wallet
                 </Button>
@@ -1201,7 +1165,7 @@ onMounted(async () => {
                 </p>
                 <Button
                   size="lg"
-                  @click="$router.push('/')"
+                  @click="connectToHTM"
                 >
                   Connect Wallet
                 </Button>
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 69d3e8d..3de33ba 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -2,10 +2,7 @@ import { defineStore } from 'pinia';
 import { shallowRef } from 'vue';
 
 import { getWax } from '@/stores/wax.store';
-import {
-  getCTokensApi,
-  getUserOperationalKey
-} from '@/utils/ctokens-api';
+import { isVesting } from '@/utils/nai-tokens';
 import type {
   CtokensAppArrayOfBalances,
   CtokensAppArrayOfTokens,
@@ -42,10 +39,6 @@ export interface CTokenDisplay {
 
 const cTokensProvider = shallowRef<CTokensProvider | undefined>(undefined);
 
-// Helper functions for token transformation
-export const isVesting = (nai: string, precision: number): boolean =>
-  (((BigInt(nai.slice(2, -1)) << 5n) | 0x10n | BigInt(precision)) & 0x20n) !== 0n;
-
 const formatAsset = async (value: string | bigint, precision: number, name?: string): Promise<string> => {
   const wax = await getWax();
   const formatted = wax.formatter.formatNumber(value, precision);
@@ -113,7 +106,7 @@ export const useTokensStore = defineStore('tokens', {
   },
   actions: {
     async loadBalances (forceRefresh = false) {
-      const operationalKey = await getUserOperationalKey();
+      const operationalKey = CTokensProvider.getOperationalPublicKey();
 
       if (!operationalKey) {
         this.lastError = 'No operational key available';
@@ -126,17 +119,12 @@ export const useTokensStore = defineStore('tokens', {
       this.lastError = null;
 
       try {
-        // Test API connectivity first
-        const cTokensApi = await getCTokensApi();
-        const isApiAvailable = await cTokensApi.testConnection();
-
-        if (!isApiAvailable)
-          throw new Error('ctokens-api is not available. Using fallback data.');
+        const wax = await getWax();
 
         // Get balances from ctokens-api
-        const cTokenBalances = await cTokensApi.getAccountBalances(operationalKey);
+        const cTokenBalances = await wax.restApi.ctokensApi.balances({ user: operationalKey, page: 1 });
 
-        this.balances = cTokenBalances;
+        this.balances = cTokenBalances.flatMap(balance => ([balance.liquid!, balance.vesting!]));
       } catch (error) {
         console.error('Failed to load balances:', error);
         this.lastError = error instanceof Error ? error.message : 'Failed to load balances';
@@ -152,15 +140,10 @@ export const useTokensStore = defineStore('tokens', {
       this.lastError = null;
 
       try {
-        // Test API connectivity first
-        const cTokensApi = await getCTokensApi();
-        const isApiAvailable = await cTokensApi.testConnection();
-
-        if (!isApiAvailable)
-          throw new Error('ctokens-api is not available. Using fallback data.');
+        const wax = await getWax();
 
         // Get registered tokens from ctokens-api
-        const tokens = await cTokensApi.getRegisteredTokens();
+        const tokens = await wax.restApi.ctokensApi.registeredTokens({ });
 
         // Filter by creator if provided
         this.tokenDefinitions = creator ? tokens.filter((token: CtokensAppToken) => token.owner === creator) : tokens;
@@ -204,10 +187,9 @@ export const useTokensStore = defineStore('tokens', {
       this.lastError = null;
 
       try {
-        const cTokensApi = await getCTokensApi();
-
+        const wax = await getWax();
         // Get raw tokens from API
-        const tokens = await cTokensApi.getRegisteredTokens(nai, precision) as Required<CtokensAppToken>[];
+        const tokens = await wax.restApi.ctokensApi.registeredTokens({ nai, precision }) as Required<CtokensAppToken>[];
 
         // Transform tokens to display format
         const transformedTokens = await Promise.all(
@@ -247,16 +229,16 @@ export const useTokensStore = defineStore('tokens', {
       );
     },
     async getBalanceHistory (nai: string, precision: number, page = 1): Promise<CtokensAppBalanceHistory[]> {
-      const operationalKey = await getUserOperationalKey();
+      const operationalKey = CTokensProvider.getOperationalPublicKey();
       if (!operationalKey)
         throw new Error('No operational key available');
 
-      const cTokensApi = await getCTokensApi();
-      return cTokensApi.getBalanceHistory(operationalKey, nai, precision, page);
+      const wax = await getWax();
+      return wax.restApi.ctokensApi.balanceHistory({ user: operationalKey, nai, precision, page });
     },
     async getTopHolders (nai: string, precision: number, page = 1): Promise<CtokensAppTopHolder[]> {
-      const cTokensApi = await getCTokensApi();
-      return cTokensApi.getTopHolders(nai, precision, page);
+      const wax = await getWax();
+      return wax.restApi.ctokensApi.topHolders({ nai, precision, page });
     },
     getTokenByNAI (nai: string): CtokensAppBalance | undefined {
       return this.balances.find(balance => balance.nai === nai);
@@ -279,7 +261,7 @@ export const useTokensStore = defineStore('tokens', {
       precision: number,
       metadata: Record<string, string>
     ): Promise<string> {
-      const operationalKey = await getUserOperationalKey();
+      const operationalKey = CTokensProvider.getOperationalPublicKey();
       if (!operationalKey)
         throw new Error('No operational key available');
 
diff --git a/src/utils/ctokens-api.ts b/src/utils/ctokens-api.ts
deleted file mode 100644
index 15c5b38..0000000
--- a/src/utils/ctokens-api.ts
+++ /dev/null
@@ -1,309 +0,0 @@
-import type { TWaxRestExtended, IHiveChainInterface } from '@hiveio/wax';
-
-import { getWax } from '@/stores/wax.store';
-import type {
-  CtokensAppBalance,
-  CtokensAppBalanceHistory,
-  CtokensAppTransactionStatusResponse,
-  CtokensAppArrayOfAccountBalances,
-  CtokensAppArrayOfTokens,
-  CtokensAppArrayOfUsers,
-  CtokensAppArrayOfTopHolders
-} from '@/utils/wallet/ctokens/api';
-
-import type RestApi from '../utils/wallet/ctokens/api';
-
-
-// Types based on ctokens-api OpenAPI specification
-
-export interface CTokenBalance {
-  nai: string;
-  amount: string;
-  precision: number;
-  metadata?: Record<string, unknown>;
-}
-
-export interface CToken {
-  nai: string;
-  owner: string;
-  precision: number;
-  total_supply: string;
-  max_supply: string;
-  capped: boolean;
-  others_can_stake: boolean;
-  others_can_unstake: boolean;
-  is_nft: boolean;
-  metadata?: Record<string, unknown>;
-}
-
-export interface CTokenUser {
-  management_key: string;
-  operational_key: string;
-  hive_account?: string;
-  metadata?: Record<string, unknown>;
-}
-
-export interface CTokenTopHolder {
-  rank: number;
-  user: string;
-  amount: string;
-  metadata?: Record<string, unknown>;
-}
-
-export interface CTokenBalanceHistory {
-  history_seq_no: number;
-  balance: string;
-  prev_balance: string;
-  balance_change: string;
-  timestamp: string;
-}
-
-export interface CTokenTransactionStatus {
-  code: string;
-  details: string;
-  hint: string;
-  message: string;
-}
-
-export type TransactionStatus = 'pending' | 'confirmed' | 'failed';
-
-export interface TransactionStatusResult {
-  status: TransactionStatus;
-  httpCode: number;
-  data?: CTokenTransactionStatus;
-  error?: string;
-}
-
-/**
- * Custom Tokens API Service
- * Provides methods to interact with the ctokens-api through wax extension
- */
-export class CTokensApiService {
-  private readonly extendedChain: TWaxRestExtended<typeof RestApi, IHiveChainInterface>;
-
-  public constructor (extendedChain: TWaxRestExtended<typeof RestApi, IHiveChainInterface>) {
-    this.extendedChain = extendedChain;
-  }
-
-  /**
-   * Test API connectivity
-   */
-  public async testConnection (): Promise<boolean> {
-    try {
-      await this.extendedChain.restApi.ctokensApi.lastSyncedBlock();
-      return true;
-    } catch (_error) {
-      return false;
-    }
-  }
-
-  /**
-   * Get API version
-   */
-  public async getVersion (): Promise<string> {
-    return await this.extendedChain.restApi.ctokensApi.version();
-  }
-
-  /**
-   * Get last synced block number
-   */
-  public async getLastSyncedBlock (): Promise<number> {
-    return await this.extendedChain.restApi.ctokensApi.lastSyncedBlock();
-  }
-
-  /**
-   * Get account balances for a user
-   */
-  public async getAccountBalances (user: string, page: number = 1): Promise<CtokensAppBalance[]> {
-    const response = await this.extendedChain.restApi.ctokensApi.balances({ user, page }) as CtokensAppArrayOfAccountBalances;
-
-    return response.flatMap((entry) => {
-      const balances: CtokensAppBalance[] = [];
-
-      if (entry.liquid)
-        balances.push(entry.liquid);
-
-      if (entry.vesting)
-        balances.push(entry.vesting);
-
-      return balances;
-    });
-  }
-
-  /**
-   * Get balance history for a specific token and user
-   */
-  public async getBalanceHistory (
-    user: string,
-    nai: string,
-    precision: number,
-    page: number = 1
-  ): Promise<CtokensAppBalanceHistory[]> {
-    return await this.extendedChain.restApi.ctokensApi.balanceHistory({
-      user,
-      nai,
-      precision,
-      page
-    });
-  }
-
-  /**
-   * Get list of registered tokens
-   */
-  public async getRegisteredTokens (nai?: string, precision?: number): Promise<CtokensAppArrayOfTokens> {
-    const params: Record<string, string | number> = {};
-    if (nai) params.nai = nai;
-    if (precision !== undefined) params.precision = precision;
-
-    return await this.extendedChain.restApi.ctokensApi.registeredTokens(params);;
-  }
-
-  /**
-   * Get list of registered users
-   */
-  public async getRegisteredUsers (user?: string): Promise<CtokensAppArrayOfUsers> {
-    const params: Record<string, string> = {};
-    if (user) params.user = user;
-
-    return await this.extendedChain.restApi.ctokensApi.registeredUsers(params);
-  }
-
-  /**
-   * Get top holders for a specific token
-   */
-  public async getTopHolders (nai: string, precision: number, page: number = 1): Promise<CtokensAppArrayOfTopHolders> {
-    return await this.extendedChain.restApi.ctokensApi.topHolders({
-      nai,
-      precision,
-      page
-    });
-  }
-
-  /**
-   * Get transaction status by reference ID
-   * Returns status based on API response:
-   * - API returns result: Transaction confirmed
-   * - API throws error: Transaction failed or pending
-   */
-  public async getTransactionStatus (refId: string): Promise<CtokensAppTransactionStatusResponse> {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    return await this.extendedChain.restApi.ctokensApi.status({ 'ref-id': refId });
-  }
-}
-
-// Lazy initialization to avoid top-level await
-let _cTokensApiInstance: CTokensApiService | null = null;
-
-// Get or create singleton instance
-export const getCTokensApi = async (): Promise<CTokensApiService> => {
-  if (!_cTokensApiInstance) {
-    const wax = await getWax();
-    _cTokensApiInstance = new CTokensApiService(wax);
-  }
-  return _cTokensApiInstance;
-};
-
-// Factory function to create instance with specific wax instance
-export const createCTokensApiService = (waxInstance: Awaited<ReturnType<typeof getWax>>): CTokensApiService => {
-  return new CTokensApiService(waxInstance);
-};
-
-/**
- * Enhanced token utilities that integrate with ctokens-api
- */
-
-/**
- * Format token amount with precision from ctokens-api
- */
-export const formatCTokenAmount = (amount: string, precision: number): string => {
-  const num = parseFloat(amount);
-  return (num / Math.pow(10, precision)).toFixed(precision);
-};
-
-/**
- * Parse token amount to API format (with precision)
- */
-export const parseCTokenAmount = (amount: string, precision: number): string => {
-  const num = parseFloat(amount);
-  return Math.floor(num * Math.pow(10, precision)).toString();
-};
-
-/**
- * Get token symbol from metadata
- */
-export const getTokenSymbol = (token: CToken): string => {
-  const metadata = token.metadata as { symbol?: string } | undefined;
-  return metadata?.symbol || token.nai;
-};
-
-/**
- * Get token name from metadata
- */
-export const getTokenName = (token: CToken): string => {
-  const metadata = token.metadata as { name?: string } | undefined;
-  return metadata?.name || token.nai;
-};
-
-/**
- * Get token description from metadata
- */
-export const getTokenDescription = (token: CToken): string => {
-  const metadata = token.metadata as { description?: string } | undefined;
-  return metadata?.description || '';
-};
-
-/**
- * Get token logo URL from metadata
- */
-export const getTokenLogoUrl = (token: CToken): string | undefined => {
-  const metadata = token.metadata as { logo_url?: string } | undefined;
-  return metadata?.logo_url;
-};
-
-/**
- * Check if token supports staking
- */
-export const canTokenStake = (token: CToken): boolean => {
-  return token.others_can_stake || token.others_can_unstake;
-};
-
-/**
- * Get user's operational key (for API calls)
- * Returns the operational public key from the user's wallet
- */
-export const getUserOperationalKey = async (): Promise<string> => {
-  // Import CTokensProvider to access the actual operational key from wallet
-  const { CTokensProvider } = await import('@/utils/wallet/ctokens/signer');
-
-  const operationalKey = CTokensProvider.getOperationalPublicKey();
-
-  if (!operationalKey) {
-    console.warn('No operational key available - user may not be logged in');
-    return '';
-  }
-
-  return operationalKey;
-};
-
-/**
- * Get user-friendly status message
- */
-export const getTransactionStatusMessage = (result: TransactionStatusResult): string => {
-  switch (result.status) {
-  case 'pending':
-    return 'Transaction is being processed...';
-  case 'confirmed':
-    return 'Transaction confirmed successfully!';
-  case 'failed':
-    return result.error || 'Transaction failed';
-  default:
-    return 'Unknown transaction status';
-  }
-};
-
-/**
- * Check if transaction status indicates completion (success or failure)
- */
-export const isTransactionComplete = (result: TransactionStatusResult): boolean => {
-  return result.status === 'confirmed' || result.status === 'failed';
-};
diff --git a/src/utils/htm-utils.ts b/src/utils/htm-utils.ts
deleted file mode 100644
index 82aad75..0000000
--- a/src/utils/htm-utils.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-import type { IBeekeeperUnlockedWallet } from '@hiveio/beekeeper/vite';
-import type { TPublicKey } from '@hiveio/wax';
-import { HtmTransaction } from '@mtyszczak-cargo/htm';
-
-import { getWax } from '@/stores/wax.store';
-
-import {
-  HTMTransactionBuilder,
-  type HTMUserSignupData,
-  type HTMAssetDefinitionData,
-  type HTMTokenTransferData,
-  type HTMUserMetadataUpdateData,
-  type HTMAssetMetadataUpdateData
-} from './htm';
-
-// Re-export types from htm.ts for convenience
-export type {
-  HTMUserSignupData,
-  HTMAssetDefinitionData,
-  HTMTokenTransferData,
-  HTMUserMetadataUpdateData,
-  HTMAssetMetadataUpdateData
-} from './htm';
-
-/**
- * Create and broadcast an HTM user signup transaction
- * This is the full implementation using HTM library and beekeeper wallets.
- */
-export async function createHTMUser (
-  signupData: HTMUserSignupData,
-  wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string
-): Promise<string> {
-  const wax = await getWax();
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = operationalAccount;
-
-  // Create L2 HTM transaction for user signup
-  const htmBuilder = await HTMTransactionBuilder.create();
-  htmBuilder.addUserSignup(signupData);
-  await htmBuilder.sign(wallet);
-
-  // Create L1 transaction to broadcast the HTM transaction
-  const l1Tx = await wax.createTransaction();
-  l1Tx.pushOperation(htmBuilder.getTransaction());
-  l1Tx.sign(wallet, signupData.operationalKey);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Tx);
-  return l1Tx.id.toString();
-}/**
- * Create and broadcast an HTM asset definition transaction
- * This is the full implementation using HTM library and beekeeper wallets.
- */
-export async function createHTMAsset (
-  assetData: HTMAssetDefinitionData,
-  wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string,
-  feeAmount = 1.0
-): Promise<string> {
-  const wax = await getWax();
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = operationalAccount;
-
-  // Create L2 HTM transaction for asset definition
-  const htmBuilder = await HTMTransactionBuilder.create();
-  htmBuilder.addAssetDefinition(assetData);
-  await htmBuilder.sign(wallet);
-
-  // Create L1 transaction with fee transfer and HTM operation
-  const l1Tx = await wax.createTransaction();
-
-  // Add fee transfer operation
-  l1Tx.pushOperation({
-    transfer_operation: {
-      from: operationalAccount,
-      to: 'fee.htm',
-      amount: wax.hiveCoins(feeAmount),
-      memo: 'L2 asset creation fee'
-    }
-  });
-
-  // Add HTM asset definition operation
-  l1Tx.pushOperation(htmBuilder.getTransaction());
-
-  // Sign with management key
-  l1Tx.sign(wallet, assetData.owner);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Tx);
-  return l1Tx.id.toString();
-}
-
-/**
- * Create and broadcast an HTM token transfer transaction
- * This is the full implementation using HTM library and beekeeper wallets.
- */
-export async function transferHTMToken (
-  transferData: HTMTokenTransferData,
-  wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string
-): Promise<string> {
-  const wax = await getWax();
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = operationalAccount;
-
-  // Create L2 HTM transaction for token transfer
-  const htmBuilder = await HTMTransactionBuilder.create();
-  htmBuilder.addTokenTransfer(transferData);
-  await htmBuilder.sign(wallet);
-
-  // Create L1 transaction to broadcast the HTM transaction
-  const l1Tx = await wax.createTransaction();
-  l1Tx.pushOperation(htmBuilder.getTransaction());
-  l1Tx.sign(wallet, transferData.sender);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Tx);
-  return l1Tx.id.toString();
-}
-
-/**
- * Update HTM user metadata
- * This is the full implementation using HTM library and beekeeper wallets.
- */
-export async function updateHTMUserMetadata (
-  metadataData: HTMUserMetadataUpdateData,
-  wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string,
-  managementKey: TPublicKey
-): Promise<string> {
-  const wax = await getWax();
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = operationalAccount;
-
-  // Create L2 HTM transaction for metadata update
-  const htmBuilder = await HTMTransactionBuilder.create();
-  htmBuilder.addUserMetadataUpdate(metadataData);
-  await htmBuilder.sign(wallet);
-
-  // Create L1 transaction to broadcast the HTM transaction
-  const l1Tx = await wax.createTransaction();
-  l1Tx.pushOperation(htmBuilder.getTransaction());
-  l1Tx.sign(wallet, managementKey);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Tx);
-  return l1Tx.id.toString();
-}
-
-/**
- * Update HTM asset metadata
- * This is the full implementation using HTM library and beekeeper wallets.
- * This operation is free (no fee required)
- */
-export async function updateHTMAssetMetadata (
-  metadataData: HTMAssetMetadataUpdateData,
-  wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string
-): Promise<string> {
-  const wax = await getWax();
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = operationalAccount;
-
-  // Create L2 HTM transaction for asset metadata update
-  const htmBuilder = await HTMTransactionBuilder.create();
-  htmBuilder.addAssetMetadataUpdate(metadataData);
-  await htmBuilder.sign(wallet);
-
-  // Create L1 transaction to broadcast the HTM transaction
-  const l1Tx = await wax.createTransaction();
-  l1Tx.pushOperation(htmBuilder.getTransaction());
-
-  // Sign with owner key (management key)
-  l1Tx.sign(wallet, metadataData.owner);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Tx);
-  return l1Tx.id.toString();
-}
-
-/**
- * Validate public key format
- */
-export function isValidPublicKey (key: string): boolean {
-  return /^STM[A-Za-z0-9]+$/.test(key) && key.length >= 50;
-}
-
-/**
- * Validate NAI format
- */
-export function isValidNAI (nai: string): boolean {
-  return /^@@\d{9}$/.test(nai);
-}
-
-/**
- * Format asset amount with precision
- */
-export function formatAssetAmount (amount: string | bigint, precision: number, symbol?: string): string {
-  const numAmount = typeof amount === 'string' ? parseFloat(amount) : Number(amount);
-  const divisor = Math.pow(10, precision);
-  const formatted = (numAmount / divisor).toFixed(precision);
-  return symbol ? `${formatted} ${symbol}` : formatted;
-}
-
-/**
- * Parse asset amount to base units
- */
-export function parseAssetAmount (amount: string, precision: number): string {
-  const numAmount = parseFloat(amount);
-  const multiplier = Math.pow(10, precision);
-  return Math.floor(numAmount * multiplier).toString();
-}
diff --git a/src/utils/htm.ts b/src/utils/htm.ts
deleted file mode 100644
index 3341c10..0000000
--- a/src/utils/htm.ts
+++ /dev/null
@@ -1,453 +0,0 @@
-/* eslint-disable @typescript-eslint/explicit-member-accessibility */
-import type { IBeekeeperUnlockedWallet } from '@hiveio/beekeeper/vite';
-import type { TPublicKey, IWaxBaseInterface } from '@hiveio/wax';
-import { HtmTransaction } from '@mtyszczak-cargo/htm';
-
-import { getWax } from '@/stores/wax.store';
-
-export interface HTMUserSignupData {
-  hiveAccount: string;
-  managementKey: TPublicKey;
-  operationalKey: TPublicKey;
-}
-
-export interface HTMAssetDefinitionData {
-  identifier: {
-    amount: string;
-    nai: string;
-    precision: number;
-  };
-  capped: boolean;
-  maxSupply: string;
-  owner: TPublicKey;
-}
-
-export interface HTMTokenTransferData {
-  sender: TPublicKey;
-  receiver: TPublicKey;
-  amount: {
-    amount: string;
-    nai: string;
-    precision: number;
-  };
-  memo?: string;
-}
-
-export interface HTMUserMetadataUpdateData {
-  user: TPublicKey;
-  metadata: {
-    key: string;
-    value: string;
-  }[];
-}
-
-export interface HTMAssetMetadataUpdateData {
-  owner: TPublicKey;
-  identifier: {
-    amount: string;
-    nai: string;
-    precision: number;
-  };
-  metadata: {
-    key: string;
-    value: string;
-  }[];
-}
-
-export interface HTMTokenTransformData {
-  holder: TPublicKey;
-  receiver?: TPublicKey;
-  amount: {
-    amount: string;
-    nai: string;
-    precision: number;
-  };
-}
-
-/**
- * HTM Transaction Builder - Utility class for creating and managing HTM transactions
- */
-export class HTMTransactionBuilder {
-  private transaction: HtmTransaction;
-
-  private constructor (wax: IWaxBaseInterface) {
-    this.transaction = new HtmTransaction(wax);
-  }
-
-  /**
-   * Create a new HTM transaction builder instance
-   */
-  static async create (): Promise<HTMTransactionBuilder> {
-    const wax = await getWax();
-    return new HTMTransactionBuilder(wax);
-  }
-
-  /**
-   * Add user signup operation to the transaction
-   */
-  addUserSignup (data: HTMUserSignupData): this {
-    this.transaction.pushOperation({
-      user_signup_operation: {
-        hive_account: data.hiveAccount,
-        management_key: data.managementKey,
-        operational_key: data.operationalKey
-      }
-    });
-    return this;
-  }
-
-  /**
-   * Add asset definition operation to the transaction
-   */
-  addAssetDefinition (data: HTMAssetDefinitionData): this {
-    this.transaction.pushOperation({
-      asset_definition_operation: data
-    });
-    return this;
-  }
-
-  /**
-   * Add token transfer operation to the transaction
-   */
-  addTokenTransfer (data: HTMTokenTransferData): this {
-    this.transaction.pushOperation({
-      token_transfer_operation: {
-        sender: data.sender,
-        receiver: data.receiver,
-        amount: data.amount,
-        memo: data.memo || ''
-      }
-    });
-    return this;
-  }
-
-  /**
-   * Add user metadata update operation to the transaction
-   */
-  addUserMetadataUpdate (data: HTMUserMetadataUpdateData): this {
-    this.transaction.pushOperation({
-      user_metadata_update_operation: {
-        user: data.user,
-        metadata: {
-          items: data.metadata
-        }
-      }
-    });
-    return this;
-  }
-
-  /**
-   * Add asset metadata update operation to the transaction
-   */
-  addAssetMetadataUpdate (data: HTMAssetMetadataUpdateData): this {
-    this.transaction.pushOperation({
-      asset_metadata_update_operation: {
-        owner: data.owner,
-        identifier: data.identifier,
-        metadata: {
-          items: data.metadata
-        }
-      }
-    });
-    return this;
-  }
-
-  /**
-   * Add token transform operation (stake/unstake) to the transaction
-   * The operation automatically detects whether to stake or unstake based on the asset type
-   */
-  addTokenTransform (data: HTMTokenTransformData): this {
-    this.transaction.pushOperation({
-      token_transform_operation: {
-        holder: data.holder,
-        receiver: data.receiver,
-        amount: data.amount
-      }
-    });
-    return this;
-  }
-
-  /**
-   * Sign the transaction with the provided wallet
-   */
-  async sign (wallet: IBeekeeperUnlockedWallet): Promise<this> {
-    this.transaction.sign(wallet);
-    return this;
-  }
-
-  /**
-   * Get the underlying HTM transaction
-   */
-  getTransaction (): HtmTransaction {
-    return this.transaction;
-  }
-
-  /**
-   * Get transaction JSON representation
-   */
-  toJSON (): string {
-    return this.transaction.toString();
-  }
-
-  /**
-   * Check if transaction is signed
-   */
-  isSigned (): boolean {
-    return this.transaction.isSigned();
-  }
-
-  /**
-   * Get impacted public keys
-   */
-  getImpactedKeys (): Iterable<TPublicKey> {
-    return this.transaction.impactedPublicKeys;
-  }
-}
-
-/**
- * Create and broadcast an HTM user signup transaction
- */
-export async function createHTMUser (
-  signupData: HTMUserSignupData,
-  wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string
-): Promise<string> {
-  const wax = await getWax();
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = operationalAccount;
-
-  // Create L2 transaction for user signup
-  const htmBuilder = await HTMTransactionBuilder.create();
-  htmBuilder.addUserSignup(signupData);
-  await htmBuilder.sign(wallet);
-
-  // Create L1 transaction to broadcast the HTM transaction
-  const l1Tx = await wax.createTransaction();
-  l1Tx.pushOperation(htmBuilder.getTransaction());
-  l1Tx.sign(wallet, signupData.operationalKey);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Tx);
-  return l1Tx.id.toString();
-}
-
-/**
- * Create and broadcast an HTM asset definition transaction
- */
-export async function createHTMAsset (
-  assetData: HTMAssetDefinitionData,
-  wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string,
-  feeAmount = 1.0
-): Promise<string> {
-  const wax = await getWax();
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = operationalAccount;
-
-  // Create L2 transaction for asset definition
-  const htmBuilder = await HTMTransactionBuilder.create();
-  htmBuilder.addAssetDefinition(assetData);
-  await htmBuilder.sign(wallet);
-
-  // Create L1 transaction with fee transfer and HTM operation
-  const l1Tx = await wax.createTransaction();
-
-  // Add fee transfer operation
-  l1Tx.pushOperation({
-    transfer_operation: {
-      from: operationalAccount,
-      to: 'fee.htm',
-      amount: wax.hiveCoins(feeAmount),
-      memo: 'L2 asset creation fee'
-    }
-  });
-
-  // Add HTM asset definition operation
-  l1Tx.pushOperation(htmBuilder.getTransaction());
-
-  // Sign with management key
-  l1Tx.sign(wallet, assetData.owner);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Tx);
-  return l1Tx.id.toString();
-}
-
-/**
- * Create and broadcast an HTM token transfer transaction
- */
-export async function transferHTMToken (
-  transferData: HTMTokenTransferData,
-  wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string
-): Promise<string> {
-  const wax = await getWax();
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = operationalAccount;
-
-  // Create L2 transaction for token transfer
-  const htmBuilder = await HTMTransactionBuilder.create();
-  htmBuilder.addTokenTransfer(transferData);
-  await htmBuilder.sign(wallet);
-
-  // Create L1 transaction to broadcast the HTM transaction
-  const l1Tx = await wax.createTransaction();
-  l1Tx.pushOperation(htmBuilder.getTransaction());
-  l1Tx.sign(wallet, transferData.sender);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Tx);
-  return l1Tx.id.toString();
-}
-
-/**
- * Update HTM user metadata
- */
-export async function updateHTMUserMetadata (
-  metadataData: HTMUserMetadataUpdateData,
-  wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string,
-  managementKey: TPublicKey
-): Promise<string> {
-  const wax = await getWax();
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = operationalAccount;
-
-  // Create L2 transaction for metadata update
-  const htmBuilder = await HTMTransactionBuilder.create();
-  htmBuilder.addUserMetadataUpdate(metadataData);
-  await htmBuilder.sign(wallet);
-
-  // Create L1 transaction to broadcast the HTM transaction
-  const l1Tx = await wax.createTransaction();
-  l1Tx.pushOperation(htmBuilder.getTransaction());
-  l1Tx.sign(wallet, managementKey);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Tx);
-  return l1Tx.id.toString();
-}
-
-/**
- * Update HTM asset metadata
- * This operation is free (no fee required)
- */
-export async function updateHTMAssetMetadata (
-  metadataData: HTMAssetMetadataUpdateData,
-  wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string
-): Promise<string> {
-  const wax = await getWax();
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = operationalAccount;
-
-  // Create L2 transaction for asset metadata update
-  const htmBuilder = await HTMTransactionBuilder.create();
-  htmBuilder.addAssetMetadataUpdate(metadataData);
-  await htmBuilder.sign(wallet);
-
-  // Create L1 transaction to broadcast the HTM transaction
-  const l1Tx = await wax.createTransaction();
-  l1Tx.pushOperation(htmBuilder.getTransaction());
-
-  // Sign with owner key (management key)
-  l1Tx.sign(wallet, metadataData.owner);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Tx);
-  return l1Tx.id.toString();
-}
-
-/**
- * Stake HTM tokens (transform liquid tokens to staked/vesting)
- */
-export async function stakeHTMToken (
-  transformData: HTMTokenTransformData,
-  wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string
-): Promise<string> {
-  const wax = await getWax();
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = operationalAccount;
-
-  // Create L2 transaction for token transform (stake)
-  const htmBuilder = await HTMTransactionBuilder.create();
-  htmBuilder.addTokenTransform(transformData);
-  await htmBuilder.sign(wallet);
-
-  // Create L1 transaction to broadcast the HTM transaction
-  const l1Tx = await wax.createTransaction();
-  l1Tx.pushOperation(htmBuilder.getTransaction());
-  l1Tx.sign(wallet, transformData.holder);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Tx);
-  return l1Tx.id.toString();
-}
-
-/**
- * Unstake HTM tokens (transform staked/vesting tokens to liquid)
- */
-export async function unstakeHTMToken (
-  transformData: HTMTokenTransformData,
-  wallet: IBeekeeperUnlockedWallet,
-  operationalAccount: string
-): Promise<string> {
-  const wax = await getWax();
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = operationalAccount;
-
-  // Create L2 transaction for token transform (unstake)
-  const htmBuilder = await HTMTransactionBuilder.create();
-  htmBuilder.addTokenTransform(transformData);
-  await htmBuilder.sign(wallet);
-
-  // Create L1 transaction to broadcast the HTM transaction
-  const l1Tx = await wax.createTransaction();
-  l1Tx.pushOperation(htmBuilder.getTransaction());
-  l1Tx.sign(wallet, transformData.holder);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Tx);
-  return l1Tx.id.toString();
-}
-
-/**
- * Validate public key format
- */
-export function isValidPublicKey (key: string): boolean {
-  return /^STM[A-Za-z0-9]+$/.test(key) && key.length >= 50;
-}
-
-/**
- * Validate NAI format
- */
-export function isValidNAI (nai: string): boolean {
-  return /^@@\d{9}$/.test(nai);
-}
-
-/**
- * Format asset amount with precision
- */
-export function formatAssetAmount (amount: string | bigint, precision: number, symbol?: string): string {
-  const numAmount = typeof amount === 'string' ? parseFloat(amount) : Number(amount);
-  const divisor = Math.pow(10, precision);
-  const formatted = (numAmount / divisor).toFixed(precision);
-  return symbol ? `${formatted} ${symbol}` : formatted;
-}
-
-/**
- * Parse asset amount to base units
- */
-export function parseAssetAmount (amount: string, precision: number): string {
-  const numAmount = parseFloat(amount);
-  const multiplier = Math.pow(10, precision);
-  return Math.floor(numAmount * multiplier).toString();
-}
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index 6121c88..af0a94a 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -1,42 +1,7 @@
-import { HtmTransaction } from '@mtyszczak-cargo/htm';
-
-import { useSettingsStore } from '@/stores/settings.store';
-import { isVesting, useTokensStore } from '@/stores/tokens.store';
-import { useWalletStore } from '@/stores/wallet.store';
-import { getWax } from '@/stores/wax.store';
-
-import {
-  getCTokensApi,
-  getUserOperationalKey
-} from './ctokens-api';
-import type { CtokensAppArrayOfTokens, CtokensAppBalance } from './wallet/ctokens/api';
-import CTokensProvider from './wallet/ctokens/signer';
-
-export interface TokenCreationParams {
-  symbol: string;
-  name: string;
-  description: string;
-  nai: string;
-  initial_supply: string;
-  precision: number;
-  can_stake: boolean;
-}
-
-export interface TokenTransferParams {
-  to: string;
-  amount: string;
-  nai: string;
-  precision: number;
-  memo?: string;
-}
-
-export interface TokenStakeParams {
-  amount: string;
-  nai: string;
-  precision: number;
-  direction: 'stake' | 'unstake';
-  receiver?: string;
-}
+// Helper functions for token transformation
+// Note: We are using BigInt to both: handle large numbers and avoid floating point precision issues during bitwise operations.
+export const isVesting = (nai: string, precision: number): boolean =>
+  (((BigInt(nai.slice(2, -1)) << 5n) | 0x10n | BigInt(precision)) & 0x20n) !== 0n;
 
 const table = [
   [0, 3, 1, 7, 5, 9, 8, 6, 4, 2],
@@ -51,6 +16,11 @@ const table = [
   [2, 5, 8, 1, 4, 3, 6, 7, 9, 0]
 ];
 
+/**
+ * Validate NAI format
+ */
+export const isValidNAI = (nai: string): boolean => /^@@\d{9}$/.test(nai);
+
 const dammDigit = (str: string) => {
   let row = 0;
 
@@ -77,16 +47,16 @@ const generateRandomNAI = (symbol: string): string => {
   // Create a hash-like value for uniqueness using a safer approach
   // Use modular arithmetic to prevent overflow
   const input = symbolUpper + timestamp;
-  let hash = 0;
+  let hash = 0n;
 
   for (let i = 0; i < input.length; i++) {
     const char = input.charCodeAt(i);
     // Use bitwise operations and modular arithmetic to prevent overflow
-    hash = ((hash << 5) - hash + char) & 0x7fffffff; // Keep within 31-bit positive range
+    hash = ((hash << 5n) - hash + BigInt(char)) & 0x7fffffffn; // Keep within 31-bit positive range
   }
 
   // Ensure we have a positive number and convert to 8-digit string
-  const naiNumber = Math.abs(hash % 100000000).toString().padStart(8, '0');
+  const naiNumber = Math.abs(Number(hash % 100000000n)).toString().padStart(8, '0');
 
   return `@@${naiNumber}${dammDigit(naiNumber)}`;
 };
@@ -109,331 +79,3 @@ export const generateNAI = (symbol: string, precision: number): string => {
   while (isVesting(randomNAI, precision)); // Keep generating until we get a liquid (non-vesting) NAI
   return randomNAI;
 };
-
-/**
- * Create a new NAI token
- */
-export const createNAIToken = async (params: TokenCreationParams) => {
-  const wax = await getWax();
-  const settingsStore = useSettingsStore();
-  const walletStore = useWalletStore();
-
-  if (!settingsStore.settings.account)
-    throw new Error('No account connected');
-
-  if (!walletStore.hasWallet)
-    throw new Error('No wallet available');
-
-  const tx = await wax.createTransaction();
-
-  // Create custom JSON operation for token creation
-  const tokenData = {
-    action: 'create_token',
-    data: {
-      ...params,
-      creator: settingsStore.settings.account
-    }
-  };
-
-  tx.pushOperation({
-    custom_json_operation: {
-      required_auths: [],
-      required_posting_auths: [settingsStore.settings.account],
-      id: 'htm',
-      json: JSON.stringify(tokenData)
-    }
-  });
-
-  await walletStore.wallet!.signTransaction(tx);
-
-  // Broadcast the transaction to the blockchain
-  await wax.broadcast(tx);
-
-  return tx.id.toString();
-};
-
-/**
- * Transfer NAI tokens
- */
-export const transferNAIToken = async (params: TokenTransferParams) => {
-  const wax = await getWax();
-  const settingsStore = useSettingsStore();
-  const walletStore = useWalletStore();
-  const tokensStore = useTokensStore();
-
-  if (!settingsStore.settings.account)
-    throw new Error('No account connected');
-
-  if (!walletStore.hasWallet)
-    throw new Error('No wallet available');
-
-  // Check if HTM wallet is connected
-  if (!tokensStore.wallet)
-    throw new Error('Please connect your HTM wallet first');
-
-  // For fee payment
-  await walletStore.createWalletFor(settingsStore.settings, 'posting');
-
-  // Reset tokens store with CTokens provider
-  await tokensStore.reset(await CTokensProvider.for(wax, 'active'));
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = settingsStore.settings.account;
-
-  // Create Layer 2 HTM transaction for token transfer
-  const l2Transaction = new HtmTransaction(wax);
-
-  const sender = CTokensProvider.getOperationalPublicKey()!;
-
-  l2Transaction.pushOperation({
-    token_transfer_operation: {
-      sender,
-      receiver: params.to,
-      amount: {
-        amount: params.amount,
-        nai: params.nai,
-        precision: params.precision
-      },
-      memo: params.memo || ''
-    }
-  });
-
-  await tokensStore.wallet!.signTransaction(l2Transaction);
-
-  // Create Layer 1 transaction and broadcast
-  const l1Transaction = await wax.createTransaction();
-
-  // Add the L2 transaction as an operation in L1 transaction
-  l1Transaction.pushOperation(l2Transaction);
-
-  // Sign Layer 1 transaction with the Hive active key
-  await walletStore.wallet!.signTransaction(l1Transaction);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Transaction);
-
-  return l1Transaction.legacy_id;
-};
-
-/**
- * Stake/Unstake NAI tokens
- */
-export const stakeNAIToken = async (params: TokenStakeParams) => {
-  const wax = await getWax();
-  const settingsStore = useSettingsStore();
-  const walletStore = useWalletStore();
-  const tokensStore = useTokensStore();
-
-  if (!settingsStore.settings.account)
-    throw new Error('No account connected');
-
-  if (!walletStore.hasWallet)
-    throw new Error('No wallet available');
-
-  // Check if HTM wallet is connected
-  if (!tokensStore.wallet)
-    throw new Error('Please connect your HTM wallet first');
-
-  // For fee payment
-  await walletStore.createWalletFor(settingsStore.settings, 'posting');
-
-  // Reset tokens store with CTokens provider
-  await tokensStore.reset(await CTokensProvider.for(wax, 'active'));
-
-  // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = settingsStore.settings.account;
-
-  // Create Layer 2 HTM transaction for token transform (stake/unstake)
-  const l2Transaction = new HtmTransaction(wax);
-
-  l2Transaction.pushOperation({
-    token_transform_operation: {
-      holder: tokensStore.wallet.publicKey,
-      receiver: params.receiver || undefined,
-      amount: {
-        amount: params.amount,
-        nai: params.nai,
-        precision: params.precision
-      }
-    }
-  });
-
-  await tokensStore.wallet!.signTransaction(l2Transaction);
-
-  // Create Layer 1 transaction and broadcast
-  const l1Transaction = await wax.createTransaction();
-
-  // Add the L2 transaction as an operation in L1 transaction
-  l1Transaction.pushOperation(l2Transaction);
-
-  // Sign Layer 1 transaction with the Hive active key
-  await walletStore.wallet!.signTransaction(l1Transaction);
-
-  // Broadcast the transaction
-  await wax.broadcast(l1Transaction);
-
-  return l1Transaction.legacy_id;
-};
-
-/**
- * Get token definitions for an account - now using ctokens-api
- */
-export const getTokenDefinitions = async (creator?: string): Promise<CtokensAppArrayOfTokens> => {
-  try {
-    // Get registered tokens from ctokens-api
-    const cTokensApi = await getCTokensApi();
-    const tokens = await cTokensApi.getRegisteredTokens();
-
-    // Filter by creator if provided
-    return creator ? tokens.filter(token => token.owner === creator) : tokens;
-  } catch (error) {
-    console.error('Failed to get token definitions:', error);
-    // Fallback to mock data for development
-    const mockTokens = [
-      {
-        symbol: 'MAT',
-        name: 'My Awesome Token',
-        description: 'A test token for demonstration purposes',
-        nai: '@@123456789',
-        initial_supply: '1000000',
-        current_supply: '1000000',
-        precision: 3,
-        can_stake: true,
-        creator: creator || 'testaccount',
-        created_at: '2024-01-15T10:30:00Z',
-        active: true
-      }
-    ];
-
-    return mockTokens;
-  }
-};
-
-/**
- * Get account balances - now using ctokens-api
- */
-export const getAccountBalances = async (): Promise<CtokensAppBalance[]> => {
-  try {
-    const operationalKey = await getUserOperationalKey();
-    if (!operationalKey)
-      throw new Error('No operational key available');
-
-    // Get balances from ctokens-api
-    const cTokensApi = await getCTokensApi();
-    return await cTokensApi.getAccountBalances(operationalKey);
-  } catch (error) {
-    console.error('Failed to get account balances:', error);
-    // Fallback to mock data for development
-    const mockBalances: CtokensAppBalance[] = [
-      {
-        nai: '@@000000308',
-        amount: '199800',
-        precision: 3,
-        metadata: {
-          name: 'Test Token',
-          symbol: 'TEST'
-        }
-      },
-      {
-        nai: '@@000000319',
-        amount: '100',
-        precision: 3,
-        metadata: {
-          name: 'Test Token (Vesting)',
-          symbol: 'TEST'
-        }
-      }
-    ];
-
-    return mockBalances;
-  }
-};
-
-/**
- * User signup with account validation
- */
-export const userSignup = async (account: string, email?: string, referrer?: string) => {
-  try {
-    const wax = await getWax();
-
-    // Check if account exists first
-    try {
-      const { accounts } = await wax.api.database_api.find_accounts({
-        accounts: [account],
-        delayed_votes_active: false
-      });
-
-      if (accounts.length > 0) {
-        return {
-          success: false,
-          account_exists: true,
-          message: 'Account already exists'
-        };
-      }
-    } catch (_error) {
-      // Account doesn't exist, proceed with signup
-    }
-
-    // In a real implementation, this would call the bridge API for user signup
-    const signupData = {
-      action: 'user_signup',
-      data: {
-        account,
-        email,
-        referrer,
-        timestamp: new Date().toISOString()
-      }
-    };
-
-    // Create transaction for signup
-    const settingsStore = useSettingsStore();
-    const walletStore = useWalletStore();
-
-    if (!settingsStore.settings.account || !walletStore.hasWallet)
-      throw new Error('Wallet not connected');
-
-
-    const tx = await wax.createTransaction();
-
-    tx.pushOperation({
-      custom_json_operation: {
-        required_auths: [],
-        required_posting_auths: [settingsStore.settings.account],
-        id: 'user_signup',
-        json: JSON.stringify(signupData)
-      }
-    });
-
-    await walletStore.wallet!.signTransaction(tx);
-
-    // Broadcast the transaction to the blockchain
-    await wax.broadcast(tx);
-
-    return {
-      success: true,
-      account_exists: false,
-      message: 'User signup completed successfully',
-      transaction_id: tx.id.toString()
-    };
-
-  } catch (error) {
-    console.error('Failed to signup user:', error);
-    throw error;
-  }
-};
-
-/**
- * Validate account name format
- */
-export const validateAccountName = (accountName: string): boolean => {
-  // Hive account name validation rules
-  const regex = /^[a-z][a-z0-9\-.]{2,15}$/;
-  return regex.test(accountName);
-};
-
-/**
- * Parse token amount to remove precision
- */
-export const parseTokenAmount = (amount: string, precision: number): number => {
-  return Math.floor(parseFloat(amount) * Math.pow(10, precision));
-};
diff --git a/src/utils/transaction-status.ts b/src/utils/transaction-status.ts
index ae1c690..aa8c318 100644
--- a/src/utils/transaction-status.ts
+++ b/src/utils/transaction-status.ts
@@ -1,6 +1,11 @@
+import type { AEncryptionProvider, ITransaction } from '@hiveio/wax';
+import { HtmTransaction, type htm_operation, PROTOCOL_OPERATION_ID } from '@mtyszczak-cargo/htm';
 import { toast } from 'vue-sonner';
 
-import { getCTokensApi } from './ctokens-api';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
+import { useWalletStore } from '@/stores/wallet.store';
+import { getWax } from '@/stores/wax.store';
 
 /**
  * Poll transaction status until it's confirmed or failed
@@ -14,12 +19,13 @@ export async function pollTransactionStatus (
   maxAttempts: number = 30,
   intervalMs: number = 2000
 ): Promise<{ success: boolean; message: string; details?: string }> {
-  const cTokensApi = await getCTokensApi();
+  const wax = await getWax();
 
   for (let attempt = 0; attempt < maxAttempts; attempt++) {
     try {
       // Call status endpoint
-      const status = await cTokensApi.getTransactionStatus(refId);
+      /* eslint-disable-next-line @typescript-eslint/naming-convention */
+      const status = await wax.restApi.ctokensApi.status({ 'ref-id': refId });
 
       // Check if we got a successful response
       if (status) {
@@ -69,64 +75,102 @@ export async function pollTransactionStatus (
   };
 }
 
+const broadcastHtmOperation = async (
+  operationsFactory: (tx: ITransaction) => htm_operation[],
+  l2Wallet: AEncryptionProvider | undefined = undefined
+): Promise<string> => {
+  const settingsStore = useSettingsStore();
+  const tokensStore = useTokensStore();
+  const wax = await getWax();
+  const walletStore = useWalletStore();
+
+  // Remove later on. No checks for other wallets or any connection type here as users may not be connected yet, but want to register an account
+  if (walletStore.isL2Wallet)
+    throw new Error('HTM transactions are not supported with Layer 2 wallets at this time.');
+
+  // Set proxy account for HTM transactions
+  HtmTransaction.HiveProxyAccount = settingsStore.settings.account!;
+
+  // Create Layer 2 HTM transaction for user signup
+  const l2Transaction = new HtmTransaction(wax);
+
+  // Create Layer 1 transaction and broadcast
+  const l1Transaction = await wax.createTransaction();
+
+  operationsFactory(l1Transaction).map(op => l2Transaction.pushOperation(op));
+
+  // We are in the scope of the automated function for retrieving status of HTM transactions.
+  // Therefore, we must ensure that no custom, injected HTM operations are mixed with proper, observable operations in the same transaction.
+  for(const op of l1Transaction.transaction.operations)
+  {if (op.custom_json_operation?.id === PROTOCOL_OPERATION_ID)
+    throw new Error('Custom, injected HTM operations cannot be mixed with other operations in the same transaction.');
+  }
+
+  await (l2Wallet ?? tokensStore.wallet!).signTransaction(l2Transaction);
+
+  const l1Op = l2Transaction.toLayer1Operation();
+
+  l1Transaction.pushOperation(l1Op);
+
+  if (!walletStore.wallet)
+    throw new Error('No wallet available for signing the transaction. Currently, you are required to connect a Layer 1 wallet to perform HTM transactions.');
+
+  // Sign Layer 1 transaction with the Hive active key
+  await walletStore.createWalletFor(settingsStore.settings, l1Op.custom_json_operation!.required_auths.length > 0 ? 'active' : 'posting');
+  await walletStore.wallet!.signTransaction(l1Transaction);
+
+  // Broadcast the transaction
+  await wax.broadcast(l1Transaction);
+
+  return `${l1Transaction.legacy_id}_${l1Transaction.transaction.operations.length - 1}`;
+};
+
 /**
  * Wait for transaction status and show appropriate toast
- * @param txId - Transaction reference ID (transaction hash)
- * @param opSeq - Operation sequence number (e.g., for tracking specific operations)
+ * @param operationsFactory - Function that creates HTM operations for the L1 transaction. Thanks to the L1 transaction provided as an argument to the function,
+ *                            you can include your custom operations (such as e.g. fees) in the same transaction.
  * @param operationName - Name of the operation for toast messages (e.g., "Transfer", "Stake")
- * @param onSuccess - Optional callback to execute on success
- * @param onFailure - Optional callback to execute on failure
+ * @param enableToasts - Whether to show toasts for transaction status (default: true)
+ * @param l2Wallet - Optional explicit L2 signer. If not provided, the default signer from tokens store will be used.
+ *
+ * @throws This function throws an error if the transaction fails or if there is an issue during broadcasting.
  */
-export async function waitForTransactionStatus (
-  txId: string,
-  opSeq: number,
-  operationName: string,
-  onSuccess?: () => void | Promise<void>,
-  onFailure?: (error: Error) => void | Promise<void>
-): Promise<void> {
+export const waitForTransactionStatus = async (
+  operationsFactory: (tx: ITransaction) => htm_operation[],
+  operationName: string = 'Operation',
+  enableToasts: boolean = true,
+  l2Wallet: AEncryptionProvider | undefined = undefined
+): Promise<void> => {
   // Show pending toast
-  const loadingToast = toast.loading(`${operationName} in progress...`, {
+  const loadingToast = enableToasts ? toast.loading(`${operationName} in progress...`, {
     description: 'Waiting for transaction confirmation'
-  });
+  }) : undefined;
 
   try {
-    const result = await pollTransactionStatus(`${txId}_${opSeq}`);
+    const refId = await broadcastHtmOperation(operationsFactory, l2Wallet);
 
-    // Dismiss loading toast
-    toast.dismiss(loadingToast);
+    const result = await pollTransactionStatus(refId);
 
+    if (!enableToasts) return;
+
+    toast.dismiss(loadingToast);
     if (result.success) {
-      // Show success toast
       toast.success(`${operationName} successful`, {
         description: result.message
       });
-
-      // Execute success callback if provided
-      if (onSuccess)
-        await onSuccess();
     } else {
-      // Show error toast
       toast.error(`${operationName} failed`, {
         description: result.details || result.message
       });
-
-      // Execute failure callback if provided
-      if (onFailure)
-        await onFailure(new Error(result.message));
     }
   } catch (error: unknown) {
-    // Dismiss loading toast
-    toast.dismiss(loadingToast);
-
-    const err = error as Error;
-
-    // Show error toast
-    toast.error(`${operationName} failed`, {
-      description: err?.message || 'Unknown error occurred'
-    });
+    if (enableToasts) {
+      toast.dismiss(loadingToast);
+      toast.error(`${operationName} failed`, {
+        description: error instanceof Error ? error.message : 'Unknown error occurred'
+      });
+    }
 
-    // Execute failure callback if provided
-    if (onFailure)
-      await onFailure(err);
+    throw error;
   }
-}
+};
-- 
GitLab


From edfb6c37760afbe122f9ba41199317d71e4ce29a Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Mon, 27 Oct 2025 11:44:13 +0100
Subject: [PATCH 050/102] Bump wax and beekeeper packages

---
 package.json   | 10 ++++----
 pnpm-lock.yaml | 62 +++++++++++++++++++++++++-------------------------
 2 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index db87293..6876fd4 100644
--- a/package.json
+++ b/package.json
@@ -27,11 +27,11 @@
     "@eslint/compat": "^1.3.1",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.32.0",
-    "@hiveio/beekeeper": "1.27.12-rc4",
-    "@hiveio/wax": "1.27.12-rc1-251007115925",
-    "@hiveio/wax-signers-keychain": "1.27.12-rc1-251007115925",
-    "@hiveio/wax-signers-metamask": "1.27.12-rc1-251007115925",
-    "@hiveio/wax-signers-peakvault": "1.27.12-rc1-251007115925",
+    "@hiveio/beekeeper": "1.28.0",
+    "@hiveio/wax": "1.27.12-rc2-251027102101",
+    "@hiveio/wax-signers-keychain": "1.27.12-rc2-251027102101",
+    "@hiveio/wax-signers-metamask": "1.27.12-rc2-251027102101",
+    "@hiveio/wax-signers-peakvault": "1.27.12-rc2-251027102101",
     "@mdi/js": "^7.4.47",
     "@metamask/providers": "^16.0.0",
     "@mtyszczak-cargo/htm": "^1.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0131481..6f9210b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,20 +18,20 @@ importers:
         specifier: ^9.32.0
         version: 9.32.0
       '@hiveio/beekeeper':
-        specifier: 1.27.12-rc4
-        version: 1.27.12-rc4
+        specifier: 1.28.0
+        version: 1.28.0
       '@hiveio/wax':
-        specifier: 1.27.12-rc1-251007115925
-        version: 1.27.12-rc1-251007115925
+        specifier: 1.27.12-rc2-251027102101
+        version: 1.27.12-rc2-251027102101
       '@hiveio/wax-signers-keychain':
-        specifier: 1.27.12-rc1-251007115925
-        version: 1.27.12-rc1-251007115925
+        specifier: 1.27.12-rc2-251027102101
+        version: 1.27.12-rc2-251027102101
       '@hiveio/wax-signers-metamask':
-        specifier: 1.27.12-rc1-251007115925
-        version: 1.27.12-rc1-251007115925(webextension-polyfill@0.12.0)
+        specifier: 1.27.12-rc2-251027102101
+        version: 1.27.12-rc2-251027102101(webextension-polyfill@0.12.0)
       '@hiveio/wax-signers-peakvault':
-        specifier: 1.27.12-rc1-251007115925
-        version: 1.27.12-rc1-251007115925
+        specifier: 1.27.12-rc2-251027102101
+        version: 1.27.12-rc2-251027102101
       '@mdi/js':
         specifier: ^7.4.47
         version: 7.4.47
@@ -40,7 +40,7 @@ importers:
         version: 16.1.0
       '@mtyszczak-cargo/htm':
         specifier: ^1.0.1
-        version: 1.0.1(@hiveio/wax@1.27.12-rc1-251007115925)
+        version: 1.0.1(@hiveio/wax@1.27.12-rc2-251027102101)
       '@nabla/vite-plugin-eslint':
         specifier: ^2.0.6
         version: 2.0.6(eslint@9.32.0(jiti@1.21.7))(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0))
@@ -384,21 +384,21 @@ packages:
   '@floating-ui/vue@1.1.6':
     resolution: {integrity: sha512-XFlUzGHGv12zbgHNk5FN2mUB7ROul3oG2ENdTpWdE+qMFxyNxWSRmsoyhiEnpmabNm6WnUvR1OvJfUfN4ojC1A==}
 
-  '@hiveio/beekeeper@1.27.12-rc4':
-    resolution: {integrity: sha1-YtBmd/+XM2ymPmOdG77DXGMYsyM=, tarball: https://gitlab.syncad.com/api/v4/projects/198/packages/npm/@hiveio/beekeeper/-/@hiveio/beekeeper-1.27.12-rc4.tgz}
+  '@hiveio/beekeeper@1.28.0':
+    resolution: {integrity: sha1-jhzjl4rv49r45D8o4sQymoSn98o=, tarball: https://gitlab.syncad.com/api/v4/projects/198/packages/npm/@hiveio/beekeeper/-/@hiveio/beekeeper-1.28.0.tgz}
     engines: {node: ^20.11 || >= 21.2}
 
-  '@hiveio/wax-signers-keychain@1.27.12-rc1-251007115925':
-    resolution: {integrity: sha1-PPpAvrHqXEB05xZhFJY/B+68Irc=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-keychain/-/@hiveio/wax-signers-keychain-1.27.12-rc1-251007115925.tgz}
+  '@hiveio/wax-signers-keychain@1.27.12-rc2-251027102101':
+    resolution: {integrity: sha1-7ghI01Oz4hBfpfU9XeACvbps7DU=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-keychain/-/@hiveio/wax-signers-keychain-1.27.12-rc2-251027102101.tgz}
 
-  '@hiveio/wax-signers-metamask@1.27.12-rc1-251007115925':
-    resolution: {integrity: sha1-Klg4Ulj7IRE6lHOEiqG7UgmZqbA=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-metamask/-/@hiveio/wax-signers-metamask-1.27.12-rc1-251007115925.tgz}
+  '@hiveio/wax-signers-metamask@1.27.12-rc2-251027102101':
+    resolution: {integrity: sha1-IufjffEpz0u+OSCjliUkSqcaxoI=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-metamask/-/@hiveio/wax-signers-metamask-1.27.12-rc2-251027102101.tgz}
 
-  '@hiveio/wax-signers-peakvault@1.27.12-rc1-251007115925':
-    resolution: {integrity: sha1-eCHCv29oVNNRF2WzLiAdxtiqkcI=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-peakvault/-/@hiveio/wax-signers-peakvault-1.27.12-rc1-251007115925.tgz}
+  '@hiveio/wax-signers-peakvault@1.27.12-rc2-251027102101':
+    resolution: {integrity: sha1-ZnD8kHfWM2ObZ3lPJzY9EaNhkRg=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-peakvault/-/@hiveio/wax-signers-peakvault-1.27.12-rc2-251027102101.tgz}
 
-  '@hiveio/wax@1.27.12-rc1-251007115925':
-    resolution: {integrity: sha1-AaYvRBWGrvY0PTd3e0eE4p0ujjI=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax/-/@hiveio/wax-1.27.12-rc1-251007115925.tgz}
+  '@hiveio/wax@1.27.12-rc2-251027102101':
+    resolution: {integrity: sha1-XedOcD9INaE5yXpzvesrW2klftk=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax/-/@hiveio/wax-1.27.12-rc2-251027102101.tgz}
     engines: {node: ^20.11 || >= 21.2}
 
   '@humanfs/core@0.19.1':
@@ -2671,25 +2671,25 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@hiveio/beekeeper@1.27.12-rc4': {}
+  '@hiveio/beekeeper@1.28.0': {}
 
-  '@hiveio/wax-signers-keychain@1.27.12-rc1-251007115925':
+  '@hiveio/wax-signers-keychain@1.27.12-rc2-251027102101':
     dependencies:
-      '@hiveio/wax': 1.27.12-rc1-251007115925
+      '@hiveio/wax': 1.27.12-rc2-251027102101
 
-  '@hiveio/wax-signers-metamask@1.27.12-rc1-251007115925(webextension-polyfill@0.12.0)':
+  '@hiveio/wax-signers-metamask@1.27.12-rc2-251027102101(webextension-polyfill@0.12.0)':
     dependencies:
-      '@hiveio/wax': 1.27.12-rc1-251007115925
+      '@hiveio/wax': 1.27.12-rc2-251027102101
       '@metamask/providers': 21.0.0(webextension-polyfill@0.12.0)
     transitivePeerDependencies:
       - supports-color
       - webextension-polyfill
 
-  '@hiveio/wax-signers-peakvault@1.27.12-rc1-251007115925':
+  '@hiveio/wax-signers-peakvault@1.27.12-rc2-251027102101':
     dependencies:
-      '@hiveio/wax': 1.27.12-rc1-251007115925
+      '@hiveio/wax': 1.27.12-rc2-251027102101
 
-  '@hiveio/wax@1.27.12-rc1-251007115925':
+  '@hiveio/wax@1.27.12-rc2-251027102101':
     dependencies:
       events: 3.3.0
 
@@ -2887,9 +2887,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mtyszczak-cargo/htm@1.0.1(@hiveio/wax@1.27.12-rc1-251007115925)':
+  '@mtyszczak-cargo/htm@1.0.1(@hiveio/wax@1.27.12-rc2-251027102101)':
     dependencies:
-      '@hiveio/wax': 1.27.12-rc1-251007115925
+      '@hiveio/wax': 1.27.12-rc2-251027102101
       protobufjs: 7.2.5
 
   '@nabla/vite-plugin-eslint@2.0.6(eslint@9.32.0(jiti@1.21.7))(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0))':
-- 
GitLab


From 1c61475382f2ec4abfa6b5b6660d5db49221c049 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Mon, 27 Oct 2025 12:16:17 +0100
Subject: [PATCH 051/102] Improve general single token view

---
 .../utilcards/SignTransactionCard.vue         |  2 +-
 src/pages/tokens/create.vue                   | 70 ++++++++++++++++---
 src/pages/tokens/edit.vue                     | 26 +++++++
 src/pages/tokens/token.vue                    |  2 +-
 4 files changed, 88 insertions(+), 12 deletions(-)

diff --git a/src/components/utilcards/SignTransactionCard.vue b/src/components/utilcards/SignTransactionCard.vue
index a296e33..33233d2 100644
--- a/src/components/utilcards/SignTransactionCard.vue
+++ b/src/components/utilcards/SignTransactionCard.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { ITransaction, TRole, TTransactionRequiredAuthorities } from '@hiveio/wax/vite';
 import { mdiFileSign } from '@mdi/js';
+import { AlertCircle } from 'lucide-vue-next';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-import { AlertCircle } from 'lucide-vue-next';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index 728df6c..2874d7d 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -42,6 +42,8 @@ const settingsStore = useSettingsStore();
 const tokenName = ref('');
 const tokenSymbol = ref('');
 const tokenDescription = ref('');
+const tokenImage = ref('');
+const tokenWebsite = ref('');
 const initialSupply = ref('1000000');
 const precision = ref('3');
 const othersCanStake = ref(true);
@@ -217,6 +219,22 @@ const createToken = async () => {
     };
     const owner = CTokensProvider.getOperationalPublicKey()!;
     const assetTokenName = tokenName.value.trim();
+    const trimmedSymbol = tokenSymbol.value.trim();
+    const trimmedDescription = tokenDescription.value.trim();
+    const trimmedImage = tokenImage.value.trim();
+    const trimmedWebsite = tokenWebsite.value.trim();
+
+    const metadataItems = [
+      { key: 'name', value: assetTokenName },
+      { key: 'symbol', value: trimmedSymbol },
+      { key: 'description', value: trimmedDescription }
+    ];
+
+    if (trimmedImage)
+      metadataItems.push({ key: 'image', value: trimmedImage });
+
+    if (trimmedWebsite)
+      metadataItems.push({ key: 'website', value: trimmedWebsite });
 
     // Prepare HTM asset definition data
     const assetDefinition: asset_definition = {
@@ -225,11 +243,7 @@ const createToken = async () => {
       max_supply: capped.value ? parseAssetAmount(initialSupply.value, parseInt(precision.value)) : '0',
       owner,
       metadata: {
-        items: [
-          { key: 'name', value: assetTokenName },
-          { key: 'symbol', value: tokenSymbol.value.trim() },
-          { key: 'description', value: tokenDescription.value.trim() }
-        ]
+        items: [...metadataItems]
       },
       is_nft: false,
       others_can_stake: othersCanStake.value,
@@ -239,11 +253,7 @@ const createToken = async () => {
       identifier: identifierVesting,
       owner,
       metadata: {
-        items: [
-          { key: 'name', value: assetTokenName },
-          { key: 'symbol', value: tokenSymbol.value.trim() },
-          { key: 'description', value: tokenDescription.value.trim() }
-        ]
+        items: [...metadataItems]
       }
     };
 
@@ -285,6 +295,8 @@ const resetForm = () => {
   tokenName.value = '';
   tokenSymbol.value = '';
   tokenDescription.value = '';
+  tokenImage.value = '';
+  tokenWebsite.value = '';
   initialSupply.value = '1000000';
   precision.value = '3';
   othersCanStake.value = true;
@@ -307,6 +319,8 @@ const previewToken = computed(() => ({
   symbol: tokenSymbol.value || undefined,
   description: tokenDescription.value || undefined,
   nai: generatedNAI.value || undefined,
+  image: tokenImage.value || undefined,
+  website: tokenWebsite.value || undefined,
   totalSupply: initialSupply.value,
   maxSupply: capped.value ? initialSupply.value : undefined,
   precision: parseInt(precision.value) ?? 3,
@@ -397,6 +411,42 @@ const previewToken = computed(() => ({
                 />
               </div>
 
+              <Separator />
+
+              <!-- Token Image URL -->
+              <div class="space-y-2">
+                <Label for="token-image">Image URL</Label>
+                <Input
+                  id="token-image"
+                  v-model="tokenImage"
+                  type="url"
+                  placeholder="https://example.com/token-logo.png"
+                  :disabled="isCreatingToken"
+                  class="font-mono text-sm"
+                />
+                <p class="text-xs text-muted-foreground">
+                  Optional: URL to your token's logo or icon
+                </p>
+              </div>
+
+              <!-- Token Website URL -->
+              <div class="space-y-2">
+                <Label for="token-website">Website URL</Label>
+                <Input
+                  id="token-website"
+                  v-model="tokenWebsite"
+                  type="url"
+                  placeholder="https://example.com"
+                  :disabled="isCreatingToken"
+                  class="font-mono text-sm"
+                />
+                <p class="text-xs text-muted-foreground">
+                  Optional: Official website for your token project
+                </p>
+              </div>
+
+              <Separator />
+
               <!-- Initial Supply -->
               <div class="space-y-2">
                 <Label for="initial-supply">Initial Supply *</Label>
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index bfe15c2..284b671 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -311,6 +311,32 @@ onMounted(async () => {
                 </p>
               </div>
             </div>
+            <div class="flex flex-wrap gap-2 mt-4">
+              <span
+                :class="[
+                  'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
+                  token?.is_nft ? 'bg-purple-50 text-purple-700 border-purple-200' : 'bg-emerald-50 text-emerald-700 border-emerald-200'
+                ]"
+              >
+                {{ token?.is_nft ? 'NFT' : 'Fungible' }}
+              </span>
+              <span
+                :class="[
+                  'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
+                  token?.others_can_stake ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
+                ]"
+              >
+                {{ token?.others_can_stake ? 'Staking ✓' : 'Staking ✗' }}
+              </span>
+              <span
+                :class="[
+                  'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
+                  token?.others_can_unstake ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
+                ]"
+              >
+                {{ token?.others_can_unstake ? 'Unstaking ✓' : 'Unstaking ✗' }}
+              </span>
+            </div>
           </CardContent>
         </Card>
 
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index b52ecf5..edd975c 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -5,9 +5,9 @@ import { onMounted, ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-import { AlertDescription, Alert } from '@/components/ui/alert';
 import HTMView from '@/components/HTMView.vue';
 import MemoInput from '@/components/MemoInput.vue';
+import { AlertDescription, Alert } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-- 
GitLab


From 3b734871fc5786b7e95476f821fec6b499eb3b31 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Mon, 27 Oct 2025 13:26:05 +0100
Subject: [PATCH 052/102] Improve UI/UX of my balance table

---
 src/pages/tokens/my-balance.vue | 164 +++++++++++++++++++++++++++++---
 1 file changed, 149 insertions(+), 15 deletions(-)

diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 5584c8e..3494560 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -221,6 +221,78 @@ const getTotalBalance = (balance: BalanceLike): string => {
   return getLiquidBalance(balance);
 };
 
+const formatDisplayAmount = (amount: string | undefined, precision: number | undefined): string => {
+  const normalized = formatBalanceAmount(amount, precision);
+
+  if (!normalized || normalized === '0')
+    return '0';
+
+  const [integerPart, decimalPart] = normalized.split('.');
+  const withSeparators = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+  if (!decimalPart)
+    return withSeparators;
+
+  const trimmedDecimal = decimalPart.replace(/0+$/, '');
+
+  if (!trimmedDecimal)
+    return withSeparators;
+
+  return `${withSeparators}.${trimmedDecimal}`;
+};
+
+const getLiquidBalanceDisplay = (balance: BalanceLike): string => {
+  if (!balance) return '0';
+
+  if (isAggregatedBalance(balance))
+    return formatDisplayAmount(balance.liquid?.amount, balance.liquid?.precision ?? balance.precision);
+
+  if (isVesting(balance.nai || '', balance.precision || 0))
+    return '0';
+
+  return formatDisplayAmount(balance.amount, balance.precision);
+};
+
+const getStakedBalanceDisplay = (balance: BalanceLike): string => {
+  if (!balance) return '0';
+
+  if (isAggregatedBalance(balance))
+    return formatDisplayAmount(balance.vesting?.amount, balance.vesting?.precision ?? balance.precision);
+
+  if (isVesting(balance.nai || '', balance.precision || 0))
+    return formatDisplayAmount(balance.amount, balance.precision);
+
+  return '0';
+};
+
+const getTotalBalanceDisplay = (balance: BalanceLike): string => {
+  if (!balance) return '0';
+
+  if (isAggregatedBalance(balance)) {
+    const precision = balance.precision;
+    const liquidAmount = balance.liquid?.amount ? BigInt(balance.liquid.amount) : 0n;
+    const stakedAmount = balance.vesting?.amount ? BigInt(balance.vesting.amount) : 0n;
+    return formatDisplayAmount((liquidAmount + stakedAmount).toString(), precision);
+  }
+
+  return formatDisplayAmount(balance.amount, balance.precision);
+};
+
+const getBalancePercent = (balance: BalanceLike, type: 'liquid' | 'staked'): number => {
+  const liquid = Number(getLiquidBalance(balance));
+  const staked = Number(getStakedBalance(balance));
+  const total = liquid + staked;
+
+  if (!total)
+    return 0;
+
+  if (type === 'liquid')
+    return Number(((liquid / total) * 100).toFixed(1));
+
+  const stakedRatio = 100 - (liquid / total) * 100;
+  return Number(stakedRatio.toFixed(1));
+};
+
 
 // Filter balances based on search query
 const filteredBalancesAll = computed(() => {
@@ -768,21 +840,83 @@ onMounted(() => {
                     </td>
 
                     <!-- Combined Balances -->
-                    <td class="p-4 text-right">
-                      <div class="flex justify-end gap-3 text-sm">
-                        <span class="font-medium">
-                          Liquid: {{ getLiquidBalance(balance) }}
-                        </span>
-                        <span class="text-muted-foreground">
-                          Staked: {{ getStakedBalance(balance) }}
-                        </span>
+                    <td class="p-4 align-middle">
+                      <div class="ml-auto flex w-full max-w-[260px] flex-col gap-3 text-sm">
+                        <div class="flex items-center justify-between gap-3">
+                          <span
+                            :class="[
+                              'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold uppercase tracking-wide',
+                              Number(getLiquidBalance(balance)) === 0
+                                ? 'bg-muted text-muted-foreground border-transparent'
+                                : 'bg-emerald-50 text-emerald-700 border-emerald-200'
+                            ]"
+                          >
+                            Liquid
+                          </span>
+                          <span
+                            :class="[
+                              'font-medium tabular-nums',
+                              Number(getLiquidBalance(balance)) === 0 ? 'text-muted-foreground' : 'text-foreground'
+                            ]"
+                          >
+                            {{ getLiquidBalanceDisplay(balance) }}
+                          </span>
+                        </div>
+
+                        <div class="flex items-center justify-between gap-3">
+                          <span
+                            :class="[
+                              'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold uppercase tracking-wide',
+                              Number(getStakedBalance(balance)) === 0
+                                ? 'bg-muted text-muted-foreground border-transparent'
+                                : 'bg-sky-50 text-sky-700 border-sky-200'
+                            ]"
+                          >
+                            Staked
+                          </span>
+                          <span
+                            :class="[
+                              'font-medium tabular-nums',
+                              Number(getStakedBalance(balance)) === 0 ? 'text-muted-foreground' : 'text-foreground'
+                            ]"
+                          >
+                            {{ getStakedBalanceDisplay(balance) }}
+                          </span>
+                        </div>
+
+                        <template v-if="Number(getTotalBalance(balance)) > 0">
+                          <div class="flex h-1.5 w-full overflow-hidden rounded-full bg-muted">
+                            <div
+                              class="h-full bg-emerald-500 transition-all"
+                              :style="{ width: `${getBalancePercent(balance, 'liquid')}%` }"
+                            />
+                            <div
+                              class="h-full bg-sky-500 transition-all"
+                              :style="{ width: `${getBalancePercent(balance, 'staked')}%` }"
+                            />
+                          </div>
+                          <div class="flex items-center justify-between text-xs text-muted-foreground">
+                            <span>Distribution</span>
+                            <span class="tabular-nums">
+                              {{ getBalancePercent(balance, 'liquid').toFixed(1) }}% liquid ·
+                              {{ getBalancePercent(balance, 'staked').toFixed(1) }}% staked
+                            </span>
+                          </div>
+                        </template>
+
+                        <div
+                          v-else
+                          class="text-xs text-muted-foreground text-right"
+                        >
+                          No balance yet
+                        </div>
                       </div>
                     </td>
 
                     <!-- Total Balance -->
                     <td class="p-4 text-right">
-                      <div class="font-medium">
-                        {{ getTotalBalance(balance) }}
+                      <div class="font-semibold tabular-nums">
+                        {{ getTotalBalanceDisplay(balance) }}
                       </div>
                     </td>
 
@@ -941,7 +1075,7 @@ onMounted(() => {
               <DialogTitle>Transfer {{ selectedTokenForTransfer ? getTokenName(selectedTokenForTransfer) : '' }}</DialogTitle>
             </div>
             <DialogDescription>
-              Send tokens to another account. Available balance: {{ selectedTokenForTransfer ? getLiquidBalance(selectedTokenForTransfer) : '0' }} {{ selectedTokenForTransfer ? getTokenSymbol(selectedTokenForTransfer) : '' }}
+              Send tokens to another account. Available balance: {{ selectedTokenForTransfer ? getLiquidBalanceDisplay(selectedTokenForTransfer) : '0' }} {{ selectedTokenForTransfer ? getTokenSymbol(selectedTokenForTransfer) : '' }}
             </DialogDescription>
           </DialogHeader>
 
@@ -974,7 +1108,7 @@ onMounted(() => {
               </div>
               <div class="flex justify-between text-xs">
                 <span class="text-muted-foreground">
-                  Available: {{ getLiquidBalance(selectedTokenForTransfer!) }}
+                  Available: {{ getLiquidBalanceDisplay(selectedTokenForTransfer!) }}
                 </span>
                 <button
                   v-if="selectedTokenForTransfer && Number(getLiquidBalance(selectedTokenForTransfer)) > 0"
@@ -1068,8 +1202,8 @@ onMounted(() => {
             </div>
             <DialogDescription>
               {{ transformDirection === 'liquid-to-staked'
-                ? `Stake tokens to earn rewards. Available: ${selectedToken ? getLiquidBalance(selectedToken) : '0'} ${selectedToken ? getTokenSymbol(selectedToken) : ''}`
-                : `Unstake tokens to make them liquid. Available: ${selectedToken ? getStakedBalance(selectedToken) : '0'} ${selectedToken ? getTokenSymbol(selectedToken) : ''}`
+                ? `Stake tokens to earn rewards. Available: ${selectedToken ? getLiquidBalanceDisplay(selectedToken) : '0'} ${selectedToken ? getTokenSymbol(selectedToken) : ''}`
+                : `Unstake tokens to make them liquid. Available: ${selectedToken ? getStakedBalanceDisplay(selectedToken) : '0'} ${selectedToken ? getTokenSymbol(selectedToken) : ''}`
               }}
             </DialogDescription>
           </DialogHeader>
@@ -1094,7 +1228,7 @@ onMounted(() => {
               </div>
               <div class="flex justify-between text-xs">
                 <span class="text-muted-foreground">
-                  Available: {{ transformDirection === 'liquid-to-staked' ? getLiquidBalance(selectedToken!) : getStakedBalance(selectedToken!) }}
+                  Available: {{ transformDirection === 'liquid-to-staked' ? getLiquidBalanceDisplay(selectedToken!) : getStakedBalanceDisplay(selectedToken!) }}
                 </span>
                 <button
                   v-if="selectedToken && Number(transformDirection === 'liquid-to-staked' ? getLiquidBalance(selectedToken) : getStakedBalance(selectedToken)) > 0"
-- 
GitLab


From 1fbc4449ed9af7aff2e29680e81bdcaab5e40769 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Tue, 28 Oct 2025 10:24:58 +0100
Subject: [PATCH 053/102] Improve token display

---
 src/components/HTMTokenPreview.vue | 16 +++++++++++-----
 src/pages/tokens/my-tokens.vue     | 11 ++++++-----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/HTMTokenPreview.vue b/src/components/HTMTokenPreview.vue
index e7cf48c..419892b 100644
--- a/src/components/HTMTokenPreview.vue
+++ b/src/components/HTMTokenPreview.vue
@@ -43,12 +43,12 @@ const emit = defineEmits<{
 
 // Get avatar fallback text
 const getAvatarFallback = (token: TokenPreviewData | CTokenDisplay): string => {
-  if (token.name)
-    return token.name.slice(0, 2).toUpperCase();
-
   if (token.symbol)
     return token.symbol.slice(0, 2).toUpperCase();
 
+  if (token.name)
+    return token.name.slice(0, 2).toUpperCase();
+
   if (token.ownerPublicKey)
     return token.ownerPublicKey.slice(3, 5).toUpperCase();
 
@@ -124,7 +124,7 @@ onMounted(async () => {
           <AvatarImage
             v-if="token.image"
             :src="token.image"
-            :alt="token.name || 'Token'"
+            :alt="token.symbol || token.name || 'Token'"
           />
           <AvatarFallback>
             <svg
@@ -153,7 +153,13 @@ onMounted(async () => {
         <div class="flex-1 min-w-0">
           <div class="flex flex-col gap-2 mb-1">
             <CardTitle class="text-lg truncate inline-flex gap-2 flex-wrap items-center">
-              <span>{{ token.name || 'Unnamed Token' }}</span>
+              <span>{{ token.symbol || token.name || 'Unnamed Token' }}</span>
+              <span
+                v-if="token.name && token.symbol && token.name !== token.symbol"
+                class="text-sm text-muted-foreground font-normal"
+              >
+                {{ token.name }}
+              </span>
               <span
                 v-if="token.isNft"
                 class="inline-flex items-center rounded-md bg-purple-500/10 text-[12px]/[14px] px-1 font-medium text-purple-500 border border-purple-500/20"
diff --git a/src/pages/tokens/my-tokens.vue b/src/pages/tokens/my-tokens.vue
index 723696e..35d0c64 100644
--- a/src/pages/tokens/my-tokens.vue
+++ b/src/pages/tokens/my-tokens.vue
@@ -70,9 +70,9 @@ const loadTokens = async (page: number = 1) => {
     }
 
     const wax = await getWax();
-    const formatAsset = (value: string | bigint, precision: number, name?: string): string => {
+    const formatAsset = (value: string | bigint, precision: number, symbol?: string): string => {
       const formatted = wax.formatter.formatNumber(value, precision);
-      return name ? `${formatted} ${name}` : formatted;
+      return symbol ? `${formatted} ${symbol}` : formatted;
     };
 
     // Temporary naive implementation of vesting space check
@@ -87,15 +87,15 @@ const loadTokens = async (page: number = 1) => {
       tokensFullList.value = [];
 
     tokensFullList.value.push(...userTokens.map(token => {
-      const { name, description, website, image } = (token.metadata || {}) as Record<string, string>;
+      const { name, symbol, description, website, image } = (token.metadata || {}) as Record<string, string>;
 
       return {
         nai: token.nai,
         isStaked: isVesting(token.nai, token.precision),
-        displayMaxSupply: formatAsset(token.max_supply, token.precision, name),
+        displayMaxSupply: formatAsset(token.max_supply, token.precision, symbol || name),
         ownerPublicKey: token.owner,
         precision: token.precision,
-        displayTotalSupply: formatAsset(token.total_supply, token.precision, name),
+        displayTotalSupply: formatAsset(token.total_supply, token.precision, symbol || name),
         totalSupply: BigInt(token.total_supply),
         maxSupply: BigInt(token.max_supply),
         capped: token.capped,
@@ -104,6 +104,7 @@ const loadTokens = async (page: number = 1) => {
         isNft: token.is_nft,
         metadata: token.metadata,
         name,
+        symbol,
         description,
         website,
         image
-- 
GitLab


From 42f3c2d4f41bbb758663cd02ae465f520e750413 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Tue, 28 Oct 2025 11:31:06 +0100
Subject: [PATCH 054/102] Improve displaying NAI

---
 src/pages/tokens/my-balance.vue | 148 ++++++++++++++++++++++++++------
 src/pages/tokens/token.vue      |  25 ++++--
 src/stores/tokens.store.ts      |   8 +-
 3 files changed, 149 insertions(+), 32 deletions(-)

diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 3494560..e0a37a6 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -34,6 +34,9 @@ import CTokensProvider from '@/utils/wallet/ctokens/signer';
 const router = useRouter();
 const tokensStore = useTokensStore();
 
+// Wax formatter reference
+const formatter = ref<{ formatNumber: (value: string, precision: number) => string } | null>(null);
+
 interface AggregatedBalance {
   key: string;
   nai: string;
@@ -170,12 +173,30 @@ const aggregatedBalances = computed<AggregatedBalance[]>(() => {
   return order.map(key => map.get(key)!);
 });
 
-// Reformat this code and use wax one:
+// Parse asset amount - convert decimal to base units (integer with precision zeros)
+const parseAssetAmount = (amountStr: string, precision: number): string => {
+  const [integerPart, fractionalPart = ''] = amountStr.split('.');
+  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
+  return integerPart + normalizedFractional;
+};
+
+// Format token amount using wax formatter (accepts base units from API)
 const formatCTokenAmount = (amount: string, precision: number): string => {
+  // Use wax formatter if available - it handles conversion from base units
+  if (formatter.value)
+    return formatter.value.formatNumber(amount, precision);
+
+  // Fallback formatting - manually convert from base units to decimal
   const num = parseFloat(amount);
   return (num / Math.pow(10, precision)).toFixed(precision);
 };
 
+// Get numeric value from base units (for calculations)
+const getNumericBalance = (amount: string, precision: number): number => {
+  const num = parseFloat(amount);
+  return num / Math.pow(10, precision);
+};
+
 const formatBalanceAmount = (amount: string | undefined, precision: number | undefined): string => {
   if (!amount || amount === '0') return '0';
   return formatCTokenAmount(amount, precision ?? 0);
@@ -193,6 +214,22 @@ const getLiquidBalance = (balance: BalanceLike): string => {
   return formatBalanceAmount(balance.amount, balance.precision);
 };
 
+// Get liquid balance as numeric value
+const getLiquidBalanceNumeric = (balance: BalanceLike): number => {
+  if (!balance) return 0;
+
+  if (isAggregatedBalance(balance)) {
+    if (!balance.liquid?.amount) return 0;
+    return getNumericBalance(balance.liquid.amount, balance.liquid.precision ?? balance.precision);
+  }
+
+  if (isVesting(balance.nai || '', balance.precision || 0))
+    return 0;
+
+  if (!balance.amount) return 0;
+  return getNumericBalance(balance.amount, balance.precision || 0);
+};
+
 const getStakedBalance = (balance: BalanceLike): string => {
   if (!balance) return '0';
 
@@ -205,25 +242,51 @@ const getStakedBalance = (balance: BalanceLike): string => {
   return '0';
 };
 
-const getTotalBalance = (balance: BalanceLike): string => {
-  if (!balance) return '0';
+// Get staked balance as numeric value
+const getStakedBalanceNumeric = (balance: BalanceLike): number => {
+  if (!balance) return 0;
 
   if (isAggregatedBalance(balance)) {
-    const precision = balance.precision;
-    const liquidAmount = balance.liquid?.amount ? BigInt(balance.liquid.amount) : 0n;
-    const stakedAmount = balance.vesting?.amount ? BigInt(balance.vesting.amount) : 0n;
-    return formatBalanceAmount((liquidAmount + stakedAmount).toString(), precision);
+    if (!balance.vesting?.amount) return 0;
+    return getNumericBalance(balance.vesting.amount, balance.vesting.precision ?? balance.precision);
   }
 
-  if (isVesting(balance.nai || '', balance.precision || 0))
-    return getStakedBalance(balance);
+  if (isVesting(balance.nai || '', balance.precision || 0)) {
+    if (!balance.amount) return 0;
+    return getNumericBalance(balance.amount, balance.precision || 0);
+  }
+
+  return 0;
+};
 
-  return getLiquidBalance(balance);
+// Get total balance as numeric value (for conditions)
+const getTotalBalanceNumeric = (balance: BalanceLike): number => {
+  if (!balance) return 0;
+
+  if (isAggregatedBalance(balance)) {
+    const precision = balance.precision;
+    const liquidAmount = balance.liquid?.amount ? getNumericBalance(balance.liquid.amount, balance.liquid.precision ?? precision) : 0;
+    const stakedAmount = balance.vesting?.amount ? getNumericBalance(balance.vesting.amount, balance.vesting.precision ?? precision) : 0;
+    return liquidAmount + stakedAmount;
+  }
+
+  const amount = balance.amount || '0';
+  const precision = balance.precision || 0;
+  return getNumericBalance(amount, precision);
 };
 
 const formatDisplayAmount = (amount: string | undefined, precision: number | undefined): string => {
-  const normalized = formatBalanceAmount(amount, precision);
+  if (!amount || amount === '0') return '0';
+
+  // Use wax formatter directly for display - it already handles thousand separators
+  if (formatter.value) {
+    const formatted = formatter.value.formatNumber(amount, precision ?? 0);
+    // Trim trailing zeros after decimal point
+    return formatted.replace(/(\.\d*?)0+$/, '$1').replace(/\.$/, '');
+  }
 
+  // Fallback: manual formatting
+  const normalized = formatBalanceAmount(amount, precision);
   if (!normalized || normalized === '0')
     return '0';
 
@@ -279,8 +342,27 @@ const getTotalBalanceDisplay = (balance: BalanceLike): string => {
 };
 
 const getBalancePercent = (balance: BalanceLike, type: 'liquid' | 'staked'): number => {
-  const liquid = Number(getLiquidBalance(balance));
-  const staked = Number(getStakedBalance(balance));
+  if (!balance) return 0;
+
+  let liquid = 0;
+  let staked = 0;
+
+  if (isAggregatedBalance(balance)) {
+    const precision = balance.precision;
+    if (balance.liquid?.amount)
+      liquid = getNumericBalance(balance.liquid.amount, balance.liquid.precision ?? precision);
+    if (balance.vesting?.amount)
+      staked = getNumericBalance(balance.vesting.amount, balance.vesting.precision ?? precision);
+  } else {
+    const isVestingToken = isVesting(balance.nai || '', balance.precision || 0);
+    if (balance.amount) {
+      if (isVestingToken)
+        staked = getNumericBalance(balance.amount, balance.precision || 0);
+      else
+        liquid = getNumericBalance(balance.amount, balance.precision || 0);
+    }
+  }
+
   const total = liquid + staked;
 
   if (!total)
@@ -417,6 +499,9 @@ const transferTokens = async () => {
   try {
     isTransferLoading.value = true;
 
+    // Convert decimal amount to base units (add precision zeros)
+    const baseAmount = parseAssetAmount(transferAmount.value, selectedTokenForTransfer.value?.precision || 0);
+
     // Wait for transaction status
     await waitForTransactionStatus(
       () => ([{
@@ -424,7 +509,7 @@ const transferTokens = async () => {
           receiver: transferRecipient.value,
           sender: CTokensProvider.getOperationalPublicKey()!,
           amount: {
-            amount: transferAmount.value,
+            amount: baseAmount,
             nai: selectedTokenForTransfer.value?.nai || '',
             precision: selectedTokenForTransfer.value?.precision || 0
           },
@@ -467,12 +552,15 @@ const transformTokens = async () => {
   try {
     isTransformLoading.value = true;
 
+    // Convert decimal amount to base units (add precision zeros)
+    const baseAmount = parseAssetAmount(transformAmount.value, selectedToken.value!.precision!);
+
     // Wait for transaction status
     await waitForTransactionStatus(
       () => ([{
         token_transform_operation: {
           amount: {
-            amount: transformAmount.value,
+            amount: baseAmount,
             nai: transformDirection.value === 'liquid-to-staked' ? selectedToken.value!.nai! : toVesting(selectedToken.value!.nai!, selectedToken.value!.precision!),
             precision: selectedToken.value!.precision!
           },
@@ -538,7 +626,15 @@ const setMaxTransformAmount = async () => {
 };
 
 // Initialize
-onMounted(() => {
+onMounted(async () => {
+  // Initialize wax formatter
+  try {
+    const wax = await getWax();
+    formatter.value = wax.formatter;
+  } catch (error) {
+    console.error('Failed to initialize wax formatter:', error);
+  }
+
   loadAccountBalances();
 });
 </script>
@@ -812,7 +908,7 @@ onMounted(() => {
                               {{ getTokenName(balance) }}
                             </span>
                             <span
-                              v-if="Number(getStakedBalance(balance)) > 0"
+                              v-if="getStakedBalanceNumeric(balance) > 0"
                               class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
                             >
                               <svg
@@ -846,7 +942,7 @@ onMounted(() => {
                           <span
                             :class="[
                               'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold uppercase tracking-wide',
-                              Number(getLiquidBalance(balance)) === 0
+                              getLiquidBalanceNumeric(balance) === 0
                                 ? 'bg-muted text-muted-foreground border-transparent'
                                 : 'bg-emerald-50 text-emerald-700 border-emerald-200'
                             ]"
@@ -856,7 +952,7 @@ onMounted(() => {
                           <span
                             :class="[
                               'font-medium tabular-nums',
-                              Number(getLiquidBalance(balance)) === 0 ? 'text-muted-foreground' : 'text-foreground'
+                              getLiquidBalanceNumeric(balance) === 0 ? 'text-muted-foreground' : 'text-foreground'
                             ]"
                           >
                             {{ getLiquidBalanceDisplay(balance) }}
@@ -867,7 +963,7 @@ onMounted(() => {
                           <span
                             :class="[
                               'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold uppercase tracking-wide',
-                              Number(getStakedBalance(balance)) === 0
+                              getStakedBalanceNumeric(balance) === 0
                                 ? 'bg-muted text-muted-foreground border-transparent'
                                 : 'bg-sky-50 text-sky-700 border-sky-200'
                             ]"
@@ -877,14 +973,14 @@ onMounted(() => {
                           <span
                             :class="[
                               'font-medium tabular-nums',
-                              Number(getStakedBalance(balance)) === 0 ? 'text-muted-foreground' : 'text-foreground'
+                              getStakedBalanceNumeric(balance) === 0 ? 'text-muted-foreground' : 'text-foreground'
                             ]"
                           >
                             {{ getStakedBalanceDisplay(balance) }}
                           </span>
                         </div>
 
-                        <template v-if="Number(getTotalBalance(balance)) > 0">
+                        <template v-if="getTotalBalanceNumeric(balance) > 0">
                           <div class="flex h-1.5 w-full overflow-hidden rounded-full bg-muted">
                             <div
                               class="h-full bg-emerald-500 transition-all"
@@ -926,7 +1022,7 @@ onMounted(() => {
                         <Button
                           variant="ghost"
                           size="sm"
-                          :disabled="Number(getLiquidBalance(balance)) === 0"
+                          :disabled="getLiquidBalanceNumeric(balance) === 0"
                           title="Transfer tokens"
                           @click.stop="openTransferDialog(balance)"
                         >
@@ -946,7 +1042,7 @@ onMounted(() => {
                         <Button
                           variant="ghost"
                           size="sm"
-                          :disabled="Number(getLiquidBalance(balance)) === 0"
+                          :disabled="getLiquidBalanceNumeric(balance) === 0"
                           title="Stake tokens"
                           @click.stop="openTransformDialog(balance, 'liquid-to-staked')"
                         >
@@ -966,7 +1062,7 @@ onMounted(() => {
                         <Button
                           variant="ghost"
                           size="sm"
-                          :disabled="Number(getStakedBalance(balance)) === 0"
+                          :disabled="getStakedBalanceNumeric(balance) === 0"
                           title="Unstake tokens"
                           @click.stop="openTransformDialog(balance, 'staked-to-liquid')"
                         >
@@ -1111,7 +1207,7 @@ onMounted(() => {
                   Available: {{ getLiquidBalanceDisplay(selectedTokenForTransfer!) }}
                 </span>
                 <button
-                  v-if="selectedTokenForTransfer && Number(getLiquidBalance(selectedTokenForTransfer)) > 0"
+                  v-if="selectedTokenForTransfer && getLiquidBalanceNumeric(selectedTokenForTransfer) > 0"
                   type="button"
                   class="text-primary hover:text-primary/80 font-medium"
                   @click="setMaxTransferAmount"
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index edd975c..30cec64 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -158,10 +158,9 @@ const formattedTopHolders = computed(() => {
   });
 });
 
-// Helper to format amount synchronously
+// Helper to format amount synchronously (fallback for top holders)
 const formatAmount = (amount: string, precision: number): string => {
   try {
-    // Simple formatter - convert to number with proper decimal places
     const num = parseFloat(amount);
     if (isNaN(num)) return amount;
 
@@ -174,6 +173,13 @@ const formatAmount = (amount: string, precision: number): string => {
   }
 };
 
+// Parse asset amount - convert decimal to base units (integer with precision zeros)
+const parseAssetAmount = (amountStr: string, precision: number): string => {
+  const [integerPart, fractionalPart = ''] = amountStr.split('.');
+  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
+  return integerPart + normalizedFractional;
+};
+
 // Update formatted values
 const updateFormattedValues = async () => {
   if (!token.value) return;
@@ -368,12 +374,15 @@ const handleTransfer = async () => {
   try {
     isTransferring.value = true;
 
+    // Convert decimal amount to base units (add precision zeros)
+    const baseAmount = parseAssetAmount(transferForm.value.amount, token.value.precision || 0);
+
     // Wait for transaction status
     await waitForTransactionStatus(
       () => ([{
         token_transfer_operation: {
           amount: {
-            amount: transferForm.value.amount,
+            amount: baseAmount,
             nai: token.value!.nai!,
             precision: token.value!.precision || 0
           },
@@ -445,6 +454,9 @@ const handleStake = async () => {
   try {
     isStaking.value = true;
 
+    // Convert decimal amount to base units (add precision zeros)
+    const baseAmount = parseAssetAmount(stakeForm.value.amount, token.value.precision || 0);
+
     // Wait for transaction status
     await waitForTransactionStatus(
       () => ([{
@@ -452,7 +464,7 @@ const handleStake = async () => {
           holder: CTokensProvider.getOperationalPublicKey()!,
           receiver: stakeForm.value.receiver || undefined,
           amount: {
-            amount: stakeForm.value.amount,
+            amount: baseAmount,
             nai: token.value!.nai!,
             precision: token.value!.precision || 0
           }
@@ -520,6 +532,9 @@ const handleUnstake = async () => {
   try {
     isUnstaking.value = true;
 
+    // Convert decimal amount to base units (add precision zeros)
+    const baseAmount = parseAssetAmount(stakeForm.value.amount, token.value.precision || 0);
+
     // Wait for transaction status
     await waitForTransactionStatus(
       () => ([{
@@ -527,7 +542,7 @@ const handleUnstake = async () => {
           holder: CTokensProvider.getOperationalPublicKey()!,
           receiver: stakeForm.value.receiver || undefined,
           amount: {
-            amount: stakeForm.value.amount,
+            amount: baseAmount,
             nai: token.value!.nai!,
             precision: token.value!.precision || 0
           }
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 3de33ba..9c2aacd 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -124,7 +124,13 @@ export const useTokensStore = defineStore('tokens', {
         // Get balances from ctokens-api
         const cTokenBalances = await wax.restApi.ctokensApi.balances({ user: operationalKey, page: 1 });
 
-        this.balances = cTokenBalances.flatMap(balance => ([balance.liquid!, balance.vesting!]));
+        // Filter out null values when flattening
+        this.balances = cTokenBalances.flatMap(balance => {
+          const result: CtokensAppBalance[] = [];
+          if (balance.liquid) result.push(balance.liquid);
+          if (balance.vesting) result.push(balance.vesting);
+          return result;
+        });
       } catch (error) {
         console.error('Failed to load balances:', error);
         this.lastError = error instanceof Error ? error.message : 'Failed to load balances';
-- 
GitLab


From 765b16cb8c5ab2ca6225604a35c984acf2f6a2ac Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Tue, 28 Oct 2025 11:39:31 +0100
Subject: [PATCH 055/102] Add token-only layout

---
 src/App.vue                              | 15 +++++-
 src/components/navigation/AppSidebar.vue | 67 ++++++++++++++++++++++--
 src/pages/tokens/token.vue               |  1 +
 src/utils/router.ts                      | 44 +++++++++++-----
 4 files changed, 108 insertions(+), 19 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 15bcec1..a3385e4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,9 +54,20 @@ const complete = async (data: { account: string; wallet: UsedWallet }) => {
   <div id="shadcn-root">
     <div id="app-main">
       <SidebarProvider>
-        <AppSidebar />
+        <RouterView
+          v-slot="{ Component }"
+          name="sidebar"
+        >
+          <component
+            :is="Component"
+            v-if="Component"
+          />
+          <AppSidebar v-else />
+        </RouterView>
         <div class="w-full">
-          <AppHeader />
+          <RouterView name="header">
+            <AppHeader />
+          </RouterView>
           <main class="w-full h-[calc(100%-60px)] bg-background">
             <RouterView />
           </main>
diff --git a/src/components/navigation/AppSidebar.vue b/src/components/navigation/AppSidebar.vue
index a4381dc..8e34030 100644
--- a/src/components/navigation/AppSidebar.vue
+++ b/src/components/navigation/AppSidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { mdiHomeOutline, mdiMessageLockOutline, mdiFileSign, mdiAccountPlusOutline, mdiAccountArrowUpOutline, mdiAccountReactivateOutline, mdiLink, mdiWallet, mdiViewList, mdiAccountGroup } from '@mdi/js';
+import { mdiHomeOutline, mdiMessageLockOutline, mdiFileSign, mdiAccountPlusOutline, mdiAccountArrowUpOutline, mdiAccountReactivateOutline, mdiLink, mdiWallet, mdiViewList, mdiAccountGroup, mdiArrowLeft } from '@mdi/js';
 import { computed, onMounted, ref, type Ref } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -11,6 +11,13 @@ import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { defaultSnapOrigin, defaultSnapVersion } from '@/utils/wallet/metamask/snap';
 
+const props = defineProps({
+  forceTokenView: {
+    type: Boolean,
+    default: false
+  }
+});
+
 const router = useRouter();
 
 const { toggleSidebar, isMobile } = useSidebar();
@@ -21,7 +28,42 @@ const walletStore = useWalletStore();
 const isL1BasedView = computed(() => walletStore.hasWallet && !walletStore.isL2Wallet);
 const hasHTMWallet = computed(() => !!tokensStore.wallet);
 
-const groups: { title: string; items: Array<{ title: string; url: string; icon: string; badge?: string; visible?: Ref<boolean>; disabled?: Ref<boolean> }> }[] = [{
+const tokensGroups: { title?: string; items: Array<{ title: string; url: string; icon: string; badge?: string; visible?: Ref<boolean>; disabled?: Ref<boolean> }> }[] = [{
+  items: [{
+    title: 'Back to Hive Bridge',
+    url: '/',
+    icon: mdiArrowLeft
+  }]
+},
+{
+  title: 'Tokens',
+  items: [
+    {
+      title: 'My HTM Account',
+      url: '/tokens/my-balance',
+      icon: mdiWallet,
+      visible: hasHTMWallet
+    },
+    {
+      title: 'Tokens List',
+      url: '/tokens/list',
+      icon: mdiAccountGroup
+    },
+    {
+      title: 'My Token Definitions',
+      url: '/tokens/my-tokens',
+      icon: mdiViewList,
+      visible: hasHTMWallet
+    },
+    {
+      title: 'Register HTM Account',
+      url: '/tokens/register-account',
+      icon: mdiAccountPlusOutline
+    }
+  ]
+}];
+
+const mainGroups: { title: string; items: Array<{ title: string; url: string; icon: string; badge?: string; visible?: Ref<boolean>; disabled?: Ref<boolean> }> }[] = [{
   title: 'Hive Account Management',
   items: [
     {
@@ -98,6 +140,14 @@ const groups: { title: string; items: Array<{ title: string; url: string; icon:
   ]
 }];
 
+const groups = computed(() => {
+  if (props.forceTokenView)
+    return tokensGroups;
+  else
+    return mainGroups;
+
+});
+
 const navigateTo = (url: string) => {
   router.push(url);
 
@@ -132,6 +182,10 @@ onMounted(async () => {
           class="h-[32px] w-[32px]"
         >
         <span class="text-foreground/80 font-bold text-xl ml-2">Hive Bridge</span>
+        <span
+          v-if="props.forceTokenView"
+          class="text-foreground/60 ml-2 text-sm"
+        >Tokens</span>
       </div>
     </SidebarHeader>
     <SidebarContent>
@@ -140,9 +194,16 @@ onMounted(async () => {
         :key="group.title"
         class="pb-0"
       >
-        <SidebarGroupLabel class="text-foreground/60">
+        <SidebarGroupLabel
+          v-if="group.title"
+          class="text-foreground/60"
+        >
           {{ group.title }}
         </SidebarGroupLabel>
+        <div
+          v-else
+          class="h-2"
+        />
         <SidebarGroupContent>
           <SidebarMenu>
             <SidebarMenuItem
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 30cec64..55e7b3d 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -771,6 +771,7 @@ onMounted(async () => {
                 <p
                   v-if="tokenDescription"
                   class="text-muted-foreground text-base mb-4 leading-relaxed"
+                  style="word-break:break-word"
                 >
                   {{ tokenDescription }}
                 </p>
diff --git a/src/utils/router.ts b/src/utils/router.ts
index 3dec2cc..179fe4f 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -1,3 +1,6 @@
+import type { Component } from 'vue';
+
+import AppSidebar from '@/components/navigation/AppSidebar.vue';
 import AccountCreate from '@/pages/account/create.vue';
 import RequestCreate from '@/pages/account/request.vue';
 import AccountUpdate from '@/pages/account/update.vue';
@@ -13,19 +16,32 @@ import TokenDefinitions from '@/pages/tokens/my-tokens.vue';
 import RegisterHTMAccount from '@/pages/tokens/register-account.vue';
 import TokenDetail from '@/pages/tokens/token.vue';
 
+const standardPath = (path: string, component: Component) => ({ path, component });
+
+const tokensPath = (path: string, component: Component) => ({
+  path,
+  components: {
+    default: component,
+    sidebar: AppSidebar
+  },
+  props: {
+    sidebar: { forceTokenView: true }
+  }
+});
+
 export const routes = [
-  { path: '/', component: Index },
-  { path: '/sign/transaction', component: SignTransaction },
-  { path: '/sign/message', component: SignMessage },
-  { path: '/account/create', component: AccountCreate },
-  { path: '/account/request', component: RequestCreate },
-  { path: '/account/update', component: AccountUpdate },
-  { path: '/tokens/register-account', component: RegisterHTMAccount },
-  { path: '/tokens/create', component: CreateToken },
-  { path: '/tokens/edit', component: EditToken },
-  { path: '/tokens/my-tokens', component: TokenDefinitions },
-  { path: '/tokens/my-balance', component: AccountBalances },
-  { path: '/tokens/list', component: TokensList },
-  { path: '/tokens/token', component: TokenDetail },
-  { path: '/automation/authorize', component: DappAuthorize }
+  standardPath('/', Index),
+  standardPath('/sign/transaction', SignTransaction),
+  standardPath('/sign/message', SignMessage),
+  standardPath('/account/create', AccountCreate),
+  standardPath('/account/request', RequestCreate),
+  standardPath('/account/update', AccountUpdate),
+  standardPath('/automation/authorize', DappAuthorize),
+  tokensPath('/tokens/register-account', RegisterHTMAccount),
+  tokensPath('/tokens/create', CreateToken),
+  tokensPath('/tokens/edit', EditToken),
+  tokensPath('/tokens/my-tokens', TokenDefinitions),
+  tokensPath('/tokens/my-balance', AccountBalances),
+  tokensPath('/tokens/list', TokensList),
+  tokensPath('/tokens/token', TokenDetail)
 ];
-- 
GitLab


From 4ef77aafe2a7c4b5192cdf0f42e55a975ac45405 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Tue, 28 Oct 2025 12:14:14 +0100
Subject: [PATCH 056/102] Allow token description to be displayed multiline

---
 src/pages/tokens/token.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 55e7b3d..bc0177b 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -770,7 +770,7 @@ onMounted(async () => {
 
                 <p
                   v-if="tokenDescription"
-                  class="text-muted-foreground text-base mb-4 leading-relaxed"
+                  class="text-muted-foreground text-base mb-4 leading-relaxed whitespace-pre-line"
                   style="word-break:break-word"
                 >
                   {{ tokenDescription }}
-- 
GitLab


From 131ac17fd11caec6585d7dd8f47a574ae4dc90d2 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Tue, 28 Oct 2025 13:46:23 +0100
Subject: [PATCH 057/102] Implement qr code generation

---
 package.json                    |   4 +
 pnpm-lock.yaml                  | 165 +++++++++
 src/pages/tokens/send-token.vue | 585 ++++++++++++++++++++++++++++++++
 src/pages/tokens/token.vue      |  71 ++--
 src/utils/router.ts             |   2 +
 5 files changed, 807 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/tokens/send-token.vue

diff --git a/package.json b/package.json
index 6876fd4..fc3b339 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@stylistic/eslint-plugin": "^5.2.2",
     "@tanstack/vue-table": "^8.21.2",
     "@types/node": "^22.13.9",
+    "@types/qrcode": "^1.5.6",
     "@typescript-eslint/eslint-plugin": "^8.38.0",
     "@typescript-eslint/parser": "^8.38.0",
     "@vitejs/plugin-vue": "^5.2.1",
@@ -69,5 +70,8 @@
   "packageManager": "pnpm@10.0.0+sha512.b8fef5494bd3fe4cbd4edabd0745df2ee5be3e4b0b8b08fa643aa3e4c6702ccc0f00d68fa8a8c9858a735a0032485a44990ed2810526c875e416f001b17df12b",
   "engines": {
     "node": "^20.18.1 || >= 21.2"
+  },
+  "dependencies": {
+    "qrcode": "^1.5.4"
   }
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f9210b..ef65fe9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      qrcode:
+        specifier: ^1.5.4
+        version: 1.5.4
     devDependencies:
       '@eslint/compat':
         specifier: ^1.3.1
@@ -53,6 +57,9 @@ importers:
       '@types/node':
         specifier: ^22.13.9
         version: 22.13.9
+      '@types/qrcode':
+        specifier: ^1.5.6
+        version: 1.5.6
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.38.0
         version: 8.38.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
@@ -824,6 +831,9 @@ packages:
   '@types/node@22.13.9':
     resolution: {integrity: sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw==}
 
+  '@types/qrcode@1.5.6':
+    resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
+
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
@@ -1141,6 +1151,10 @@ packages:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
 
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
   caniuse-lite@1.0.30001701:
     resolution: {integrity: sha512-faRs/AW3jA9nTwmJBSO1PQ6L/EOgsB5HMQQq4iCu5zhPgVVgO/pZRHlmatwijZKetFw8/Pr4q6dEN8sJuq8qTw==}
 
@@ -1155,6 +1169,9 @@ packages:
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
+  cliui@6.0.0:
+    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -1232,6 +1249,10 @@ packages:
       supports-color:
         optional: true
 
+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -1256,6 +1277,9 @@ packages:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
 
+  dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
@@ -1462,6 +1486,10 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -1499,6 +1527,10 @@ packages:
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
@@ -1765,6 +1797,10 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -1898,14 +1934,26 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
@@ -1962,6 +2010,10 @@ packages:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
 
+  pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+
   pony-cause@2.1.11:
     resolution: {integrity: sha512-M7LhCsdNbNgiLYiP4WjsfLUuFmCfnjdF6jKe2R9NKl4WFN+HZPGHJZ9lnLP7f9ZnKe3U9nuWD0szirmj+migUg==}
     engines: {node: '>=12.0.0'}
@@ -2027,6 +2079,11 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -2058,6 +2115,13 @@ packages:
     peerDependencies:
       vue: '>= 3.2.0'
 
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-main-filename@2.0.0:
+    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -2109,6 +2173,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -2445,6 +2512,9 @@ packages:
     resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
     engines: {node: '>= 0.4'}
 
+  which-module@2.0.1:
+    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+
   which-typed-array@1.1.19:
     resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
     engines: {node: '>= 0.4'}
@@ -2458,6 +2528,10 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -2473,11 +2547,22 @@ packages:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
 
+  y18n@4.0.3:
+    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+
   yaml@2.7.0:
     resolution: {integrity: sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==}
     engines: {node: '>= 14'}
     hasBin: true
 
+  yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
+
+  yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
+
   yn@3.1.1:
     resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
     engines: {node: '>=6'}
@@ -3128,6 +3213,10 @@ snapshots:
     dependencies:
       undici-types: 6.20.0
 
+  '@types/qrcode@1.5.6':
+    dependencies:
+      '@types/node': 22.13.9
+
   '@types/web-bluetooth@0.0.21': {}
 
   '@typescript-eslint/eslint-plugin@8.38.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)':
@@ -3544,6 +3633,8 @@ snapshots:
 
   camelcase-css@2.0.1: {}
 
+  camelcase@5.3.1: {}
+
   caniuse-lite@1.0.30001701: {}
 
   chalk@4.1.2:
@@ -3567,6 +3658,12 @@ snapshots:
     dependencies:
       clsx: 2.1.1
 
+  cliui@6.0.0:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+
   clsx@2.1.1: {}
 
   color-convert@2.0.1:
@@ -3629,6 +3726,8 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decamelize@1.2.0: {}
+
   deep-is@0.1.4: {}
 
   define-data-property@1.1.4:
@@ -3652,6 +3751,8 @@ snapshots:
   diff@4.0.2:
     optional: true
 
+  dijkstrajs@1.0.3: {}
+
   dlv@1.1.3: {}
 
   doctrine@2.1.0:
@@ -3968,6 +4069,11 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -4007,6 +4113,8 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
+  get-caller-file@2.0.5: {}
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -4269,6 +4377,10 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -4397,14 +4509,24 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
 
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
 
+  p-try@2.2.0: {}
+
   package-json-from-dist@1.0.1: {}
 
   parent-module@1.0.1:
@@ -4443,6 +4565,8 @@ snapshots:
 
   pirates@4.0.6: {}
 
+  pngjs@5.0.0: {}
+
   pony-cause@2.1.11: {}
 
   possible-typed-array-names@1.1.0: {}
@@ -4506,6 +4630,12 @@ snapshots:
 
   punycode@2.3.1: {}
 
+  qrcode@1.5.4:
+    dependencies:
+      dijkstrajs: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+
   queue-microtask@1.2.3: {}
 
   read-cache@1.0.0:
@@ -4567,6 +4697,10 @@ snapshots:
       - '@vue/composition-api'
       - typescript
 
+  require-directory@2.1.1: {}
+
+  require-main-filename@2.0.0: {}
+
   resolve-from@4.0.0: {}
 
   resolve-pkg-maps@1.0.0:
@@ -4636,6 +4770,8 @@ snapshots:
 
   semver@7.7.1: {}
 
+  set-blocking@2.0.0: {}
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -5045,6 +5181,8 @@ snapshots:
       is-weakmap: 2.0.2
       is-weakset: 2.0.4
 
+  which-module@2.0.1: {}
+
   which-typed-array@1.1.19:
     dependencies:
       available-typed-arrays: 1.0.7
@@ -5061,6 +5199,12 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
   wrap-ansi@7.0.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -5077,8 +5221,29 @@ snapshots:
 
   xml-name-validator@4.0.0: {}
 
+  y18n@4.0.3: {}
+
   yaml@2.7.0: {}
 
+  yargs-parser@18.1.3:
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+
+  yargs@15.4.1:
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+
   yn@3.1.1:
     optional: true
 
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
new file mode 100644
index 0000000..3764b61
--- /dev/null
+++ b/src/pages/tokens/send-token.vue
@@ -0,0 +1,585 @@
+<script setup lang="ts">
+import { mdiArrowLeft, mdiArrowDown, mdiArrowUp } from '@mdi/js';
+import type { htm_operation } from '@mtyszczak-cargo/htm';
+import QRCode from 'qrcode';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { toast } from 'vue-sonner';
+
+import HTMView from '@/components/HTMView.vue';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Textarea } from '@/components/ui/textarea';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
+import { useWalletStore } from '@/stores/wallet.store';
+import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
+import { waitForTransactionStatus } from '@/utils/transaction-status';
+import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+// Router
+const route = useRoute();
+const router = useRouter();
+
+const settingsStore = useSettingsStore();
+const tokensStore = useTokensStore();
+const walletStore = useWalletStore();
+
+// State
+const token = ref<CtokensAppToken | null>(null);
+const isLoading = ref(true);
+const isUpdating = ref(false);
+const isSending = ref(false);
+const addingMemo = ref(false);
+const qrCodeDataUrl = ref<string>('');
+
+// Form state
+const form = ref({
+  amount: '',
+  memo: ''
+});
+
+// Get NAI and precision from route parameters
+const nai = computed(() => route.query.nai as string);
+const precision = computed(() => route.query.precision);
+const receiverKey = computed(() => route.query.to as string | undefined);
+const queryAmount = computed(() => route.query.amount as string | undefined);
+const queryMemo = computed(() => route.query.memo as string | undefined);
+
+// Check if we're in receive mode (when 'to' is in query params)
+// When 'to' is present, we're actually sending (confirming a transfer request)
+const isReceiveMode = computed(() => !!receiverKey.value);
+
+const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
+
+// Check if user is logged in
+const isLoggedIn = computed(() => !!settingsStore.settings.account);
+
+// Check if current user is the token owner
+const isTokenOwner = computed(() => {
+  if (!token.value?.owner || !CTokensProvider.getOperationalPublicKey()) return false;
+  return token.value.owner === CTokensProvider.getOperationalPublicKey();
+});
+
+const tokenName = computed(() => {
+  if (!token.value) return 'Unknown Token';
+  const metadata = token.value.metadata as { name?: string } | undefined;
+  return metadata?.name || token.value.nai || 'Unknown Token';
+});
+
+const tokenSymbol = computed(() => {
+  if (!token.value) return '';
+  const metadata = token.value.metadata as { symbol?: string } | undefined;
+  return metadata?.symbol || '';
+});
+
+const amountValidation = computed(() => {
+  if (!form.value.amount || !token.value)
+    return { isValid: false, error: '' };
+
+  return validateAmountPrecision(form.value.amount, token.value.precision || 0);
+});
+
+// Validate amount precision and overflow
+const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
+  try {
+    // Remove thousand separators (commas, spaces) to get clean number
+    const cleanAmount = amount.replace(/[,\s]/g, '');
+
+    // Check if amount contains only valid characters (digits, decimal point)
+    if (!/^\d*\.?\d*$/.test(cleanAmount))
+      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
+
+    // Check if amount is a valid number
+    const numAmount = parseFloat(cleanAmount);
+    if (isNaN(numAmount) || numAmount <= 0)
+      return { isValid: false, error: 'Amount must be a positive number' };
+
+    // Check for infinity
+    if (!isFinite(numAmount))
+      return { isValid: false, error: 'Amount value is too large' };
+
+    // Check decimal places - count actual decimal places in input
+    const decimalIndex = cleanAmount.indexOf('.');
+    if (decimalIndex !== -1) {
+      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
+      if (decimalPlaces > precision) {
+        return {
+          isValid: false,
+          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
+        };
+      }
+    }
+
+    // Convert to base units to check for overflow
+    const multiplier = Math.pow(10, precision);
+    const baseUnits = numAmount * multiplier;
+
+    // Check for overflow - ensure it's within safe integer range
+    // Maximum safe integer in JavaScript is 2^53 - 1
+    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
+    if (baseUnits > MAX_SAFE_BASE_UNITS)
+      return { isValid: false, error: 'Amount is too large and would cause overflow' };
+
+    // Ensure conversion to base units produces an integer (no precision loss)
+    const roundedBaseUnits = Math.round(baseUnits);
+    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
+      return {
+        isValid: false,
+        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
+      };
+    }
+
+    return { isValid: true, parsedAmount: roundedBaseUnits.toString() };
+  } catch (_error) {
+    return { isValid: false, error: 'Invalid amount format' };
+  }
+};
+
+// Form validation
+const isFormValid = computed(() => {
+  // Amount is optional, but if provided, it must be valid
+  if (form.value.amount.trim() === '')
+    return true; // Valid when empty (amount is optional)
+
+  return amountValidation.value.isValid;
+});
+
+// Generate QR Code
+const generateQRCode = async () => {
+  // Generate QR code even without amount (amount is optional)
+  try {
+    const baseUrl = window.location.origin;
+    const params = new URLSearchParams({
+      nai: nai.value,
+      precision: precision.value as string,
+      to: userOperationalKey.value || ''
+    });
+
+    // Add amount only if provided and valid
+    if (form.value.amount.trim() && amountValidation.value.isValid)
+      params.append('amount', form.value.amount);
+
+    // Add memo only if provided
+    if (form.value.memo.trim())
+      params.append('memo', form.value.memo);
+
+    const url = `${baseUrl}/tokens/send-token?${params.toString()}`;
+    const dataUrl = await QRCode.toDataURL(url, {
+      width: 300,
+      margin: 2,
+      color: {
+        dark: '#000000',
+        light: '#FFFFFF'
+      }
+    });
+    qrCodeDataUrl.value = dataUrl;
+  } catch (error) {
+    console.error('Failed to generate QR code:', error);
+    qrCodeDataUrl.value = '';
+  }
+};
+
+// Watch form changes and regenerate QR code (only in send mode)
+watch([() => form.value.amount, () => form.value.memo, userOperationalKey], async () => {
+  if (!isReceiveMode.value)
+    await generateQRCode();
+}, { immediate: false });
+
+// Parse asset amount - convert decimal to base units (integer with precision zeros)
+const parseAssetAmount = (amountStr: string, precision: number): string => {
+  const [integerPart, fractionalPart = ''] = amountStr.split('.');
+  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
+  return integerPart + normalizedFractional;
+};
+
+// Handle send transaction
+const handleSend = async () => {
+  if (!token.value || !isLoggedIn.value) {
+    toastError('You must be logged in to send tokens', new Error('Not logged in'));
+    return;
+  }
+
+  if (!form.value.amount || !receiverKey.value) {
+    toastError('Missing required fields', new Error('Amount and receiver are required'));
+    return;
+  }
+
+  // Validate amount
+  if (!amountValidation.value.isValid) {
+    toastError('Invalid amount', new Error(amountValidation.value.error || 'Invalid amount format'));
+    return;
+  }
+
+  if (typeof settingsStore.settings.account === 'undefined' || walletStore.isL2Wallet)
+    throw new Error('Transferring via proxy is not supported yet. Please log in using your L1 wallet first.');
+
+  try {
+    isSending.value = true;
+
+    // Convert decimal amount to base units (add precision zeros)
+    const baseAmount = parseAssetAmount(form.value.amount, token.value.precision || 0);
+
+    // Wait for transaction status
+    await waitForTransactionStatus(
+      () => ([{
+        token_transfer_operation: {
+          amount: {
+            amount: baseAmount,
+            nai: token.value!.nai!,
+            precision: token.value!.precision || 0
+          },
+          receiver: receiverKey.value!,
+          sender: CTokensProvider.getOperationalPublicKey()!,
+          memo: form.value.memo
+        }
+      } satisfies htm_operation]),
+      'Transfer'
+    );
+
+    toast.success('Token sent successfully!');
+
+    // Reload balances
+    await tokensStore.loadBalances(true);
+
+    // Navigate back
+    router.push({
+      path: '/tokens/token',
+      query: { nai: nai.value, precision: precision.value }
+    });
+  } catch (error) {
+    toastError('Transfer failed', error);
+  } finally {
+    isSending.value = false;
+  }
+};
+
+// Load token details
+const loadTokenDetails = async () => {
+  try {
+    const wax = await getWax();
+
+    // Fetch token details by NAI
+    let tokens = await wax.restApi.ctokensApi.registeredTokens({
+      nai: nai.value,
+      precision: Number(precision.value!)
+    });
+
+    if (!tokens || tokens.length === 0) {
+      const allTokens = await wax.restApi.ctokensApi.registeredTokens({});
+      tokens = allTokens.filter(t => t.nai === nai.value);
+    }
+
+    if (!tokens || tokens.length === 0)
+      throw new Error(`Token with NAI ${nai.value} not found`);
+
+    token.value = tokens[0];
+
+  } catch (error) {
+    toastError('Failed to load token details', error);
+    router.push('/tokens/list');
+  }
+};
+
+// Navigate back to token detail
+const goBack = () => {
+  router.push({
+    path: '/tokens/token',
+    query: { nai: nai.value, precision: precision.value }
+  });
+};
+
+// Initialize
+onMounted(async () => {
+  if (!isLoggedIn.value) {
+    toast.error('You must be logged in to use this feature');
+    router.push('/');
+    return;
+  }
+
+  isLoading.value = true;
+  await loadTokenDetails();
+
+  // Initialize form with query params if in receive mode
+  if (isReceiveMode.value) {
+    form.value.amount = queryAmount.value || '';
+    form.value.memo = queryMemo.value || '';
+    if (form.value.memo)
+      addingMemo.value = true;
+  }
+
+  isLoading.value = false;
+
+  // Check ownership only if NOT in receive mode
+  if (!isReceiveMode.value && !isTokenOwner.value) {
+    toast.error('You do not have permission to send this token');
+    router.push({
+      path: '/tokens/token',
+      query: { nai: nai.value, precision: precision.value }
+    });
+    return;
+  }
+
+  // Generate initial QR code if not in receive mode
+  if (!isReceiveMode.value)
+    await generateQRCode();
+});
+</script>
+
+<template>
+  <HTMView>
+    <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-4xl">
+      <!-- Header -->
+      <div class="flex items-center justify-between gap-4">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="gap-2 hover:bg-accent"
+          @click="goBack"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiArrowLeft"
+            />
+          </svg>
+          Back to Token
+        </Button>
+      </div>
+
+      <!-- Loading State -->
+      <div
+        v-if="isLoading"
+        class="space-y-6"
+      >
+        <Card>
+          <CardHeader>
+            <Skeleton class="h-8 w-48" />
+            <Skeleton class="h-4 w-64" />
+          </CardHeader>
+          <CardContent class="space-y-4">
+            <Skeleton class="h-10 w-full" />
+            <Skeleton class="h-10 w-full" />
+            <Skeleton class="h-24 w-full" />
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Send Form -->
+      <div
+        v-else-if="token && (isTokenOwner || isReceiveMode)"
+        class="space-y-6"
+      >
+        <!-- Page Title -->
+        <div>
+          <h1 class="text-3xl font-bold text-foreground mb-2">
+            {{ isReceiveMode ? 'Send Token' : 'Receive Token' }}
+          </h1>
+          <p class="text-muted-foreground">
+            {{ isReceiveMode ? 'Confirm and sned the token transfer.' : 'Scan the generated QR code and transfer the token.' }}
+          </p>
+        </div>
+
+        <!-- Send token Card -->
+        <Card>
+          <CardHeader>
+            <CardTitle>Transfer details</CardTitle>
+            <CardDescription>
+              {{ isReceiveMode ? 'Review the transfer details' : 'Specify the transfer amount' }}
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-6">
+            <!-- Sender -->
+            <div
+              v-if="isReceiveMode"
+              class="space-y-2"
+            >
+              <Label
+                for="sender"
+                class="text-sm font-medium text-foreground"
+              >
+                Sender (You)
+              </Label>
+              <Input
+                id="sender"
+                :model-value="userOperationalKey"
+                readonly
+                class="transition-colors bg-muted/50 cursor-not-allowed"
+              />
+              <p class="text-xs text-muted-foreground">
+                Sender operational public key
+              </p>
+            </div>
+
+            <Separator v-if="isReceiveMode" />
+
+            <!-- Receiver -->
+            <div class="space-y-2">
+              <Label
+                for="receiver"
+                class="text-sm font-medium text-foreground"
+              >
+                Receiver{{ !isReceiveMode ? ' (You)' : '' }}
+              </Label>
+              <Input
+                id="receiver"
+                :model-value="isReceiveMode ? receiverKey : userOperationalKey"
+                readonly
+                :class="isReceiveMode ? 'transition-colors bg-muted/50 cursor-not-allowed' : 'transition-colors bg-muted/50 cursor-not-allowed'"
+              />
+              <p class="text-xs text-muted-foreground">
+                Receiver operational public key
+              </p>
+            </div>
+
+            <Separator />
+
+            <!-- Transfer Amount -->
+            <div class="space-y-2">
+              <Label
+                for="amount"
+                class="text-sm font-medium text-foreground"
+              >
+                Amount (optional)
+              </Label>
+              <div class="relative">
+                <Input
+                  id="amount"
+                  v-model="form.amount"
+                  type="text"
+                  inputmode="decimal"
+                  :placeholder="`Amount in ${tokenSymbol || tokenName}`"
+                  class="pr-20 transition-colors"
+                  :class="[
+                    form.amount ? (amountValidation.isValid ? 'border-green-500 focus-visible:ring-green-500' : 'border-red-500 focus-visible:ring-red-500') : '',
+                  ]"
+                />
+                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground font-medium">
+                  {{ tokenSymbol }}
+                </span>
+              </div>
+              <p
+                v-if="token"
+                class="text-xs text-muted-foreground"
+              >
+                Precision: {{ token.precision }} decimal places
+              </p>
+              <p
+                v-if="form.amount && !amountValidation.isValid && amountValidation.error"
+                class="text-xs text-red-500"
+              >
+                {{ amountValidation.error }}
+              </p>
+            </div>
+
+            <Separator v-if="!isReceiveMode" />
+
+            <!-- memo -->
+            <div
+              v-if="addingMemo || (isReceiveMode && form.memo)"
+              class="space-y-2"
+            >
+              <Label
+                for="memo"
+                class="text-sm font-medium text-foreground"
+              >
+                Memo
+              </Label>
+              <Textarea
+                id="memo"
+                v-model="form.memo"
+                placeholder="Add memo..."
+                rows="4"
+                :readonly="isReceiveMode"
+                :disabled="isUpdating"
+                :class="[
+                  'resize-none',
+                  isReceiveMode ? 'bg-muted/50 cursor-not-allowed' : ''
+                ]"
+              />
+              <p class="text-xs text-muted-foreground">
+                A brief memo for token transfer
+              </p>
+            </div>
+
+            <Button
+              v-if="!isReceiveMode"
+              variant="ghost"
+              size="sm"
+              class="gap-2"
+              @click="addingMemo = !addingMemo"
+            >
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="flex-shrink-0"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="addingMemo ? mdiArrowUp : mdiArrowDown"
+                />
+              </svg>
+              {{ addingMemo ? 'Collapse' : 'Add Memo' }}
+            </Button>
+
+            <!-- Send Button (only in receive mode) -->
+            <div
+              v-if="isReceiveMode"
+              class="pt-4"
+            >
+              <Button
+                class="w-full"
+                :disabled="isSending || !isFormValid || (form.amount.trim() !== '' && !amountValidation.isValid)"
+                @click="handleSend"
+              >
+                {{ isSending ? 'Sending...' : 'Send Token' }}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <!-- QR Code Card (only in send mode) -->
+        <Card v-if="!isReceiveMode">
+          <CardContent class="flex flex-col items-center">
+            <div
+              v-if="qrCodeDataUrl"
+              class="bg-white p-4 rounded-lg my-4"
+            >
+              <img
+                :src="qrCodeDataUrl"
+                alt="QR Code for token transfer"
+                class="w-full h-auto"
+              >
+            </div>
+            <div
+              v-else
+              class="bg-white p-4 rounded-lg my-4 flex items-center justify-center"
+              style="width: 300px; height: 300px;"
+            >
+              <p class="text-muted-foreground text-center">
+                Generating QR code...
+              </p>
+            </div>
+            <p class="text-xs text-muted-foreground text-center max-w-md">
+              This QR code contains the transfer details. The receiver can scan it to accept the token.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  </HTMView>
+</template>
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index bc0177b..d8a5783 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { mdiPencilOutline, mdiContentCopy, mdiCheck } from '@mdi/js';
+import { mdiPencilOutline, mdiContentCopy, mdiCheck, mdiQrcodeScan } from '@mdi/js';
 import type { htm_operation } from '@mtyszczak-cargo/htm';
 import { onMounted, ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -584,6 +584,13 @@ const editToken = () => {
   });
 };
 
+const showQRCode = () => {
+  router.push({
+    path: '/tokens/send-token',
+    query: { nai: token.value?.nai, precision: token.value?.precision }
+  });
+};
+
 // Copy owner address to clipboard
 const copyOwnerAddress = () => {
   if (!token.value?.owner) return;
@@ -659,27 +666,51 @@ onMounted(async () => {
           </svg>
           Back to Tokens
         </Button>
-        <Button
-          v-if="isTokenOwner"
-          variant="default"
-          size="sm"
-          class="gap-2"
-          @click="editToken"
+        <div
+          class="flex gap-3"
         >
-          <svg
-            width="16"
-            height="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="flex-shrink-0"
+          <Button
+            variant="outline"
+            size="sm"
+            class="gap-2"
+            @click="showQRCode"
           >
-            <path
-              style="fill: currentColor"
-              :d="mdiPencilOutline"
-            />
-          </svg>
-          Edit Token Definition
-        </Button>
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="flex-shrink-0"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiQrcodeScan"
+              />
+            </svg>
+            Show QR Code
+          </Button>
+          <Button
+            v-if="isTokenOwner"
+            variant="default"
+            size="sm"
+            class="gap-2"
+            @click="editToken"
+          >
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="flex-shrink-0"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiPencilOutline"
+              />
+            </svg>
+            Edit Token Definition
+          </Button>
+        </div>
       </div>
 
       <!-- Loading State -->
diff --git a/src/utils/router.ts b/src/utils/router.ts
index 179fe4f..b9d9e7f 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -14,6 +14,7 @@ import TokensList from '@/pages/tokens/list.vue';
 import AccountBalances from '@/pages/tokens/my-balance.vue';
 import TokenDefinitions from '@/pages/tokens/my-tokens.vue';
 import RegisterHTMAccount from '@/pages/tokens/register-account.vue';
+import SendToken from '@/pages/tokens/send-token.vue';
 import TokenDetail from '@/pages/tokens/token.vue';
 
 const standardPath = (path: string, component: Component) => ({ path, component });
@@ -40,6 +41,7 @@ export const routes = [
   tokensPath('/tokens/register-account', RegisterHTMAccount),
   tokensPath('/tokens/create', CreateToken),
   tokensPath('/tokens/edit', EditToken),
+  tokensPath('/tokens/send-token', SendToken),
   tokensPath('/tokens/my-tokens', TokenDefinitions),
   tokensPath('/tokens/my-balance', AccountBalances),
   tokensPath('/tokens/list', TokensList),
-- 
GitLab


From c846f0482003049ffa34b63da37830c1d32acb4e Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Tue, 28 Oct 2025 14:42:26 +0100
Subject: [PATCH 058/102] Move to Nuxt to simplify layouts, router views and
 enable server

---
 .env.dev                                      |     6 +-
 .env.example                                  |    14 +-
 .gitignore                                    |     2 +
 app.vue                                       |    30 +
 components.json                               |     2 +-
 eslint.config.mjs                             |   174 +-
 index.html                                    |    16 -
 nuxt.config.ts                                |    56 +
 package.json                                  |    20 +-
 pnpm-lock.yaml                                | 11096 +++++++++++++---
 src/{style.css => assets/css/tailwind.css}    |     0
 src/components/navigation/AppSidebar.vue      |     8 +-
 .../wallets/metamask/MetamaskConnect.vue      |     2 +-
 src/components/ui/round-progress/Progress.vue |     2 +-
 src/components/utilcards/MemoEncryptCard.vue  |     6 +-
 .../utilcards/RequestAccountCreateManual.vue  |     4 +-
 src/components/wallet/HTMProvidePassword.vue  |     7 +-
 src/{App.vue => layouts/default.vue}          |    82 +-
 src/lib/utils.ts                              |    18 +-
 src/main.ts                                   |    15 -
 src/pages/tokens/token.vue                    |     4 +-
 src/stores/metamask.store.ts                  |    10 +-
 src/stores/wax.store.ts                       |    12 +-
 src/utils/router.ts                           |    49 -
 src/utils/wallet/ctokens/api/index.d.ts       |     2 +-
 src/utils/wallet/ctokens/signer.ts            |    12 +-
 src/utils/wallet/metamask/snap.ts             |    19 -
 src/vite-env.d.ts                             |     5 +-
 tailwind.config.js                            |    11 +-
 tsconfig.app.json                             |    21 -
 tsconfig.json                                 |    20 +-
 tsconfig.node.json                            |    24 -
 vite.config.ts                                |    61 -
 33 files changed, 9480 insertions(+), 2330 deletions(-)
 create mode 100644 app.vue
 delete mode 100644 index.html
 create mode 100644 nuxt.config.ts
 rename src/{style.css => assets/css/tailwind.css} (100%)
 rename src/{App.vue => layouts/default.vue} (53%)
 delete mode 100644 src/main.ts
 delete mode 100644 src/utils/router.ts
 delete mode 100644 src/utils/wallet/metamask/snap.ts
 delete mode 100644 tsconfig.app.json
 delete mode 100644 tsconfig.node.json
 delete mode 100644 vite.config.ts

diff --git a/.env.dev b/.env.dev
index 6923b71..509a8b5 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,3 +1,3 @@
-VITE_CTOKENS_API_URL=https://htm.fqdn.pl:10081
-VITE_HIVE_NODE_ENDPOINT=https://htm.fqdn.pl:18091
-VITE_HIVE_CHAIN_ID=42
+NUXT_PUBLIC_CTOKENS_API_URL=https://htm.fqdn.pl:10081
+NUXT_PUBLIC_HIVE_NODE_ENDPOINT=https://htm.fqdn.pl:18091
+NUXT_PUBLIC_HIVE_CHAIN_ID=42
diff --git a/.env.example b/.env.example
index 4c6dd00..931b348 100644
--- a/.env.example
+++ b/.env.example
@@ -1,16 +1,16 @@
-## To use this, rename to `.env` and set the production VITE_SNAP_ORIGIN here
-VITE_SNAP_ORIGIN=
+## To use this, rename to `.env` and set the production NUXT_PUBLIC_SNAP_ORIGIN here
+NUXT_PUBLIC_SNAP_ORIGIN=
 ## Uncomment this if you want to use a specific version of the Snap runtime:
-# VITE_SNAP_VERSION=
+# NUXT_PUBLIC_SNAP_VERSION=
 
 # Custom Tokens API Configuration
 # Set this to your ctokens-api server URL
 # Example for local development: http://localhost:3000/ctokens-api
 # Example for remote server: https://api.example.com/ctokens-api
 # Leave empty to use default relative path /ctokens-api
-VITE_CTOKENS_API_URL=
-VITE_HIVE_NODE_ENDPOINT=
-VITE_HIVE_CHAIN_ID=
+NUXT_PUBLIC_CTOKENS_API_URL=
+NUXT_PUBLIC_HIVE_NODE_ENDPOINT=
+NUXT_PUBLIC_HIVE_CHAIN_ID=
 
 # For development, you can set a mock server URL
-# VITE_CTOKENS_API_URL=http://localhost:8080/mock-ctokens-api
+# NUXT_PUBLIC_CTOKENS_API_URL=http://localhost:8080/mock-ctokens-api
diff --git a/.gitignore b/.gitignore
index 84a4c07..05d1dea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,8 @@ build/
 coverage/
 .cache/
 .vscode
+.nuxt/
+.output/
 
 # Logs
 snap/snapper.log.json
diff --git a/app.vue b/app.vue
new file mode 100644
index 0000000..caf8ba8
--- /dev/null
+++ b/app.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Toaster } from 'vue-sonner';
+
+import ErrorDialog from '@/components/ErrorDialog.vue';
+</script>
+
+<template>
+  <div id="shadcn-root">
+    <div id="app-main">
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+      <Toaster
+        theme="dark"
+        close-button
+        rich-colors
+      />
+      <ErrorDialog />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#shadcn-root {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  overflow: hidden;
+  font-family: Verdana, sans-serif;
+}
+</style>
diff --git a/components.json b/components.json
index 5d22e4a..421fa64 100644
--- a/components.json
+++ b/components.json
@@ -4,7 +4,7 @@
   "typescript": true,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "src/style.css",
+    "css": "src/assets/css/tailwind.css",
     "baseColor": "zinc",
     "cssVariables": true,
     "prefix": ""
diff --git a/eslint.config.mjs b/eslint.config.mjs
index b7c8f03..c68aefe 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,58 +1,9 @@
-import { defineConfig, globalIgnores } from 'eslint/config';
-import typescriptEslint from '@typescript-eslint/eslint-plugin';
-import { fixupPluginRules } from "@eslint/compat";
-import _import from "eslint-plugin-import";
-import vue from 'eslint-plugin-vue';
-import globals from 'globals';
-import js from '@eslint/js';
-import { FlatCompat } from '@eslint/eslintrc';
-
-const compat = new FlatCompat({
-  baseDirectory: import.meta.dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all
-});
-
-export default defineConfig([globalIgnores([
-  '**/eslint.config.mjs',
-  '**/lib/utils.ts',
-  '**/.github',
-  '**/vite.config.ts',
-  '**/node_modules',
-  '**/dist',
-  '**/tailwind.config.js',
-  '**/vite-env.d.ts',
-  'src/components/ui/*/**',
-  '!src/components/ui/hive/**',
-  '**/common-ci-configuration',
-  'npm-common-config/**/*',
-]),
-js.configs.recommended,
-...compat.extends('plugin:@typescript-eslint/recommended'),
-...vue.configs['flat/recommended'],
-{
-  files: ['**/*.vue', '**/*.ts', '**/*.js'],
-  plugins: {
-    vue,
-    import: fixupPluginRules(_import),
-    '@typescript-eslint': typescriptEslint,
-  },
-
-  languageOptions: {
-    globals: {
-      ...globals.node,
-      ...globals.browser,
-    },
-
-    ecmaVersion: 2020,
-    sourceType: 'module',
-
-    parserOptions: {
-      parser: '@typescript-eslint/parser',
-      extraFileExtensions: ['.vue'],
-    },
-  },
+import withNuxt from './.nuxt/eslint.config.mjs';
 
+// Use a functional override to avoid mutating possibly-frozen rule objects returned by withNuxt()
+// Also append a small config to add an ignore for shadcn auto-generated UI components
+export default withNuxt().override('nuxt/rules', {
+  ignores: ['src/components/ui/**', 'src/utils/wallet/ctokens/api/**'],
   rules: {
     // Core ESLint rules
     semi: ['error', 'always'],
@@ -65,99 +16,108 @@ js.configs.recommended,
     'no-trailing-spaces': 'error',
     'space-before-function-paren': ['error', 'always'],
     indent: ['error', 2],
-    'comma-dangle': ['error', 'never'],
-
-    // TypeScript rules
-    '@typescript-eslint/no-extra-semi': 'off',
-    '@typescript-eslint/strict-boolean-expressions': 'off',
-    '@typescript-eslint/explicit-member-accessibility': 'error',
-    '@typescript-eslint/no-empty-object-type': 'off',
-    '@typescript-eslint/consistent-type-imports': 'error',
-    '@typescript-eslint/no-unused-vars': ['error', {
-      argsIgnorePattern: '^_',
-      varsIgnorePattern: '^_',
-      caughtErrorsIgnorePattern: '^_',
-    }],
-
+    'comma-dangle': ['error', 'never']
+  }
+}).override('nuxt/import/rules', {
+  ignores: ['src/components/ui/**', 'src/utils/wallet/ctokens/api/**'],
+  rules: {
     // Import rules
-    "import/no-self-import": 2,
-    "import/no-cycle": 2,
-    "import/export": 2,
-    "import/no-unused-modules": 1,
-    "import/no-commonjs": 1,
-    "import/newline-after-import": 2,
-    "import/first": 2,
-    "import/no-duplicates": 2,
-    "import/order": [ 2, {
+    'import/no-self-import': 2,
+    'import/no-cycle': 2,
+    'import/export': 2,
+    'import/no-unused-modules': 1,
+    'import/no-commonjs': 1,
+    'import/newline-after-import': 2,
+    'import/first': 2,
+    'import/no-duplicates': 2,
+    'import/order': [ 2, {
       groups: [
-        "builtin",     // Node.js built-in modules
-        "external",    // External libraries (node_modules)
-        "internal",    // Internal modules (using @ alias)
-        "parent",      // Relative imports from parent directories
-        "sibling",     // Relative imports from same directory
-        "index"        // Index files
+        'builtin',     // Node.js built-in modules
+        'external',    // External libraries (node_modules)
+        'internal',    // Internal modules (using @ alias)
+        'parent',      // Relative imports from parent directories
+        'sibling',     // Relative imports from same directory
+        'index'        // Index files
       ],
       pathGroups: [
         {
-          pattern: "@/**",
-          group: "internal",
-          position: "before"
+          pattern: '@/**',
+          group: 'internal',
+          position: 'before'
         }
       ],
-      pathGroupsExcludedImportTypes: ["builtin"],
-      "newlines-between": "always",
+      pathGroupsExcludedImportTypes: ['builtin'],
+      'newlines-between': 'always',
       alphabetize: {
-        order: "asc",
+        order: 'asc',
         caseInsensitive: true
       }
-    } ],
-
+    } ]
+  }
+}).override('nuxt/vue/rules', {
+  ignores: ['src/components/ui/**', 'src/utils/wallet/ctokens/api/**'],
+  rules: {
     // Vue rules
-    'vue/multi-word-component-names': 'off',
+    'vue/multi-word-component-names': 'off'
+  }
+}).override('nuxt/typescript/rules', {
+  ignores: ['src/components/ui/**', 'src/utils/wallet/ctokens/api/**'],
+  rules: {
+    // TypeScript rules
+    '@typescript-eslint/no-extra-semi': 'off',
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+    '@typescript-eslint/explicit-member-accessibility': 'error',
+    '@typescript-eslint/no-empty-object-type': 'off',
+    '@typescript-eslint/consistent-type-imports': 'error',
+    '@typescript-eslint/no-unused-vars': ['error', {
+      argsIgnorePattern: '^_',
+      varsIgnorePattern: '^_',
+      caughtErrorsIgnorePattern: '^_'
+    }],
 
     '@typescript-eslint/naming-convention': ['error', {
       selector: 'interface',
-      format: ['PascalCase'],
+      format: ['PascalCase']
     }, {
       selector: 'typeParameter',
-      format: ['PascalCase'],
+      format: ['PascalCase']
     }, {
       selector: 'enum',
-      format: ['PascalCase'],
+      format: ['PascalCase']
     }, {
       selector: 'enumMember',
-      format: ['UPPER_CASE'],
+      format: ['UPPER_CASE']
     }, {
       selector: 'class',
-      format: ['PascalCase'],
+      format: ['PascalCase']
     }, {
       selector: 'default',
       format: ['camelCase'],
       leadingUnderscore: 'allow',
-      trailingUnderscore: 'allow',
+      trailingUnderscore: 'allow'
     }, {
       selector: 'import',
-      format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
+      format: ['camelCase', 'PascalCase', 'UPPER_CASE']
     }, {
       selector: 'variable',
       format: ['camelCase', 'UPPER_CASE', 'PascalCase', 'snake_case'],
       leadingUnderscore: 'allow',
-      trailingUnderscore: 'allow',
+      trailingUnderscore: 'allow'
     }, {
       selector: 'typeAlias',
-      format: ['PascalCase'],
+      format: ['PascalCase']
     }, {
       selector: 'objectLiteralProperty',
       format: ['camelCase', 'PascalCase', 'UPPER_CASE', 'snake_case'],
       leadingUnderscore: 'allow',
-      trailingUnderscore: 'allow',
+      trailingUnderscore: 'allow'
     }, {
       selector: 'typeProperty',
       format: ['camelCase', 'UPPER_CASE', 'snake_case'],
-      leadingUnderscore: 'allow',
+      leadingUnderscore: 'allow'
     }, {
       selector: 'classProperty',
-      format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
-    }],
-  },
-}]);
+      format: ['camelCase', 'UPPER_CASE', 'PascalCase']
+    }]
+  }
+});
diff --git a/index.html b/index.html
deleted file mode 100644
index 5e46b36..0000000
--- a/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
-    <meta http-equiv="Pragma" content="no-cache" />
-    <meta http-equiv="Expires" content="0" />
-    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
-    <title>Hive Bridge</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
diff --git a/nuxt.config.ts b/nuxt.config.ts
new file mode 100644
index 0000000..1106371
--- /dev/null
+++ b/nuxt.config.ts
@@ -0,0 +1,56 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { defineNuxtConfig } from 'nuxt/config';
+
+const getCommitHash = () => {
+  const rev = fs.readFileSync('.git/HEAD').toString().trim();
+
+  if (!rev.includes(':'))
+    return rev;
+  else
+    return fs.readFileSync(`.git/${rev.substring(5)}`).toString().trim();
+};
+
+export default defineNuxtConfig({
+  compatibilityDate: '2025-10-28',
+  app: {
+    head: {
+      title: 'Hive Bridge',
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'description', content: 'Bridge to Hive' }
+      ],
+      link: [
+        { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
+      ]
+    }
+  },
+  dir: {
+    app: 'src',
+    assets: 'src/assets',
+    layouts: 'src/layouts',
+    pages: 'src/pages',
+    middleware: 'src/middleware',
+    plugins: 'src/plugins'
+  },
+  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', '@nuxt/eslint', '@pinia/nuxt'],
+  alias: {
+    /* eslint-disable-next-line @typescript-eslint/naming-convention */
+    '@': path.resolve(import.meta.dirname, './src')
+  },
+  eslint: {
+    checker: true
+  },
+  runtimeConfig: {
+    public: {
+      commitHash: getCommitHash(),
+      ctokensApiUrl: 'https://htm.fqdn.pl:10081',
+      hiveNodeEndpoint: 'https://api.hive.blog',
+      hiveChainId: '',
+      snapOrigin: '',
+      snapVersion: ''
+    }
+  }
+});
diff --git a/package.json b/package.json
index fc3b339..e4ae217 100644
--- a/package.json
+++ b/package.json
@@ -17,11 +17,13 @@
     "dist"
   ],
   "scripts": {
-    "start": "vite",
-    "build": "vue-tsc -b && vite build",
-    "preview": "vite preview",
+    "start": "nuxt dev",
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview",
     "lint": "npm run lint-ci -- --fix",
-    "lint-ci": "eslint --max-warnings=0"
+    "lint-ci": "eslint --max-warnings=0",
+    "postinstall": "nuxt prepare"
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.1",
@@ -36,6 +38,10 @@
     "@metamask/providers": "^16.0.0",
     "@mtyszczak-cargo/htm": "^1.0.1",
     "@nabla/vite-plugin-eslint": "^2.0.6",
+    "@nuxt/eslint": "1.9.0",
+    "@nuxtjs/color-mode": "^3.5.2",
+    "@nuxtjs/tailwindcss": "6.13.1",
+    "@pinia/nuxt": "0.11.2",
     "@stylistic/eslint-plugin": "^5.2.2",
     "@tanstack/vue-table": "^8.21.2",
     "@types/node": "^22.13.9",
@@ -54,7 +60,8 @@
     "eslint-plugin-vue": "^10.3.0",
     "globals": "^16.3.0",
     "lucide-vue-next": "^0.477.0",
-    "pinia": "^3.0.1",
+    "nuxt": "^4.2.0",
+    "pinia": "^3.0.3",
     "reka-ui": "^2.0.2",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "3",
@@ -62,10 +69,11 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.38.0",
     "vite": "^6.2.0",
+    "vite-plugin-eslint2": "^5.0.4",
     "vue": "^3.5.13",
     "vue-router": "4",
     "vue-sonner": "^1.3.0",
-    "vue-tsc": "^2.2.4"
+    "vue-tsc": "^3.1.2"
   },
   "packageManager": "pnpm@10.0.0+sha512.b8fef5494bd3fe4cbd4edabd0745df2ee5be3e4b0b8b08fa643aa3e4c6702ccc0f00d68fa8a8c9858a735a0032485a44990ed2810526c875e416f001b17df12b",
   "engines": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef65fe9..9a8b39f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ importers:
     devDependencies:
       '@eslint/compat':
         specifier: ^1.3.1
-        version: 1.3.1(eslint@9.32.0(jiti@1.21.7))
+        version: 1.3.1(eslint@9.32.0(jiti@2.6.1))
       '@eslint/eslintrc':
         specifier: ^3.3.1
         version: 3.3.1
@@ -47,10 +47,22 @@ importers:
         version: 1.0.1(@hiveio/wax@1.27.12-rc2-251027102101)
       '@nabla/vite-plugin-eslint':
         specifier: ^2.0.6
-        version: 2.0.6(eslint@9.32.0(jiti@1.21.7))(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0))
+        version: 2.0.6(eslint@9.32.0(jiti@2.6.1))(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
+      '@nuxt/eslint':
+        specifier: 1.9.0
+        version: 1.9.0(@typescript-eslint/utils@8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(@vue/compiler-sfc@3.5.22)(eslint-import-resolver-node@0.3.9)(eslint@9.32.0(jiti@2.6.1))(magicast@0.3.5)(typescript@5.7.3)(vite-plugin-eslint2@5.0.4(@types/eslint@9.6.1)(eslint@9.32.0(jiti@2.6.1))(rollup@4.52.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)))(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
+      '@nuxtjs/color-mode':
+        specifier: ^3.5.2
+        version: 3.5.2(magicast@0.3.5)
+      '@nuxtjs/tailwindcss':
+        specifier: 6.13.1
+        version: 6.13.1(magicast@0.3.5)(ts-node@10.9.2(@swc/core@1.3.78(@swc/helpers@0.5.15))(@types/node@22.13.9)(typescript@5.7.3))
+      '@pinia/nuxt':
+        specifier: 0.11.2
+        version: 0.11.2(magicast@0.3.5)(pinia@3.0.3(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))
       '@stylistic/eslint-plugin':
         specifier: ^5.2.2
-        version: 5.2.2(eslint@9.32.0(jiti@1.21.7))
+        version: 5.2.2(eslint@9.32.0(jiti@2.6.1))
       '@tanstack/vue-table':
         specifier: ^8.21.2
         version: 8.21.2(vue@3.5.13(typescript@5.7.3))
@@ -62,16 +74,16 @@ importers:
         version: 1.5.6
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.38.0
-        version: 8.38.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
+        version: 8.38.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
       '@typescript-eslint/parser':
         specifier: ^8.38.0
-        version: 8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
+        version: 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
       '@vitejs/plugin-vue':
         specifier: ^5.2.1
-        version: 5.2.1(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+        version: 5.2.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.13(typescript@5.7.3))
       '@vue/eslint-config-typescript':
         specifier: ^14.6.0
-        version: 14.6.0(eslint-plugin-vue@10.3.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint@9.32.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@1.21.7))))(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
+        version: 14.6.0(eslint-plugin-vue@10.3.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@2.6.1))))(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
       '@vue/tsconfig':
         specifier: ^0.7.0
         version: 0.7.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
@@ -89,22 +101,25 @@ importers:
         version: 2.1.1
       eslint:
         specifier: ^9.32.0
-        version: 9.32.0(jiti@1.21.7)
+        version: 9.32.0(jiti@2.6.1)
       eslint-plugin-import:
         specifier: ^2.32.0
-        version: 2.32.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint@9.32.0(jiti@1.21.7))
+        version: 2.32.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))
       eslint-plugin-vue:
         specifier: ^10.3.0
-        version: 10.3.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint@9.32.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@1.21.7)))
+        version: 10.3.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@2.6.1)))
       globals:
         specifier: ^16.3.0
         version: 16.3.0
       lucide-vue-next:
         specifier: ^0.477.0
         version: 0.477.0(vue@3.5.13(typescript@5.7.3))
+      nuxt:
+        specifier: ^4.2.0
+        version: 4.2.0(@parcel/watcher@2.5.1)(@types/node@22.13.9)(@vue/compiler-sfc@3.5.22)(db0@0.3.4)(eslint@9.32.0(jiti@2.6.1))(ioredis@5.8.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.5)(terser@5.39.0)(tsx@4.19.3)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue-tsc@3.1.2(typescript@5.7.3))(yaml@2.8.1)
       pinia:
-        specifier: ^3.0.1
-        version: 3.0.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
+        specifier: ^3.0.3
+        version: 3.0.3(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
       reka-ui:
         specifier: ^2.0.2
         version: 2.0.2(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
@@ -122,10 +137,13 @@ importers:
         version: 5.7.3
       typescript-eslint:
         specifier: ^8.38.0
-        version: 8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
+        version: 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
       vite:
         specifier: ^6.2.0
-        version: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0)
+        version: 6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+      vite-plugin-eslint2:
+        specifier: ^5.0.4
+        version: 5.0.4(@types/eslint@9.6.1)(eslint@9.32.0(jiti@2.6.1))(rollup@4.52.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.3)
@@ -136,8 +154,8 @@ importers:
         specifier: ^1.3.0
         version: 1.3.0
       vue-tsc:
-        specifier: ^2.2.4
-        version: 2.2.8(typescript@5.7.3)
+        specifier: ^3.1.2
+        version: 3.1.2(typescript@5.7.3)
 
 packages:
 
@@ -145,183 +163,512 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  '@antfu/install-pkg@1.1.0':
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+
+  '@apidevtools/json-schema-ref-parser@14.2.1':
+    resolution: {integrity: sha512-HmdFw9CDYqM6B25pqGBpNeLCKvGPlIx1EbLrVL0zPvj50CJQUHyBNBw45Muk0kEIkogo1VZvOKHajdMuAzSxRg==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@types/json-schema': ^7.0.15
+
+  '@babel/code-frame@7.27.1':
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.28.5':
+    resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.28.5':
+    resolution: {integrity: sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.28.5':
+    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.27.2':
+    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-create-class-features-plugin@7.28.5':
+    resolution: {integrity: sha512-q3WC4JfdODypvxArsJQROfupPBq9+lMwjKq7C33GhbFYJsufD0yd/ziwD+hJucLeWsnFPWZjsU2DNFqBPE7jwQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.27.1':
+    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.3':
+    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-optimise-call-expression@7.27.1':
+    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.27.1':
+    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-replace-supers@7.27.1':
+    resolution: {integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-string-parser@7.25.9':
     resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.25.9':
     resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.28.4':
+    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/parser@7.26.9':
     resolution: {integrity: sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.28.5':
+    resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-syntax-jsx@7.27.1':
+    resolution: {integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.27.1':
+    resolution: {integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.28.5':
+    resolution: {integrity: sha512-x2Qa+v/CuEoX7Dr31iAfr0IhInrVOWZU/2vJMJ00FOR/2nM0BcBEclpaf9sWCDc+v5e9dMrhSH8/atq/kX7+bA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/template@7.27.2':
+    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.28.5':
+    resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.26.9':
     resolution: {integrity: sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.28.5':
+    resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
+    engines: {node: '>=6.9.0'}
+
+  '@clack/core@0.5.0':
+    resolution: {integrity: sha512-p3y0FIOwaYRUPRcMO7+dlmLh8PSRcrjuTndsiA0WAFbWES0mLZlrjVoBRZ9DzkPFJZG6KGkJmoEAY0ZcVWTkow==}
+
+  '@clack/prompts@0.11.0':
+    resolution: {integrity: sha512-pMN5FcrEw9hUkZA4f+zLlzivQSeQf5dRGJjSUbvVYDLvpKCdQx5OaknvKzgbtXOizhP+SJJJjqEbOe55uKKfAw==}
+
+  '@cloudflare/kv-asset-handler@0.4.0':
+    resolution: {integrity: sha512-+tv3z+SPp+gqTIcImN9o0hqE9xyfQjI1XD9pL6NuKjua9B1y7mNYv0S9cP+QEbA4ppVgGZEmKOvHX5G5Ei1CVA==}
+    engines: {node: '>=18.0.0'}
+
   '@cspotcode/source-map-support@0.8.1':
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
 
+  '@csstools/selector-resolve-nested@3.1.0':
+    resolution: {integrity: sha512-mf1LEW0tJLKfWyvn5KdDrhpxHyuxpbNwTIwOYLIvsTffeyOf85j5oIzfG0yosxDgx/sswlqBnESYUcQH0vgZ0g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+
+  '@csstools/selector-specificity@5.0.0':
+    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+
+  '@dxup/nuxt@0.2.0':
+    resolution: {integrity: sha512-tUS2040HEiGwjwZ8hTczfuRoiXSOuA+ATPXO9Bllf03nHHj1lSlmaAyVJHFsSXL5Os5NZqimNAZ1iDed7VElzA==}
+
+  '@dxup/unimport@0.1.0':
+    resolution: {integrity: sha512-6Q/Po8qGmlrShdG/R9+rpIhme9N/PGJumpvmwr1UAxGpt9DfOCt9kF8+yJkxhtPdJFL37KgUILZBRAkSU8cJZg==}
+
+  '@emnapi/core@1.6.0':
+    resolution: {integrity: sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg==}
+
+  '@emnapi/runtime@1.6.0':
+    resolution: {integrity: sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==}
+
+  '@emnapi/wasi-threads@1.1.0':
+    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
+
+  '@es-joy/jsdoccomment@0.56.0':
+    resolution: {integrity: sha512-c6EW+aA1w2rjqOMjbL93nZlwxp6c1Ln06vTYs5FjRRhmJXK8V/OrSXdT+pUr4aRYgjCgu8/OkiZr0tzeVrRSbw==}
+    engines: {node: '>=20.11.0'}
+
   '@esbuild/aix-ppc64@0.25.0':
     resolution: {integrity: sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/aix-ppc64@0.25.11':
+    resolution: {integrity: sha512-Xt1dOL13m8u0WE8iplx9Ibbm+hFAO0GsU2P34UNoDGvZYkY8ifSiy6Zuc1lYxfG7svWE2fzqCUmFp5HCn51gJg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/android-arm64@0.25.0':
     resolution: {integrity: sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm64@0.25.11':
+    resolution: {integrity: sha512-9slpyFBc4FPPz48+f6jyiXOx/Y4v34TUeDDXJpZqAWQn/08lKGeD8aDp9TMn9jDz2CiEuHwfhRmGBvpnd/PWIQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm@0.25.0':
     resolution: {integrity: sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-arm@0.25.11':
+    resolution: {integrity: sha512-uoa7dU+Dt3HYsethkJ1k6Z9YdcHjTrSb5NUy66ZfZaSV8hEYGD5ZHbEMXnqLFlbBflLsl89Zke7CAdDJ4JI+Gg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-x64@0.25.0':
     resolution: {integrity: sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
+  '@esbuild/android-x64@0.25.11':
+    resolution: {integrity: sha512-Sgiab4xBjPU1QoPEIqS3Xx+R2lezu0LKIEcYe6pftr56PqPygbB7+szVnzoShbx64MUupqoE0KyRlN7gezbl8g==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/darwin-arm64@0.25.0':
     resolution: {integrity: sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-arm64@0.25.11':
+    resolution: {integrity: sha512-VekY0PBCukppoQrycFxUqkCojnTQhdec0vevUL/EDOCnXd9LKWqD/bHwMPzigIJXPhC59Vd1WFIL57SKs2mg4w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.25.0':
     resolution: {integrity: sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.25.11':
+    resolution: {integrity: sha512-+hfp3yfBalNEpTGp9loYgbknjR695HkqtY3d3/JjSRUyPg/xd6q+mQqIb5qdywnDxRZykIHs3axEqU6l1+oWEQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/freebsd-arm64@0.25.0':
     resolution: {integrity: sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-arm64@0.25.11':
+    resolution: {integrity: sha512-CmKjrnayyTJF2eVuO//uSjl/K3KsMIeYeyN7FyDBjsR3lnSJHaXlVoAK8DZa7lXWChbuOk7NjAc7ygAwrnPBhA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.25.0':
     resolution: {integrity: sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.25.11':
+    resolution: {integrity: sha512-Dyq+5oscTJvMaYPvW3x3FLpi2+gSZTCE/1ffdwuM6G1ARang/mb3jvjxs0mw6n3Lsw84ocfo9CrNMqc5lTfGOw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/linux-arm64@0.25.0':
     resolution: {integrity: sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm64@0.25.11':
+    resolution: {integrity: sha512-Qr8AzcplUhGvdyUF08A1kHU3Vr2O88xxP0Tm8GcdVOUm25XYcMPp2YqSVHbLuXzYQMf9Bh/iKx7YPqECs6ffLA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm@0.25.0':
     resolution: {integrity: sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-arm@0.25.11':
+    resolution: {integrity: sha512-TBMv6B4kCfrGJ8cUPo7vd6NECZH/8hPpBHHlYI3qzoYFvWu2AdTvZNuU/7hsbKWqu/COU7NIK12dHAAqBLLXgw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.25.0':
     resolution: {integrity: sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.25.11':
+    resolution: {integrity: sha512-TmnJg8BMGPehs5JKrCLqyWTVAvielc615jbkOirATQvWWB1NMXY77oLMzsUjRLa0+ngecEmDGqt5jiDC6bfvOw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.25.0':
     resolution: {integrity: sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.25.11':
+    resolution: {integrity: sha512-DIGXL2+gvDaXlaq8xruNXUJdT5tF+SBbJQKbWy/0J7OhU8gOHOzKmGIlfTTl6nHaCOoipxQbuJi7O++ldrxgMw==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.25.0':
     resolution: {integrity: sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.25.11':
+    resolution: {integrity: sha512-Osx1nALUJu4pU43o9OyjSCXokFkFbyzjXb6VhGIJZQ5JZi8ylCQ9/LFagolPsHtgw6himDSyb5ETSfmp4rpiKQ==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.25.0':
     resolution: {integrity: sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.25.11':
+    resolution: {integrity: sha512-nbLFgsQQEsBa8XSgSTSlrnBSrpoWh7ioFDUmwo158gIm5NNP+17IYmNWzaIzWmgCxq56vfr34xGkOcZ7jX6CPw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.25.0':
     resolution: {integrity: sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.25.11':
+    resolution: {integrity: sha512-HfyAmqZi9uBAbgKYP1yGuI7tSREXwIb438q0nqvlpxAOs3XnZ8RsisRfmVsgV486NdjD7Mw2UrFSw51lzUk1ww==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.25.0':
     resolution: {integrity: sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.25.11':
+    resolution: {integrity: sha512-HjLqVgSSYnVXRisyfmzsH6mXqyvj0SA7pG5g+9W7ESgwA70AXYNpfKBqh1KbTxmQVaYxpzA/SvlB9oclGPbApw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-x64@0.25.0':
     resolution: {integrity: sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/linux-x64@0.25.11':
+    resolution: {integrity: sha512-HSFAT4+WYjIhrHxKBwGmOOSpphjYkcswF449j6EjsjbinTZbp8PJtjsVK1XFJStdzXdy/jaddAep2FGY+wyFAQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/netbsd-arm64@0.25.0':
     resolution: {integrity: sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
+  '@esbuild/netbsd-arm64@0.25.11':
+    resolution: {integrity: sha512-hr9Oxj1Fa4r04dNpWr3P8QKVVsjQhqrMSUzZzf+LZcYjZNqhA3IAfPQdEh1FLVUJSiu6sgAwp3OmwBfbFgG2Xg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.25.0':
     resolution: {integrity: sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.25.11':
+    resolution: {integrity: sha512-u7tKA+qbzBydyj0vgpu+5h5AeudxOAGncb8N6C9Kh1N4n7wU1Xw1JDApsRjpShRpXRQlJLb9wY28ELpwdPcZ7A==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/openbsd-arm64@0.25.0':
     resolution: {integrity: sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
+  '@esbuild/openbsd-arm64@0.25.11':
+    resolution: {integrity: sha512-Qq6YHhayieor3DxFOoYM1q0q1uMFYb7cSpLD2qzDSvK1NAvqFi8Xgivv0cFC6J+hWVw2teCYltyy9/m/14ryHg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.25.0':
     resolution: {integrity: sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.25.11':
+    resolution: {integrity: sha512-CN+7c++kkbrckTOz5hrehxWN7uIhFFlmS/hqziSFVWpAzpWrQoAG4chH+nN3Be+Kzv/uuo7zhX716x3Sn2Jduw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.25.11':
+    resolution: {integrity: sha512-rOREuNIQgaiR+9QuNkbkxubbp8MSO9rONmwP5nKncnWJ9v5jQ4JxFnLu4zDSRPf3x4u+2VN4pM4RdyIzDty/wQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@esbuild/sunos-x64@0.25.0':
     resolution: {integrity: sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/sunos-x64@0.25.11':
+    resolution: {integrity: sha512-nq2xdYaWxyg9DcIyXkZhcYulC6pQ2FuCgem3LI92IwMgIZ69KHeY8T4Y88pcwoLIjbed8n36CyKoYRDygNSGhA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/win32-arm64@0.25.0':
     resolution: {integrity: sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-arm64@0.25.11':
+    resolution: {integrity: sha512-3XxECOWJq1qMZ3MN8srCJ/QfoLpL+VaxD/WfNRm1O3B4+AZ/BnLVgFbUV3eiRYDMXetciH16dwPbbHqwe1uU0Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.25.0':
     resolution: {integrity: sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.25.11':
+    resolution: {integrity: sha512-3ukss6gb9XZ8TlRyJlgLn17ecsK4NSQTmdIXRASVsiS2sQ6zPPZklNJT5GR5tE/MUarymmy8kCEf5xPCNCqVOA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-x64@0.25.0':
     resolution: {integrity: sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
+  '@esbuild/win32-x64@0.25.11':
+    resolution: {integrity: sha512-D7Hpz6A2L4hzsRpPaCYkQnGOotdUpDzSGRIv9I+1ITdHROSFUWW95ZPZWQmGka1Fg7W3zFJowyn9WGwMJ0+KPA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@eslint-community/eslint-utils@4.7.0':
     resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
+  '@eslint-community/eslint-utils@4.9.0':
+    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
   '@eslint-community/regexpp@4.12.1':
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
@@ -343,6 +690,12 @@ packages:
     resolution: {integrity: sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/config-inspector@1.3.0':
+    resolution: {integrity: sha512-t+5Pra/8VX9Ue8V2p6skCeEMw9vm6HjwNF/n7l5nx78f3lUqLjzSTdMisFeo9AeYOj1hwEBiFYYGZ/Xn88cmHw==}
+    hasBin: true
+    peerDependencies:
+      eslint: ^8.50.0 || ^9.0.0
+
   '@eslint/core@0.15.1':
     resolution: {integrity: sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -355,6 +708,10 @@ packages:
     resolution: {integrity: sha512-BBpRFZK3eX6uMLKz8WxFOBIFFcGFJ/g8XuwjTHCqHROSIsopI+ddn/d5Cfh36+7+e5edVS8dbSHnBNhrLEX0zg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/js@9.38.0':
+    resolution: {integrity: sha512-UZ1VpFvXf9J06YG9xQBdnzU+kthors6KjhMAl6f4gH4usHyh31rUf2DLGInT8RFYIReYXNSydgPY0V2LuWgl7A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@eslint/object-schema@2.1.6':
     resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -434,14 +791,27 @@ packages:
   '@internationalized/number@3.6.0':
     resolution: {integrity: sha512-PtrRcJVy7nw++wn4W2OuePQQfTqDzfusSuY1QTtui4wa7r+rGVtR75pO8CyKvHvzyQYi3Q1uO5sY0AsB4e65Bw==}
 
+  '@ioredis/commands@1.4.0':
+    resolution: {integrity: sha512-aFT2yemJJo+TZCmieA7qnYGQooOS7QfNmYrzGtsYd3g9j5iDP8AimYYAesf79ohjbLG12XxC4nG5DyEnC88AsQ==}
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
   '@jridgewell/gen-mapping@0.3.8':
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -456,12 +826,33 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
   '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
 
+  '@koa/router@12.0.2':
+    resolution: {integrity: sha512-sYcHglGKTxGF+hQ6x67xDfkE9o+NhVlRHBqq6gLywaMc6CojK/5vFZByphdonKinYlMLkEkacm+HEse9HzwgTA==}
+    engines: {node: '>= 12'}
+
+  '@kwsites/file-exists@1.1.1':
+    resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
+
+  '@kwsites/promise-deferred@1.1.1':
+    resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
+
+  '@mapbox/node-pre-gyp@2.0.0':
+    resolution: {integrity: sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@mdi/js@7.4.47':
     resolution: {integrity: sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==}
 
@@ -535,6 +926,12 @@ packages:
       eslint: ^8.45 || ^9
       vite: ^4 || ^5 || ^6 || ^7
 
+  '@napi-rs/wasm-runtime@0.2.12':
+    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
+
+  '@napi-rs/wasm-runtime@1.0.7':
+    resolution: {integrity: sha512-SeDnOO0Tk7Okiq6DbXmmBODgOAb9dp9gjlphokTUxmt8U3liIP1ZsozBahH69j/RJv+Rfs6IwUKHTgQYJ/HBAw==}
+
   '@noble/curves@1.4.2':
     resolution: {integrity: sha512-TavHr8qycMChk8UwMld0ZDRvatedkzWfH8IiaeGCfymOP5i0hSCozz9vHOL0nkwk7HRMlFnAiKpS2jrUmSybcw==}
 
@@ -550,2466 +947,6537 @@ packages:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
 
+  '@nodelib/fs.scandir@4.0.1':
+    resolution: {integrity: sha512-vAkI715yhnmiPupY+dq+xenu5Tdf2TBQ66jLvBIcCddtz+5Q8LbMKaf9CIJJreez8fQ8fgaY+RaywQx8RJIWpw==}
+    engines: {node: '>=18.18.0'}
+
   '@nodelib/fs.stat@2.0.5':
     resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
     engines: {node: '>= 8'}
 
+  '@nodelib/fs.stat@4.0.0':
+    resolution: {integrity: sha512-ctr6bByzksKRCV0bavi8WoQevU6plSp2IkllIsEqaiKe2mwNNnaluhnRhcsgGZHrrHk57B3lf95MkLMO3STYcg==}
+    engines: {node: '>=18.18.0'}
+
   '@nodelib/fs.walk@1.2.8':
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@pkgjs/parseargs@0.11.0':
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
-    engines: {node: '>=14'}
+  '@nodelib/fs.walk@3.0.1':
+    resolution: {integrity: sha512-nIh/M6Kh3ZtOmlY00DaUYB4xeeV6F3/ts1l29iwl3/cfyY/OuCfUx+v08zgx8TKPTifXRcjjqVQ4KB2zOYSbyw==}
+    engines: {node: '>=18.18.0'}
 
-  '@protobufjs/aspromise@1.1.2':
-    resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
+  '@nuxt/cli@3.29.3':
+    resolution: {integrity: sha512-48GYmH4SyzR5pqd02UXVzBfrvEGaurPKMjSWxlHgqnpI5buwOYCvH+OqvHOmvnLrDP2bxR9hbDod/UIphOjMhg==}
+    engines: {node: ^16.10.0 || >=18.0.0}
+    hasBin: true
 
-  '@protobufjs/base64@1.1.2':
-    resolution: {integrity: sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==}
+  '@nuxt/devalue@2.0.2':
+    resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
 
-  '@protobufjs/codegen@2.0.4':
-    resolution: {integrity: sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==}
+  '@nuxt/devtools-kit@2.7.0':
+    resolution: {integrity: sha512-MIJdah6CF6YOW2GhfKnb8Sivu6HpcQheqdjOlZqShBr+1DyjtKQbAKSCAyKPaoIzZP4QOo2SmTFV6aN8jBeEIQ==}
+    peerDependencies:
+      vite: '>=6.0'
 
-  '@protobufjs/eventemitter@1.1.0':
-    resolution: {integrity: sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==}
+  '@nuxt/devtools-wizard@2.7.0':
+    resolution: {integrity: sha512-iWuWR0U6BRpF7D6xrgq9ZkQ6ajsw2EA/gVmbU9V5JPKRUtV6DVpCPi+h34VFNeQ104Sf531XgvT0sl3h93AjXA==}
+    hasBin: true
 
-  '@protobufjs/fetch@1.1.0':
-    resolution: {integrity: sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==}
+  '@nuxt/devtools@2.7.0':
+    resolution: {integrity: sha512-BtIklVYny14Ykek4SHeexAHoa28MEV9kz223ZzvoNYqE0f+YVV+cJP69ovZHf+HUVpxaAMJfWKLHXinWXiCZ4Q==}
+    hasBin: true
+    peerDependencies:
+      vite: '>=6.0'
 
-  '@protobufjs/float@1.0.2':
-    resolution: {integrity: sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==}
+  '@nuxt/eslint-config@1.9.0':
+    resolution: {integrity: sha512-KLiYlX/MmWR9dhC0u7GSZQl6wyVLGAHme5aAL5fAUT1PLYgcFiJIUg1Z+b296LmwHGTa+oGPRBIk3yoDmX9/9Q==}
+    peerDependencies:
+      eslint: ^9.0.0
+      eslint-plugin-format: '*'
+    peerDependenciesMeta:
+      eslint-plugin-format:
+        optional: true
 
-  '@protobufjs/inquire@1.1.0':
-    resolution: {integrity: sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==}
+  '@nuxt/eslint-plugin@1.9.0':
+    resolution: {integrity: sha512-DY4ZSavgFyKQxI/NCOpSCUHg3dpS2O4lAdic5UmvP2NWj1xwtvmA9UwEZQ2nW2/f/Km6N+Q53UsgFSIBjz8jDQ==}
+    peerDependencies:
+      eslint: ^9.0.0
 
-  '@protobufjs/path@1.1.2':
-    resolution: {integrity: sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==}
+  '@nuxt/eslint@1.9.0':
+    resolution: {integrity: sha512-8Wm2fDD9za+vJOOhRS2jj+MzyjCNvDhS+04Y55q9W1Ai5hFjTZ1a94jlgSwaqI1B3Zt7y5fqFoEb4wKpZ3ycWg==}
+    peerDependencies:
+      eslint: ^9.0.0
+      eslint-webpack-plugin: ^4.1.0
+      vite-plugin-eslint2: ^5.0.0
+    peerDependenciesMeta:
+      eslint-webpack-plugin:
+        optional: true
+      vite-plugin-eslint2:
+        optional: true
 
-  '@protobufjs/pool@1.1.0':
-    resolution: {integrity: sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==}
+  '@nuxt/kit@3.20.0':
+    resolution: {integrity: sha512-EoF1Gf0SPj9vxgAIcGEH+a4PRLC7Dwsy21K6f5+POzylT8DgssN8zL5pwXC+X7OcfzBrwYFh7mM7phvh7ubgeg==}
+    engines: {node: '>=18.12.0'}
 
-  '@protobufjs/utf8@1.1.0':
-    resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
+  '@nuxt/kit@4.2.0':
+    resolution: {integrity: sha512-1yN3LL6RDN5GjkNLPUYCbNRkaYnat6hqejPyfIBBVzrWOrpiQeNMGxQM/IcVdaSuBJXAnu0sUvTKXpXkmPhljg==}
+    engines: {node: '>=18.12.0'}
 
-  '@rollup/rollup-android-arm-eabi@4.34.9':
-    resolution: {integrity: sha512-qZdlImWXur0CFakn2BJ2znJOdqYZKiedEPEVNTBrpfPjc/YuTGcaYZcdmNFTkUj3DU0ZM/AElcM8Ybww3xVLzA==}
-    cpu: [arm]
-    os: [android]
+  '@nuxt/nitro-server@4.2.0':
+    resolution: {integrity: sha512-1fZwAV+VTQwmPVUYKH+eoeB+3jPE+c/mreK3PpuY6vvrIDuMh9L4QIeLFB0fIcY2MJ4XkvjU/5w3B9uu3GR9yQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      nuxt: ^4.2.0
 
-  '@rollup/rollup-android-arm64@4.34.9':
-    resolution: {integrity: sha512-4KW7P53h6HtJf5Y608T1ISKvNIYLWRKMvfnG0c44M6In4DQVU58HZFEVhWINDZKp7FZps98G3gxwC1sb0wXUUg==}
-    cpu: [arm64]
-    os: [android]
+  '@nuxt/schema@4.2.0':
+    resolution: {integrity: sha512-YMbgpEyPokgOYME6BvY8Okk7GAIwhEFYzrkkkoU9IVgu0tKWetYRrjUwbd0eICqPm9EWDBQl5tTTNJ8xCndVbw==}
+    engines: {node: ^14.18.0 || >=16.10.0}
 
-  '@rollup/rollup-darwin-arm64@4.34.9':
-    resolution: {integrity: sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==}
+  '@nuxt/telemetry@2.6.6':
+    resolution: {integrity: sha512-Zh4HJLjzvm3Cq9w6sfzIFyH9ozK5ePYVfCUzzUQNiZojFsI2k1QkSBrVI9BGc6ArKXj/O6rkI6w7qQ+ouL8Cag==}
+    engines: {node: '>=18.12.0'}
+    hasBin: true
+
+  '@nuxt/vite-builder@4.2.0':
+    resolution: {integrity: sha512-pNHIoO8kiSsOnoMo2zmxy0mk71ZBP4KJCiXr7Ahq8ewOm4W4vFQ1NV1O46wJGZyxlPC6nqFuYBvcUwVp1LgTNg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      nuxt: 4.2.0
+      rolldown: ^1.0.0-beta.38
+      vue: ^3.3.4
+    peerDependenciesMeta:
+      rolldown:
+        optional: true
+
+  '@nuxtjs/color-mode@3.5.2':
+    resolution: {integrity: sha512-cC6RfgZh3guHBMLLjrBB2Uti5eUoGM9KyauOaYS9ETmxNWBMTvpgjvSiSJp1OFljIXPIqVTJ3xtJpSNZiO3ZaA==}
+
+  '@nuxtjs/tailwindcss@6.13.1':
+    resolution: {integrity: sha512-atL2SaPsxLfMTlXUQvr1UpDYdz6ocNOhH35H+t7M++g4r79QiQScJ7XuyyMR9AyBN19lkPA3nw7NXxazXmYxlA==}
+
+  '@oxc-minify/binding-android-arm64@0.95.0':
+    resolution: {integrity: sha512-ck0NakTt3oBWTMQjxKf5ZW1GzCs0y1kETzJdh8h8NAWTutlMfeWiuUxCgG4FMF4XiTnCdLq/dFAKFcdbiwcoqg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-minify/binding-darwin-arm64@0.95.0':
+    resolution: {integrity: sha512-uvRkBVsh88DgMqddCIHcL1tKycKThfzLHNuBOm7csfpOD85TJimpl/1qAfrTCNrdaiteFK4U9QRKBdDvZay4RQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.34.9':
-    resolution: {integrity: sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==}
+  '@oxc-minify/binding-darwin-x64@0.95.0':
+    resolution: {integrity: sha512-SpDArHPKy/K9rduOCdlqz4BxFZte5Ad4/CPNaP0EaVTNbDW1OjBMrVOzRxr/bveWUbUJW3gbWby//YzXCese/w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.34.9':
-    resolution: {integrity: sha512-2lzjQPJbN5UnHm7bHIUKFMulGTQwdvOkouJDpPysJS+QFBGDJqcfh+CxxtG23Ik/9tEvnebQiylYoazFMAgrYw==}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@rollup/rollup-freebsd-x64@4.34.9':
-    resolution: {integrity: sha512-SLl0hi2Ah2H7xQYd6Qaiu01kFPzQ+hqvdYSoOtHYg/zCIFs6t8sV95kaoqjzjFwuYQLtOI0RZre/Ke0nPaQV+g==}
+  '@oxc-minify/binding-freebsd-x64@0.95.0':
+    resolution: {integrity: sha512-U/ER7VsDCOv9HTE3rIZmNdN2ijZTT1vjDPPRsl9Z5Zyip2OsbHJxh4iNC00bO7qSw5keADuP4ooXsu2pjnfXNA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.34.9':
-    resolution: {integrity: sha512-88I+D3TeKItrw+Y/2ud4Tw0+3CxQ2kLgu3QvrogZ0OfkmX/DEppehus7L3TS2Q4lpB+hYyxhkQiYPJ6Mf5/dPg==}
+  '@oxc-minify/binding-linux-arm-gnueabihf@0.95.0':
+    resolution: {integrity: sha512-g+u5Zg72J7G9DbjnCIO6BhHE4lSaODLFjArFq9sZWu4xi4QOYapGdNZVbQWrWjzGlKTvYOhH621ySMOc07O64g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.34.9':
-    resolution: {integrity: sha512-3qyfWljSFHi9zH0KgtEPG4cBXHDFhwD8kwg6xLfHQ0IWuH9crp005GfoUUh/6w9/FWGBwEHg3lxK1iHRN1MFlA==}
+  '@oxc-minify/binding-linux-arm-musleabihf@0.95.0':
+    resolution: {integrity: sha512-RqQctWyvgSVkJ+UMhDPLDjSO+YjAWFGoSfvikgEIvGrTVjFzXz20EDFSH+CR9J+mXsuJOku63VKmcAZr8Vd/Qg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.34.9':
-    resolution: {integrity: sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==}
+  '@oxc-minify/binding-linux-arm64-gnu@0.95.0':
+    resolution: {integrity: sha512-psrzacTaa5zmRXm2Skooj5YOZvueFZLOjNDAkwQcjIgrVAzl7uXtDCPq8soM46O12wGXMpDNUkrbD2BVcF+S9g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.34.9':
-    resolution: {integrity: sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==}
+  '@oxc-minify/binding-linux-arm64-musl@0.95.0':
+    resolution: {integrity: sha512-W5VWcOTIxH8bvIviiFreNHK5RkaNE7Y7hm0fxYa9pAdDe8U2OnD77JPPHmNSKYROaDa1ZsmXK1dAOnwGcxvv1w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.34.9':
-    resolution: {integrity: sha512-dRAgTfDsn0TE0HI6cmo13hemKpVHOEyeciGtvlBTkpx/F65kTvShtY/EVyZEIfxFkV5JJTuQ9tP5HGBS0hfxIg==}
-    cpu: [loong64]
+  '@oxc-minify/binding-linux-riscv64-gnu@0.95.0':
+    resolution: {integrity: sha512-FBAaIvTcRqdXDPZAsfEBc5nK3noZtEAO82090ne5EDsDNKu8u8sjLhXYJWM3AZFD6p7OPRqBby6N4pVicrk0dA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.34.9':
-    resolution: {integrity: sha512-PHcNOAEhkoMSQtMf+rJofwisZqaU8iQ8EaSps58f5HYll9EAY5BSErCZ8qBDMVbq88h4UxaNPlbrKqfWP8RfJA==}
-    cpu: [ppc64]
+  '@oxc-minify/binding-linux-s390x-gnu@0.95.0':
+    resolution: {integrity: sha512-7/OWwUC3r0/nPsHOCsTkgitdjpvDOwm8f4lE/Xeigt+9EcRcVuaSHRVOHI47mQ/cSL6V3AObVcmiAGysR36vEw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.34.9':
-    resolution: {integrity: sha512-Z2i0Uy5G96KBYKjeQFKbbsB54xFOL5/y1P5wNBsbXB8yE+At3oh0DVMjQVzCJRJSfReiB2tX8T6HUFZ2k8iaKg==}
+  '@oxc-minify/binding-linux-x64-gnu@0.95.0':
+    resolution: {integrity: sha512-3K2lxzk679ml1vXJtO8Nt3xMD2trnDQWBb4Q676Un5g3dbaYf1WgTmEI13ZnCrwE5uBI02DFtFQplkLFqb9dGA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-minify/binding-linux-x64-musl@0.95.0':
+    resolution: {integrity: sha512-DrxQAALZs/He11OlCWZrJGsdwGSAK61nkZxcl3MnO33mL54Qs/vI9AbI2lMtggU+xB2sNKbjKTTpTbCPHOmhTA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-minify/binding-wasm32-wasi@0.95.0':
+    resolution: {integrity: sha512-PASXKqJyLHesNjTweXqkA3kG/hdjpauGb+REP5yZ4dr8gxu5DbMqk4QjsBmW3LjDF4tXXjRs8nHR6Qt2dhxTzA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-minify/binding-win32-arm64-msvc@0.95.0':
+    resolution: {integrity: sha512-fPVQZWObqqBRYedFy/bOI0UzUZCqq6ra/PBZFqi31c5Zn73ETTseLYL7ebQqKgjv8l9gQPBIAFIoXYsaoxT72A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-minify/binding-win32-x64-msvc@0.95.0':
+    resolution: {integrity: sha512-mtCkksnBcO4dIxuj1n9THbMihV+zjO7ZIVCPOq54pylA+hTb/OHau3OV+XyU0pnmREGTuF9xV3BUKag1SYS/lQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-parser/binding-android-arm64@0.95.0':
+    resolution: {integrity: sha512-dZyxhhvJigwWL1wgnLlqyEiSeuqO0WdDH9H+if0dPcBM4fKa5fjVkaUcJT1jBMcBTnkjxMwTXYZy5TK60N0fjg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-parser/binding-darwin-arm64@0.95.0':
+    resolution: {integrity: sha512-zun9+V33kyCtNec9oUSWwb0qi3fB8pXwum1yGFECPEr55g/CrWju6/Jv4hwwNBeW2tK9Ch/PRstEtYmOLMhHpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.95.0':
+    resolution: {integrity: sha512-9djMQ/t6Ns/UXtziwUe562uVJMbhtuLtCj+Xav+HMVT/rhV9gWO8PQOG7AwDLUBjJanItsrfqrGtqhNxtZ701w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-freebsd-x64@0.95.0':
+    resolution: {integrity: sha512-GK6k0PgCVkkeRZtHgcosCYbXIRySpJpuPw/OInfLGFh8f3x9gp2l8Fbcfx+YO+ZOHFBCd2NNedGqw8wMgouxfA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.95.0':
+    resolution: {integrity: sha512-+g/lFITtyHHEk69cunOHuiT5cX+mpUTcbGYNe8suguZ7FqgNwai+PnGv0ctCvtgxBPVfckfUK8c3RvFKo+vi/w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.95.0':
+    resolution: {integrity: sha512-SXNasDtPw8ycNV7VEvFxb4LETmykvWKUhHR7K3us818coXYpDj54P8WEx8hJobP/9skuuiFuKHmtYLdjX8wntA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.95.0':
+    resolution: {integrity: sha512-0LzebARTU0ROfD6pDK4h1pFn+09meErCZ0MA2TaW08G72+GNneEsksPufOuI+9AxVSRa+jKE3fu0wavvhZgSkg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.95.0':
+    resolution: {integrity: sha512-Pvi1lGe/G+mJZ3hUojMP/aAHAzHA25AEtVr8/iuz7UV72t/15NOgJYr9kELMUMNjPqpr3vKUgXTFmTtAxp11Qw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.95.0':
+    resolution: {integrity: sha512-pUEVHIOVNDfhk4sTlLhn6mrNENhE4/dAwemxIfqpcSyBlYG0xYZND1F3jjR2yWY6DakXZ6VSuDbtiv1LPNlOLw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.34.9':
-    resolution: {integrity: sha512-U+5SwTMoeYXoDzJX5dhDTxRltSrIax8KWwfaaYcynuJw8mT33W7oOgz0a+AaXtGuvhzTr2tVKh5UO8GVANTxyQ==}
+  '@oxc-parser/binding-linux-s390x-gnu@0.95.0':
+    resolution: {integrity: sha512-5+olaepHTE3J/+w7g0tr3nocvv5BKilAJnzj4L8tWBCLEZbL6olJcGVoldUO+3cgg1SO1xJywP5BuLhT0mDUDw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.34.9':
-    resolution: {integrity: sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==}
+  '@oxc-parser/binding-linux-x64-gnu@0.95.0':
+    resolution: {integrity: sha512-8huzHlK/N98wrnYKxIcYsK8ZGBWomQchu/Mzi6m+CtbhjWOv9DmK0jQ2fUWImtluQVpTwS0uZT06d3g7XIkJrA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.34.9':
-    resolution: {integrity: sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==}
+  '@oxc-parser/binding-linux-x64-musl@0.95.0':
+    resolution: {integrity: sha512-bWnrLfGDcx/fab0+UQnFbVFbiykof/btImbYf+cI2pU/1Egb2x+OKSmM5Qt0nEUiIpM5fgJmYXxTopybSZOKYA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-win32-arm64-msvc@4.34.9':
-    resolution: {integrity: sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==}
+  '@oxc-parser/binding-wasm32-wasi@0.95.0':
+    resolution: {integrity: sha512-0JLyqkZu1HnQIZ4e5LBGOtzqua1QwFEUOoMSycdoerXqayd4LK2b7WMfAx8eCIf+jGm1Uj6f3R00nlsx8g1faQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.95.0':
+    resolution: {integrity: sha512-RWvaA6s1SYlBj9CxwHfNn0CRlkPdv9fEUAXfZkGQPdP5e1ppIaO2KYE0sUov/zzp9hPTMMsTMHl4dcIbb+pHCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.34.9':
-    resolution: {integrity: sha512-KB48mPtaoHy1AwDNkAJfHXvHp24H0ryZog28spEs0V48l3H1fr4i37tiyHsgKZJnCmvxsbATdZGBpbmxTE3a9w==}
-    cpu: [ia32]
+  '@oxc-parser/binding-win32-x64-msvc@0.95.0':
+    resolution: {integrity: sha512-BQpgl7rDjFvCIHudmUR0dCwc4ylBYZl4CPVinlD3NhkMif4WD5dADckoo5ES/KOpFyvwcbKZX+grP63cjHi26g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.34.9':
-    resolution: {integrity: sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==}
+  '@oxc-project/types@0.95.0':
+    resolution: {integrity: sha512-vACy7vhpMPhjEJhULNxrdR0D943TkA/MigMpJCHmBHvMXxRStRi/dPtTlfQ3uDwWSzRpT8z+7ImjZVf8JWBocQ==}
+
+  '@oxc-transform/binding-android-arm64@0.95.0':
+    resolution: {integrity: sha512-eW+BCgRWOsMrDiz7FEV7BjAmaF9lGIc2ueGdRUYjRUMq4f5FSGS7gMBTYDxajdoIB3L5Gnksh1CWkIlgg95UVA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-transform/binding-darwin-arm64@0.95.0':
+    resolution: {integrity: sha512-OUUaYZVss8tyDZZ7TGr2vnH3+i3Ouwsx0frQRGkiePNatXxaJJ3NS5+Kwgi9hh3WryXaQz2hWji4AM2RHYE7Cg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-transform/binding-darwin-x64@0.95.0':
+    resolution: {integrity: sha512-49UPEgIlgWUndwcP3LH6dvmOewZ92DxCMpFMo11JhUlmNJxA3sjVImEBRB56/tJ+XF+xnya9kB1oCW4yRY+mRw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
-    os: [win32]
+    os: [darwin]
 
-  '@rtsao/scc@1.1.0':
-    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+  '@oxc-transform/binding-freebsd-x64@0.95.0':
+    resolution: {integrity: sha512-lNKrHKaDEm8pbKlVbn0rv2L97O0lbA0Tsrxx4GF/HhmdW+NgwGU1pMzZ4tB2QcylbqgKxOB+v9luebHyh1jfgA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
 
-  '@scure/base@1.1.9':
-    resolution: {integrity: sha512-8YKhl8GHiNI/pU2VMaofa2Tor7PJRAjwQLBBuilkJ9L5+13yVbC7JO/wS7piioAvPSwR3JKM1IJ/u4xQzbcXKg==}
+  '@oxc-transform/binding-linux-arm-gnueabihf@0.95.0':
+    resolution: {integrity: sha512-+VWcLeeizI8IjU+V+o8AmzPuIMiTrGr0vrmXU3CEsV05MrywCuJU+f6ilPs3JBKno9VIwqvRpHB/z39sQabHWg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
 
-  '@scure/base@1.2.4':
-    resolution: {integrity: sha512-5Yy9czTO47mqz+/J8GM6GIId4umdCk1wc1q8rKERQulIoc8VP9pzDcghv10Tl2E7R96ZUx/PhND3ESYUQX8NuQ==}
+  '@oxc-transform/binding-linux-arm-musleabihf@0.95.0':
+    resolution: {integrity: sha512-a59xPw84t6VwlvNEGcmuw3feGcKcWOC7uB8oePJ/BVSAV1yayLoB3k6JASwLTZ7N/PNPNUhcw1jDxowgAfBJfg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
 
-  '@scure/bip32@1.4.0':
-    resolution: {integrity: sha512-sVUpc0Vq3tXCkDGYVWGIZTRfnvu8LoTDaev7vbwh0omSvVORONr960MQWdKqJDCReIEmTj3PAr73O3aoxz7OPg==}
+  '@oxc-transform/binding-linux-arm64-gnu@0.95.0':
+    resolution: {integrity: sha512-NLdrFuEHlmbiC1M1WESFV4luUcB/84GXi+cbnRXhgMjIW/CThRVJ989eTJy59QivkVlLcJSKTiKiKCt0O6TTlQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
 
-  '@scure/bip39@1.3.0':
-    resolution: {integrity: sha512-disdg7gHuTDZtY+ZdkmLpPCk7fxZSu3gBiEGuoC1XYxv9cGx3Z6cpTggCgW6odSOOIXCiDjuGejW+aJKCY/pIQ==}
+  '@oxc-transform/binding-linux-arm64-musl@0.95.0':
+    resolution: {integrity: sha512-GL0ffCPW8JlFI0/jeSgCY665yDdojHxA0pbYG+k8oEHOWCYZUZK9AXL+r0oerNEWYJ8CRB+L5Yq87ZtU/YUitw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
 
-  '@stylistic/eslint-plugin@5.2.2':
-    resolution: {integrity: sha512-bE2DUjruqXlHYP3Q2Gpqiuj2bHq7/88FnuaS0FjeGGLCy+X6a07bGVuwtiOYnPSLHR6jmx5Bwdv+j7l8H+G97A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=9.0.0'
+  '@oxc-transform/binding-linux-riscv64-gnu@0.95.0':
+    resolution: {integrity: sha512-tbH7LaClSmN3YFVo1UjMSe7D6gkb5f+CMIbj9i873UUZomVRmAjC4ygioObfzM+sj/tX0WoTXx5L1YOfQkHL6Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
 
-  '@swc/core-darwin-arm64@1.3.78':
-    resolution: {integrity: sha512-596KRua/d5Gx1buHKKchSyHuwoIL4S1BRD/wCvYNLNZ3xOzcuBBmXOjrDVigKi1ztNDeS07p30RO5UyYur0XAA==}
-    engines: {node: '>=10'}
+  '@oxc-transform/binding-linux-s390x-gnu@0.95.0':
+    resolution: {integrity: sha512-8jMqiURWa0iTiPMg7BWaln89VdhhWzNlPyKM90NaFVVhBIKCr2UEhrQWdpBw/E9C8uWf/4VabBEhfPMK+0yS4w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-x64-gnu@0.95.0':
+    resolution: {integrity: sha512-D5ULJ2uWipsTgfvHIvqmnGkCtB3Fyt2ZN7APRjVO+wLr+HtmnaWddKsLdrRWX/m/6nQ2xQdoQekdJrokYK9LtQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-x64-musl@0.95.0':
+    resolution: {integrity: sha512-DmCGU+FzRezES5wVAGVimZGzYIjMOapXbWpxuz8M8p3nMrfdBEQ5/tpwBp2vRlIohhABy4vhHJByl4c64ENCGQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-transform/binding-wasm32-wasi@0.95.0':
+    resolution: {integrity: sha512-tSo1EU4Whd1gXyae7cwSDouhppkuz6Jkd5LY8Uch9VKsHVSRhDLDW19Mq6VSwtyPxDPTJnJ2jYJWm+n8SYXiXQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-transform/binding-win32-arm64-msvc@0.95.0':
+    resolution: {integrity: sha512-6eaxlgj+J5n8zgJTSugqdPLBtKGRqvxYLcvHN8b+U9hVhF/2HG/JCOrcSYV/XgWGNPQiaRVzpR3hGhmFro9QTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-transform/binding-win32-x64-msvc@0.95.0':
+    resolution: {integrity: sha512-Y8JY79A7fTuBjEXZFu+mHbHzgsV3uJDUuUKeGffpOwI1ayOGCKeBJTiMhksYkiir1xS+DkGLEz73+xse9Is9rw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher-android-arm64@2.5.1':
+    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.5.1':
+    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
+    engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  '@swc/core-darwin-x64@1.3.78':
-    resolution: {integrity: sha512-w0RsD1onQAj0vuLAoOVi48HgnW6D6oBEIZP17l0HYejCDBZ+FRZLjml7wgNAWMqHcd2qNRqgtZ+v7aLza2JtBQ==}
-    engines: {node: '>=10'}
+  '@parcel/watcher-darwin-x64@2.5.1':
+    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
+    engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  '@swc/core-linux-arm-gnueabihf@1.3.78':
-    resolution: {integrity: sha512-v1CpRn+H6fha1WIqmdRvJM40pFdjUHrGfhf4Ygci72nlAU41l5XimN8Iwkm8FgIwf2wnv0lLzedSM4IHvpq/yA==}
-    engines: {node: '>=10'}
+  '@parcel/watcher-freebsd-x64@2.5.1':
+    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
+    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
+    engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
 
-  '@swc/core-linux-arm64-gnu@1.3.78':
-    resolution: {integrity: sha512-Sis17dz9joJRFVvR/gteOZSUNrrrioo81RQzani0Zr5ZZOfWLMTB9DA+0MVlfnVa2taYcsJHJZFoAv9JkLwbzg==}
-    engines: {node: '>=10'}
+  '@parcel/watcher-linux-arm-musl@2.5.1':
+    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
+    engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@swc/core-linux-arm64-musl@1.3.78':
-    resolution: {integrity: sha512-E5F8/qp+QupnfBnsP4vN1PKyCmAHYHDG1GMyPE/zLFOUYLgw+jK4C9rfyLBR0o2bWo1ay2WCIjusBZD9XHGOSA==}
-    engines: {node: '>=10'}
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
+    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
+    engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@swc/core-linux-x64-gnu@1.3.78':
-    resolution: {integrity: sha512-iDxa+RknnTQlyy+WfPor1FM6y44ERNI2E0xiUV6gV6uPwegCngi8LFC+E7IvP6+p+yXtAkesunAaiZ8nn0s+rw==}
-    engines: {node: '>=10'}
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
+    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
+    engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@swc/core-linux-x64-musl@1.3.78':
-    resolution: {integrity: sha512-dWtIYUFL5sMTE2UKshkXTusHcK8+zAhhGzvqWq1wJS45pqTlrAbzpyqB780fle880x3A6DMitWmsAFARdNzpuQ==}
-    engines: {node: '>=10'}
+  '@parcel/watcher-linux-x64-musl@2.5.1':
+    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
+    engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@swc/core-win32-arm64-msvc@1.3.78':
-    resolution: {integrity: sha512-CXFaGEc2M9Su3UoUMC8AnzKb9g+GwPxXfakLWZsjwS448h6jcreExq3nwtBNdVGzQ26xqeVLMFfb1l/oK99Hwg==}
-    engines: {node: '>=10'}
+  '@parcel/watcher-wasm@2.5.1':
+    resolution: {integrity: sha512-RJxlQQLkaMMIuWRozy+z2vEqbaQlCuaCgVZIUCzQLYggY22LZbP5Y1+ia+FD724Ids9e+XIyOLXLrLgQSHIthw==}
+    engines: {node: '>= 10.0.0'}
+    bundledDependencies:
+      - napi-wasm
+
+  '@parcel/watcher-win32-arm64@2.5.1':
+    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
+    engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  '@swc/core-win32-ia32-msvc@1.3.78':
-    resolution: {integrity: sha512-FaH1jwWnJpWkdImpMoiZpMg9oy9UUyZwltzN7hFwjR48e3Li82cRFb+9PifIBHCUSBM+CrrsJXbHP213IMVAyw==}
-    engines: {node: '>=10'}
+  '@parcel/watcher-win32-ia32@2.5.1':
+    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
+    engines: {node: '>= 10.0.0'}
     cpu: [ia32]
     os: [win32]
 
-  '@swc/core-win32-x64-msvc@1.3.78':
-    resolution: {integrity: sha512-oYxa+tPdhlx1aH14AIoF6kvVjo49tEOW0drNqoEaVHufvgH0y43QU2Jum3b2+xXztmMRtzK2CSN3GPOAXDKKKg==}
-    engines: {node: '>=10'}
+  '@parcel/watcher-win32-x64@2.5.1':
+    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
+    engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [win32]
 
-  '@swc/core@1.3.78':
-    resolution: {integrity: sha512-y6DQP571v7fbUUY7nz5G4lNIRGofuO48K5pGhD9VnuOCTuptfooCdi8wnigIrIhM/M4zQ53m/YCMDCbOtDgEww==}
-    engines: {node: '>=10'}
+  '@parcel/watcher@2.5.1':
+    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
+    engines: {node: '>= 10.0.0'}
+
+  '@pinia/nuxt@0.11.2':
+    resolution: {integrity: sha512-CgvSWpbktxxWBV7ModhAcsExsQZqpPq6vMYEe9DexmmY6959ev8ukL4iFhr/qov2Nb9cQAWd7niFDnaWkN+FHg==}
     peerDependencies:
-      '@swc/helpers': ^0.5.0
-    peerDependenciesMeta:
-      '@swc/helpers':
-        optional: true
+      pinia: ^3.0.3
 
-  '@swc/helpers@0.5.15':
-    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
 
-  '@tanstack/table-core@8.21.2':
-    resolution: {integrity: sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==}
-    engines: {node: '>=12'}
+  '@polka/url@1.0.0-next.29':
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
-  '@tanstack/virtual-core@3.13.2':
-    resolution: {integrity: sha512-Qzz4EgzMbO5gKrmqUondCjiHcuu4B1ftHb0pjCut661lXZdGoHeze9f/M8iwsK1t5LGR6aNuNGU7mxkowaW6RQ==}
+  '@poppinss/colors@4.1.5':
+    resolution: {integrity: sha512-FvdDqtcRCtz6hThExcFOgW0cWX+xwSMWcRuQe5ZEb2m7cVQOAVZOIMt+/v9RxGiD9/OY16qJBXK4CVKWAPalBw==}
 
-  '@tanstack/vue-table@8.21.2':
-    resolution: {integrity: sha512-KBgOWxha/x4m1EdhVWxOpqHb661UjqAxzPcmXR3QiA7aShZ547x19Gw0UJX9we+m+tVcPuLRZ61JsYW47QZFfQ==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      vue: '>=3.2'
+  '@poppinss/dumper@0.6.4':
+    resolution: {integrity: sha512-iG0TIdqv8xJ3Lt9O8DrPRxw1MRLjNpoqiSGU03P/wNLP/s0ra0udPJ1J2Tx5M0J3H/cVyEgpbn8xUKRY9j59kQ==}
 
-  '@tanstack/vue-virtual@3.13.2':
-    resolution: {integrity: sha512-z4swzjdhzCh95n9dw9lTvw+t3iwSkYRlVkYkra3C9mul/m5fTzHR7KmtkwH4qXMTXGJUbngtC/bz2cHQIHkO8g==}
-    peerDependencies:
-      vue: ^2.7.0 || ^3.0.0
+  '@poppinss/exception@1.2.2':
+    resolution: {integrity: sha512-m7bpKCD4QMlFCjA/nKTs23fuvoVFoA83brRKmObCUNmi/9tVu8Ve3w4YQAnJu4q3Tjf5fr685HYIC/IA2zHRSg==}
 
-  '@tsconfig/node10@1.0.11':
-    resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
+  '@protobufjs/aspromise@1.1.2':
+    resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
 
-  '@tsconfig/node12@1.0.11':
-    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+  '@protobufjs/base64@1.1.2':
+    resolution: {integrity: sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==}
 
-  '@tsconfig/node14@1.0.3':
-    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+  '@protobufjs/codegen@2.0.4':
+    resolution: {integrity: sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==}
 
-  '@tsconfig/node16@1.0.4':
-    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+  '@protobufjs/eventemitter@1.1.0':
+    resolution: {integrity: sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==}
 
-  '@types/debug@4.1.12':
-    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+  '@protobufjs/fetch@1.1.0':
+    resolution: {integrity: sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==}
 
-  '@types/eslint@9.6.1':
-    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
+  '@protobufjs/float@1.0.2':
+    resolution: {integrity: sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==}
 
-  '@types/estree@1.0.6':
-    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
+  '@protobufjs/inquire@1.1.0':
+    resolution: {integrity: sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==}
 
-  '@types/json-schema@7.0.15':
-    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+  '@protobufjs/path@1.1.2':
+    resolution: {integrity: sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==}
 
-  '@types/json5@0.0.29':
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+  '@protobufjs/pool@1.1.0':
+    resolution: {integrity: sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==}
 
-  '@types/ms@2.1.0':
-    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+  '@protobufjs/utf8@1.1.0':
+    resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
 
-  '@types/node@22.13.9':
-    resolution: {integrity: sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw==}
+  '@rolldown/pluginutils@1.0.0-beta.29':
+    resolution: {integrity: sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==}
 
-  '@types/qrcode@1.5.6':
-    resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
-
-  '@types/web-bluetooth@0.0.21':
-    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+  '@rolldown/pluginutils@1.0.0-beta.45':
+    resolution: {integrity: sha512-Le9ulGCrD8ggInzWw/k2J8QcbPz7eGIOWqfJ2L+1R0Opm7n6J37s2hiDWlh6LJN0Lk9L5sUzMvRHKW7UxBZsQA==}
 
-  '@typescript-eslint/eslint-plugin@8.38.0':
-    resolution: {integrity: sha512-CPoznzpuAnIOl4nhj4tRr4gIPj5AfKgkiJmGQDaq+fQnRJTYlcBjbX3wbciGmpoPf8DREufuPRe1tNMZnGdanA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@rollup/plugin-alias@5.1.1':
+    resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.38.0
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@typescript-eslint/parser@8.38.0':
-    resolution: {integrity: sha512-Zhy8HCvBUEfBECzIl1PKqF4p11+d0aUJS1GeUiuqK9WmOug8YCmC4h4bjyBvMyAMI9sbRczmrYL5lKg/YMbrcQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@rollup/plugin-commonjs@28.0.9':
+    resolution: {integrity: sha512-PIR4/OHZ79romx0BVVll/PkwWpJ7e5lsqFa3gFfcrFPWwLXLV39JVUzQV9RKjWerE7B845Hqjj9VYlQeieZ2dA==}
+    engines: {node: '>=16.0.0 || 14 >= 14.17'}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@typescript-eslint/project-service@8.38.0':
-    resolution: {integrity: sha512-dbK7Jvqcb8c9QfH01YB6pORpqX1mn5gDZc9n63Ak/+jD67oWXn3Gs0M6vddAN+eDXBCS5EmNWzbSxsn9SzFWWg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@rollup/plugin-inject@5.0.5':
+    resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      typescript: '>=4.8.4 <5.9.0'
-
-  '@typescript-eslint/scope-manager@8.38.0':
-    resolution: {integrity: sha512-WJw3AVlFFcdT9Ri1xs/lg8LwDqgekWXWhH3iAF+1ZM+QPd7oxQ6jvtW/JPwzAScxitILUIFs0/AnQ/UWHzbATQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@typescript-eslint/tsconfig-utils@8.38.0':
-    resolution: {integrity: sha512-Lum9RtSE3EroKk/bYns+sPOodqb2Fv50XOl/gMviMKNvanETUuUcC9ObRbzrJ4VSd2JalPqgSAavwrPiPvnAiQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@rollup/plugin-json@6.1.0':
+    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      typescript: '>=4.8.4 <5.9.0'
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@typescript-eslint/type-utils@8.38.0':
-    resolution: {integrity: sha512-c7jAvGEZVf0ao2z+nnz8BUaHZD09Agbh+DY7qvBQqLiz8uJzRgVPj5YvOh8I8uEiH8oIUGIfHzMwUcGVco/SJg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@rollup/plugin-node-resolve@16.0.3':
+    resolution: {integrity: sha512-lUYM3UBGuM93CnMPG1YocWu7X802BrNF3jW2zny5gQyLQgRFJhV1Sq0Zi74+dh/6NBx1DxFC4b4GXg9wUCG5Qg==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@typescript-eslint/types@8.38.0':
-    resolution: {integrity: sha512-wzkUfX3plUqij4YwWaJyqhiPE5UCRVlFpKn1oCRn2O1bJ592XxWJj8ROQ3JD5MYXLORW84063z3tZTb/cs4Tyw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@rollup/plugin-replace@6.0.2':
+    resolution: {integrity: sha512-7QaYCf8bqF04dOy7w/eHmJeNExxTYwvKAmlSAH/EaWWUzbT0h5sbF6bktFoX/0F/0qwng5/dWFMyf3gzaM8DsQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@typescript-eslint/typescript-estree@8.38.0':
-    resolution: {integrity: sha512-fooELKcAKzxux6fA6pxOflpNS0jc+nOQEEOipXFNjSlBS6fqrJOVY/whSn70SScHrcJ2LDsxWrneFoWYSVfqhQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@rollup/plugin-terser@0.4.4':
+    resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      typescript: '>=4.8.4 <5.9.0'
+      rollup: ^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@typescript-eslint/utils@8.38.0':
-    resolution: {integrity: sha512-hHcMA86Hgt+ijJlrD8fX0j1j8w4C92zue/8LOPAFioIno+W0+L7KqE8QZKCcPGc/92Vs9x36w/4MPTJhqXdyvg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@rollup/pluginutils@5.3.0':
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@typescript-eslint/visitor-keys@8.38.0':
-    resolution: {integrity: sha512-pWrTcoFNWuwHlA9CvlfSsGWs14JxfN1TH25zM5L7o0pRLhsoZkDnTsXfQRJBEWJoV5DL0jf+Z+sxiud+K0mq1g==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@rollup/rollup-android-arm-eabi@4.34.9':
+    resolution: {integrity: sha512-qZdlImWXur0CFakn2BJ2znJOdqYZKiedEPEVNTBrpfPjc/YuTGcaYZcdmNFTkUj3DU0ZM/AElcM8Ybww3xVLzA==}
+    cpu: [arm]
+    os: [android]
 
-  '@vitejs/plugin-vue@5.2.1':
-    resolution: {integrity: sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    peerDependencies:
-      vite: ^5.0.0 || ^6.0.0
-      vue: ^3.2.25
+  '@rollup/rollup-android-arm-eabi@4.52.5':
+    resolution: {integrity: sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ==}
+    cpu: [arm]
+    os: [android]
 
-  '@volar/language-core@2.4.11':
-    resolution: {integrity: sha512-lN2C1+ByfW9/JRPpqScuZt/4OrUUse57GLI6TbLgTIqBVemdl1wNcZ1qYGEo2+Gw8coYLgCy7SuKqn6IrQcQgg==}
+  '@rollup/rollup-android-arm64@4.34.9':
+    resolution: {integrity: sha512-4KW7P53h6HtJf5Y608T1ISKvNIYLWRKMvfnG0c44M6In4DQVU58HZFEVhWINDZKp7FZps98G3gxwC1sb0wXUUg==}
+    cpu: [arm64]
+    os: [android]
 
-  '@volar/source-map@2.4.11':
-    resolution: {integrity: sha512-ZQpmafIGvaZMn/8iuvCFGrW3smeqkq/IIh9F1SdSx9aUl0J4Iurzd6/FhmjNO5g2ejF3rT45dKskgXWiofqlZQ==}
+  '@rollup/rollup-android-arm64@4.52.5':
+    resolution: {integrity: sha512-mQGfsIEFcu21mvqkEKKu2dYmtuSZOBMmAl5CFlPGLY94Vlcm+zWApK7F/eocsNzp8tKmbeBP8yXyAbx0XHsFNA==}
+    cpu: [arm64]
+    os: [android]
 
-  '@volar/typescript@2.4.11':
-    resolution: {integrity: sha512-2DT+Tdh88Spp5PyPbqhyoYavYCPDsqbHLFwcUI9K1NlY1YgUJvujGdrqUp0zWxnW7KWNTr3xSpMuv2WnaTKDAw==}
+  '@rollup/rollup-darwin-arm64@4.34.9':
+    resolution: {integrity: sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@vue/compiler-core@3.5.13':
-    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
+  '@rollup/rollup-darwin-arm64@4.52.5':
+    resolution: {integrity: sha512-takF3CR71mCAGA+v794QUZ0b6ZSrgJkArC+gUiG6LB6TQty9T0Mqh3m2ImRBOxS2IeYBo4lKWIieSvnEk2OQWA==}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@vue/compiler-dom@3.5.13':
-    resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
+  '@rollup/rollup-darwin-x64@4.34.9':
+    resolution: {integrity: sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==}
+    cpu: [x64]
+    os: [darwin]
 
-  '@vue/compiler-sfc@3.5.13':
-    resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
+  '@rollup/rollup-darwin-x64@4.52.5':
+    resolution: {integrity: sha512-W901Pla8Ya95WpxDn//VF9K9u2JbocwV/v75TE0YIHNTbhqUTv9w4VuQ9MaWlNOkkEfFwkdNhXgcLqPSmHy0fA==}
+    cpu: [x64]
+    os: [darwin]
 
-  '@vue/compiler-ssr@3.5.13':
-    resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
+  '@rollup/rollup-freebsd-arm64@4.34.9':
+    resolution: {integrity: sha512-2lzjQPJbN5UnHm7bHIUKFMulGTQwdvOkouJDpPysJS+QFBGDJqcfh+CxxtG23Ik/9tEvnebQiylYoazFMAgrYw==}
+    cpu: [arm64]
+    os: [freebsd]
 
-  '@vue/compiler-vue2@2.7.16':
-    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+  '@rollup/rollup-freebsd-arm64@4.52.5':
+    resolution: {integrity: sha512-QofO7i7JycsYOWxe0GFqhLmF6l1TqBswJMvICnRUjqCx8b47MTo46W8AoeQwiokAx3zVryVnxtBMcGcnX12LvA==}
+    cpu: [arm64]
+    os: [freebsd]
 
-  '@vue/devtools-api@6.6.4':
-    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+  '@rollup/rollup-freebsd-x64@4.34.9':
+    resolution: {integrity: sha512-SLl0hi2Ah2H7xQYd6Qaiu01kFPzQ+hqvdYSoOtHYg/zCIFs6t8sV95kaoqjzjFwuYQLtOI0RZre/Ke0nPaQV+g==}
+    cpu: [x64]
+    os: [freebsd]
 
-  '@vue/devtools-api@7.7.2':
-    resolution: {integrity: sha512-1syn558KhyN+chO5SjlZIwJ8bV/bQ1nOVTG66t2RbG66ZGekyiYNmRO7X9BJCXQqPsFHlnksqvPhce2qpzxFnA==}
+  '@rollup/rollup-freebsd-x64@4.52.5':
+    resolution: {integrity: sha512-jr21b/99ew8ujZubPo9skbrItHEIE50WdV86cdSoRkKtmWa+DDr6fu2c/xyRT0F/WazZpam6kk7IHBerSL7LDQ==}
+    cpu: [x64]
+    os: [freebsd]
 
-  '@vue/devtools-kit@7.7.2':
-    resolution: {integrity: sha512-CY0I1JH3Z8PECbn6k3TqM1Bk9ASWxeMtTCvZr7vb+CHi+X/QwQm5F1/fPagraamKMAHVfuuCbdcnNg1A4CYVWQ==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.34.9':
+    resolution: {integrity: sha512-88I+D3TeKItrw+Y/2ud4Tw0+3CxQ2kLgu3QvrogZ0OfkmX/DEppehus7L3TS2Q4lpB+hYyxhkQiYPJ6Mf5/dPg==}
+    cpu: [arm]
+    os: [linux]
 
-  '@vue/devtools-shared@7.7.2':
-    resolution: {integrity: sha512-uBFxnp8gwW2vD6FrJB8JZLUzVb6PNRG0B0jBnHsOH8uKyva2qINY8PTF5Te4QlTbMDqU5K6qtJDr6cNsKWhbOA==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
+    resolution: {integrity: sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==}
+    cpu: [arm]
+    os: [linux]
 
-  '@vue/eslint-config-typescript@14.6.0':
-    resolution: {integrity: sha512-UpiRY/7go4Yps4mYCjkvlIbVWmn9YvPGQDxTAlcKLphyaD77LjIu3plH4Y9zNT0GB4f3K5tMmhhtRhPOgrQ/bQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^9.10.0
-      eslint-plugin-vue: ^9.28.0 || ^10.0.0
-      typescript: '>=4.8.4'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  '@rollup/rollup-linux-arm-musleabihf@4.34.9':
+    resolution: {integrity: sha512-3qyfWljSFHi9zH0KgtEPG4cBXHDFhwD8kwg6xLfHQ0IWuH9crp005GfoUUh/6w9/FWGBwEHg3lxK1iHRN1MFlA==}
+    cpu: [arm]
+    os: [linux]
 
-  '@vue/language-core@2.2.8':
-    resolution: {integrity: sha512-rrzB0wPGBvcwaSNRriVWdNAbHQWSf0NlGqgKHK5mEkXpefjUlVRP62u03KvwZpvKVjRnBIQ/Lwre+Mx9N6juUQ==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  '@rollup/rollup-linux-arm-musleabihf@4.52.5':
+    resolution: {integrity: sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==}
+    cpu: [arm]
+    os: [linux]
 
-  '@vue/reactivity@3.5.13':
-    resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
+  '@rollup/rollup-linux-arm64-gnu@4.34.9':
+    resolution: {integrity: sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==}
+    cpu: [arm64]
+    os: [linux]
 
-  '@vue/runtime-core@3.5.13':
-    resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
+  '@rollup/rollup-linux-arm64-gnu@4.52.5':
+    resolution: {integrity: sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==}
+    cpu: [arm64]
+    os: [linux]
 
-  '@vue/runtime-dom@3.5.13':
-    resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
+  '@rollup/rollup-linux-arm64-musl@4.34.9':
+    resolution: {integrity: sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==}
+    cpu: [arm64]
+    os: [linux]
 
-  '@vue/server-renderer@3.5.13':
-    resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==}
-    peerDependencies:
-      vue: 3.5.13
+  '@rollup/rollup-linux-arm64-musl@4.52.5':
+    resolution: {integrity: sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==}
+    cpu: [arm64]
+    os: [linux]
 
-  '@vue/shared@3.5.13':
-    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
+  '@rollup/rollup-linux-loong64-gnu@4.52.5':
+    resolution: {integrity: sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==}
+    cpu: [loong64]
+    os: [linux]
 
-  '@vue/tsconfig@0.7.0':
-    resolution: {integrity: sha512-ku2uNz5MaZ9IerPPUyOHzyjhXoX2kVJaVf7hL315DC17vS6IiZRmmCPfggNbU16QTvM80+uYYy3eYJB59WCtvg==}
-    peerDependencies:
-      typescript: 5.x
-      vue: ^3.4.0
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-      vue:
-        optional: true
+  '@rollup/rollup-linux-loongarch64-gnu@4.34.9':
+    resolution: {integrity: sha512-dRAgTfDsn0TE0HI6cmo13hemKpVHOEyeciGtvlBTkpx/F65kTvShtY/EVyZEIfxFkV5JJTuQ9tP5HGBS0hfxIg==}
+    cpu: [loong64]
+    os: [linux]
 
-  '@vueuse/core@12.8.2':
-    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
+  '@rollup/rollup-linux-powerpc64le-gnu@4.34.9':
+    resolution: {integrity: sha512-PHcNOAEhkoMSQtMf+rJofwisZqaU8iQ8EaSps58f5HYll9EAY5BSErCZ8qBDMVbq88h4UxaNPlbrKqfWP8RfJA==}
+    cpu: [ppc64]
+    os: [linux]
 
-  '@vueuse/metadata@12.8.2':
-    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
+  '@rollup/rollup-linux-ppc64-gnu@4.52.5':
+    resolution: {integrity: sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==}
+    cpu: [ppc64]
+    os: [linux]
 
-  '@vueuse/shared@12.8.2':
-    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
+  '@rollup/rollup-linux-riscv64-gnu@4.34.9':
+    resolution: {integrity: sha512-Z2i0Uy5G96KBYKjeQFKbbsB54xFOL5/y1P5wNBsbXB8yE+At3oh0DVMjQVzCJRJSfReiB2tX8T6HUFZ2k8iaKg==}
+    cpu: [riscv64]
+    os: [linux]
 
-  abort-controller@3.0.0:
-    resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
-    engines: {node: '>=6.5'}
+  '@rollup/rollup-linux-riscv64-gnu@4.52.5':
+    resolution: {integrity: sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==}
+    cpu: [riscv64]
+    os: [linux]
 
-  acorn-jsx@5.3.2:
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+  '@rollup/rollup-linux-riscv64-musl@4.52.5':
+    resolution: {integrity: sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==}
+    cpu: [riscv64]
+    os: [linux]
 
-  acorn-walk@8.3.4:
-    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
-    engines: {node: '>=0.4.0'}
+  '@rollup/rollup-linux-s390x-gnu@4.34.9':
+    resolution: {integrity: sha512-U+5SwTMoeYXoDzJX5dhDTxRltSrIax8KWwfaaYcynuJw8mT33W7oOgz0a+AaXtGuvhzTr2tVKh5UO8GVANTxyQ==}
+    cpu: [s390x]
+    os: [linux]
 
-  acorn@8.15.0:
-    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
+  '@rollup/rollup-linux-s390x-gnu@4.52.5':
+    resolution: {integrity: sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==}
+    cpu: [s390x]
+    os: [linux]
 
-  ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+  '@rollup/rollup-linux-x64-gnu@4.34.9':
+    resolution: {integrity: sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==}
+    cpu: [x64]
+    os: [linux]
 
-  alien-signals@1.0.4:
-    resolution: {integrity: sha512-DJqqQD3XcsaQcQ1s+iE2jDUZmmQpXwHiR6fCAim/w87luaW+vmLY8fMlrdkmRwzaFXhkxf3rqPCR59tKVv1MDw==}
+  '@rollup/rollup-linux-x64-gnu@4.52.5':
+    resolution: {integrity: sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==}
+    cpu: [x64]
+    os: [linux]
 
-  ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
+  '@rollup/rollup-linux-x64-musl@4.34.9':
+    resolution: {integrity: sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==}
+    cpu: [x64]
+    os: [linux]
 
-  ansi-regex@6.1.0:
-    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
-    engines: {node: '>=12'}
+  '@rollup/rollup-linux-x64-musl@4.52.5':
+    resolution: {integrity: sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==}
+    cpu: [x64]
+    os: [linux]
 
-  ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
+  '@rollup/rollup-openharmony-arm64@4.52.5':
+    resolution: {integrity: sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==}
+    cpu: [arm64]
+    os: [openharmony]
 
-  ansi-styles@6.2.1:
-    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
-    engines: {node: '>=12'}
+  '@rollup/rollup-win32-arm64-msvc@4.34.9':
+    resolution: {integrity: sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==}
+    cpu: [arm64]
+    os: [win32]
 
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+  '@rollup/rollup-win32-arm64-msvc@4.52.5':
+    resolution: {integrity: sha512-w0cDWVR6MlTstla1cIfOGyl8+qb93FlAVutcor14Gf5Md5ap5ySfQ7R9S/NjNaMLSFdUnKGEasmVnu3lCMqB7w==}
+    cpu: [arm64]
+    os: [win32]
 
-  anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
+  '@rollup/rollup-win32-ia32-msvc@4.34.9':
+    resolution: {integrity: sha512-KB48mPtaoHy1AwDNkAJfHXvHp24H0ryZog28spEs0V48l3H1fr4i37tiyHsgKZJnCmvxsbATdZGBpbmxTE3a9w==}
+    cpu: [ia32]
+    os: [win32]
 
-  arg@4.1.3:
-    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+  '@rollup/rollup-win32-ia32-msvc@4.52.5':
+    resolution: {integrity: sha512-Aufdpzp7DpOTULJCuvzqcItSGDH73pF3ko/f+ckJhxQyHtp67rHw3HMNxoIdDMUITJESNE6a8uh4Lo4SLouOUg==}
+    cpu: [ia32]
+    os: [win32]
 
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+  '@rollup/rollup-win32-x64-gnu@4.52.5':
+    resolution: {integrity: sha512-UGBUGPFp1vkj6p8wCRraqNhqwX/4kNQPS57BCFc8wYh0g94iVIW33wJtQAx3G7vrjjNtRaxiMUylM0ktp/TRSQ==}
+    cpu: [x64]
+    os: [win32]
 
-  argparse@2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+  '@rollup/rollup-win32-x64-msvc@4.34.9':
+    resolution: {integrity: sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==}
+    cpu: [x64]
+    os: [win32]
 
-  aria-hidden@1.2.4:
-    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
-    engines: {node: '>=10'}
+  '@rollup/rollup-win32-x64-msvc@4.52.5':
+    resolution: {integrity: sha512-TAcgQh2sSkykPRWLrdyy2AiceMckNf5loITqXxFI5VuQjS5tSuw3WlwdN8qv8vzjLAUTvYaH/mVjSFpbkFbpTg==}
+    cpu: [x64]
+    os: [win32]
 
-  array-buffer-byte-length@1.0.2:
-    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
-    engines: {node: '>= 0.4'}
+  '@rtsao/scc@1.1.0':
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
-  array-includes@3.1.9:
-    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
-    engines: {node: '>= 0.4'}
+  '@scure/base@1.1.9':
+    resolution: {integrity: sha512-8YKhl8GHiNI/pU2VMaofa2Tor7PJRAjwQLBBuilkJ9L5+13yVbC7JO/wS7piioAvPSwR3JKM1IJ/u4xQzbcXKg==}
 
-  array.prototype.findlastindex@1.2.6:
-    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
-    engines: {node: '>= 0.4'}
+  '@scure/base@1.2.4':
+    resolution: {integrity: sha512-5Yy9czTO47mqz+/J8GM6GIId4umdCk1wc1q8rKERQulIoc8VP9pzDcghv10Tl2E7R96ZUx/PhND3ESYUQX8NuQ==}
 
-  array.prototype.flat@1.3.3:
-    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
-    engines: {node: '>= 0.4'}
+  '@scure/bip32@1.4.0':
+    resolution: {integrity: sha512-sVUpc0Vq3tXCkDGYVWGIZTRfnvu8LoTDaev7vbwh0omSvVORONr960MQWdKqJDCReIEmTj3PAr73O3aoxz7OPg==}
 
-  array.prototype.flatmap@1.3.3:
-    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
-    engines: {node: '>= 0.4'}
+  '@scure/bip39@1.3.0':
+    resolution: {integrity: sha512-disdg7gHuTDZtY+ZdkmLpPCk7fxZSu3gBiEGuoC1XYxv9cGx3Z6cpTggCgW6odSOOIXCiDjuGejW+aJKCY/pIQ==}
 
-  arraybuffer.prototype.slice@1.0.4:
-    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
-    engines: {node: '>= 0.4'}
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
-  async-function@1.0.0:
-    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
-    engines: {node: '>= 0.4'}
+  '@sindresorhus/is@7.1.0':
+    resolution: {integrity: sha512-7F/yz2IphV39hiS2zB4QYVkivrptHHh0K8qJJd9HhuWSdvf8AN7NpebW3CcDZDBQsUPMoDKWsY2WWgW7bqOcfA==}
+    engines: {node: '>=18'}
 
-  autoprefixer@10.4.20:
-    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
 
-  available-typed-arrays@1.0.7:
-    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
-    engines: {node: '>= 0.4'}
+  '@speed-highlight/core@1.2.8':
+    resolution: {integrity: sha512-IGytNtnUnPIobIbOq5Y6LIlqiHNX+vnToQIS7lj6L5819C+rA8TXRDkkG8vePsiBOGcoW9R6i+dp2YBUKdB09Q==}
 
-  balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+  '@stylistic/eslint-plugin@5.2.2':
+    resolution: {integrity: sha512-bE2DUjruqXlHYP3Q2Gpqiuj2bHq7/88FnuaS0FjeGGLCy+X6a07bGVuwtiOYnPSLHR6jmx5Bwdv+j7l8H+G97A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=9.0.0'
 
-  base64-js@1.5.1:
-    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+  '@stylistic/eslint-plugin@5.5.0':
+    resolution: {integrity: sha512-IeZF+8H0ns6prg4VrkhgL+yrvDXWDH2cKchrbh80ejG9dQgZWp10epHMbgRuQvgchLII/lfh6Xn3lu6+6L86Hw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=9.0.0'
 
-  binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
-    engines: {node: '>=8'}
+  '@swc/core-darwin-arm64@1.3.78':
+    resolution: {integrity: sha512-596KRua/d5Gx1buHKKchSyHuwoIL4S1BRD/wCvYNLNZ3xOzcuBBmXOjrDVigKi1ztNDeS07p30RO5UyYur0XAA==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
 
-  birpc@0.2.19:
-    resolution: {integrity: sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==}
+  '@swc/core-darwin-x64@1.3.78':
+    resolution: {integrity: sha512-w0RsD1onQAj0vuLAoOVi48HgnW6D6oBEIZP17l0HYejCDBZ+FRZLjml7wgNAWMqHcd2qNRqgtZ+v7aLza2JtBQ==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
 
-  boolbase@1.0.0:
-    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+  '@swc/core-linux-arm-gnueabihf@1.3.78':
+    resolution: {integrity: sha512-v1CpRn+H6fha1WIqmdRvJM40pFdjUHrGfhf4Ygci72nlAU41l5XimN8Iwkm8FgIwf2wnv0lLzedSM4IHvpq/yA==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
 
-  brace-expansion@1.1.12:
-    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+  '@swc/core-linux-arm64-gnu@1.3.78':
+    resolution: {integrity: sha512-Sis17dz9joJRFVvR/gteOZSUNrrrioo81RQzani0Zr5ZZOfWLMTB9DA+0MVlfnVa2taYcsJHJZFoAv9JkLwbzg==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
 
-  brace-expansion@2.0.1:
-    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+  '@swc/core-linux-arm64-musl@1.3.78':
+    resolution: {integrity: sha512-E5F8/qp+QupnfBnsP4vN1PKyCmAHYHDG1GMyPE/zLFOUYLgw+jK4C9rfyLBR0o2bWo1ay2WCIjusBZD9XHGOSA==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
 
-  braces@3.0.3:
-    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
-    engines: {node: '>=8'}
+  '@swc/core-linux-x64-gnu@1.3.78':
+    resolution: {integrity: sha512-iDxa+RknnTQlyy+WfPor1FM6y44ERNI2E0xiUV6gV6uPwegCngi8LFC+E7IvP6+p+yXtAkesunAaiZ8nn0s+rw==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
 
-  browserslist@4.24.4:
-    resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
+  '@swc/core-linux-x64-musl@1.3.78':
+    resolution: {integrity: sha512-dWtIYUFL5sMTE2UKshkXTusHcK8+zAhhGzvqWq1wJS45pqTlrAbzpyqB780fle880x3A6DMitWmsAFARdNzpuQ==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
 
-  buffer-from@1.1.2:
-    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+  '@swc/core-win32-arm64-msvc@1.3.78':
+    resolution: {integrity: sha512-CXFaGEc2M9Su3UoUMC8AnzKb9g+GwPxXfakLWZsjwS448h6jcreExq3nwtBNdVGzQ26xqeVLMFfb1l/oK99Hwg==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
 
-  buffer@6.0.3:
-    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+  '@swc/core-win32-ia32-msvc@1.3.78':
+    resolution: {integrity: sha512-FaH1jwWnJpWkdImpMoiZpMg9oy9UUyZwltzN7hFwjR48e3Li82cRFb+9PifIBHCUSBM+CrrsJXbHP213IMVAyw==}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
 
-  call-bind-apply-helpers@1.0.2:
-    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
-    engines: {node: '>= 0.4'}
+  '@swc/core-win32-x64-msvc@1.3.78':
+    resolution: {integrity: sha512-oYxa+tPdhlx1aH14AIoF6kvVjo49tEOW0drNqoEaVHufvgH0y43QU2Jum3b2+xXztmMRtzK2CSN3GPOAXDKKKg==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
 
-  call-bind@1.0.8:
-    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
-    engines: {node: '>= 0.4'}
+  '@swc/core@1.3.78':
+    resolution: {integrity: sha512-y6DQP571v7fbUUY7nz5G4lNIRGofuO48K5pGhD9VnuOCTuptfooCdi8wnigIrIhM/M4zQ53m/YCMDCbOtDgEww==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@swc/helpers': ^0.5.0
+    peerDependenciesMeta:
+      '@swc/helpers':
+        optional: true
 
-  call-bound@1.0.4:
-    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
-    engines: {node: '>= 0.4'}
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
-  callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
+  '@tanstack/table-core@8.21.2':
+    resolution: {integrity: sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==}
+    engines: {node: '>=12'}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
+  '@tanstack/virtual-core@3.13.2':
+    resolution: {integrity: sha512-Qzz4EgzMbO5gKrmqUondCjiHcuu4B1ftHb0pjCut661lXZdGoHeze9f/M8iwsK1t5LGR6aNuNGU7mxkowaW6RQ==}
 
-  camelcase@5.3.1:
-    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
-    engines: {node: '>=6'}
+  '@tanstack/vue-table@8.21.2':
+    resolution: {integrity: sha512-KBgOWxha/x4m1EdhVWxOpqHb661UjqAxzPcmXR3QiA7aShZ547x19Gw0UJX9we+m+tVcPuLRZ61JsYW47QZFfQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vue: '>=3.2'
 
-  caniuse-lite@1.0.30001701:
-    resolution: {integrity: sha512-faRs/AW3jA9nTwmJBSO1PQ6L/EOgsB5HMQQq4iCu5zhPgVVgO/pZRHlmatwijZKetFw8/Pr4q6dEN8sJuq8qTw==}
+  '@tanstack/vue-virtual@3.13.2':
+    resolution: {integrity: sha512-z4swzjdhzCh95n9dw9lTvw+t3iwSkYRlVkYkra3C9mul/m5fTzHR7KmtkwH4qXMTXGJUbngtC/bz2cHQIHkO8g==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
 
-  chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
+  '@tsconfig/node10@1.0.11':
+    resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
 
-  chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
+  '@tsconfig/node12@1.0.11':
+    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
 
-  class-variance-authority@0.7.1:
-    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+  '@tsconfig/node14@1.0.3':
+    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
 
-  cliui@6.0.0:
-    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+  '@tsconfig/node16@1.0.4':
+    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
 
-  clsx@2.1.1:
-    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
-    engines: {node: '>=6'}
+  '@tybys/wasm-util@0.10.1':
+    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
-  color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
+  '@types/debug@4.1.12':
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
-  color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+  '@types/eslint@9.6.1':
+    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
 
-  commander@2.20.3:
-    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+  '@types/estree@1.0.6':
+    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
-  concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  copy-anything@3.0.5:
-    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
-    engines: {node: '>=12.13'}
+  '@types/json5@0.0.29':
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
-  crc-32@1.2.2:
-    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
-    engines: {node: '>=0.8'}
-    hasBin: true
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
-  create-require@1.1.1:
-    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+  '@types/node@22.13.9':
+    resolution: {integrity: sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw==}
 
-  cross-spawn@7.0.6:
-    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
-    engines: {node: '>= 8'}
+  '@types/parse-path@7.1.0':
+    resolution: {integrity: sha512-EULJ8LApcVEPbrfND0cRQqutIOdiIgJ1Mgrhpy755r14xMohPTEpkV/k28SJvuOs9bHRFW8x+KeDAEPiGQPB9Q==}
+    deprecated: This is a stub types definition. parse-path provides its own type definitions, so you do not need this installed.
 
-  cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
+  '@types/qrcode@1.5.6':
+    resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
 
-  csstype@3.1.3:
-    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+  '@types/resolve@1.20.2':
+    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
-  data-view-buffer@1.0.2:
-    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
-    engines: {node: '>= 0.4'}
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
-  data-view-byte-length@1.0.2:
-    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
-    engines: {node: '>= 0.4'}
+  '@typescript-eslint/eslint-plugin@8.38.0':
+    resolution: {integrity: sha512-CPoznzpuAnIOl4nhj4tRr4gIPj5AfKgkiJmGQDaq+fQnRJTYlcBjbX3wbciGmpoPf8DREufuPRe1tNMZnGdanA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.38.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
 
-  data-view-byte-offset@1.0.1:
-    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
-    engines: {node: '>= 0.4'}
+  '@typescript-eslint/eslint-plugin@8.46.2':
+    resolution: {integrity: sha512-ZGBMToy857/NIPaaCucIUQgqueOiq7HeAKkhlvqVV4lm089zUFW6ikRySx2v+cAhKeUCPuWVHeimyk6Dw1iY3w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.46.2
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
 
-  de-indent@1.0.2:
-    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+  '@typescript-eslint/parser@8.38.0':
+    resolution: {integrity: sha512-Zhy8HCvBUEfBECzIl1PKqF4p11+d0aUJS1GeUiuqK9WmOug8YCmC4h4bjyBvMyAMI9sbRczmrYL5lKg/YMbrcQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
 
-  debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+  '@typescript-eslint/parser@8.46.2':
+    resolution: {integrity: sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
 
-  debug@4.4.0:
-    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
-    engines: {node: '>=6.0'}
+  '@typescript-eslint/project-service@8.38.0':
+    resolution: {integrity: sha512-dbK7Jvqcb8c9QfH01YB6pORpqX1mn5gDZc9n63Ak/+jD67oWXn3Gs0M6vddAN+eDXBCS5EmNWzbSxsn9SzFWWg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
+      typescript: '>=4.8.4 <5.9.0'
 
-  decamelize@1.2.0:
-    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
-    engines: {node: '>=0.10.0'}
+  '@typescript-eslint/project-service@8.46.2':
+    resolution: {integrity: sha512-PULOLZ9iqwI7hXcmL4fVfIsBi6AN9YxRc0frbvmg8f+4hQAjQ5GYNKK0DIArNo+rOKmR/iBYwkpBmnIwin4wBg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
 
-  deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+  '@typescript-eslint/scope-manager@8.38.0':
+    resolution: {integrity: sha512-WJw3AVlFFcdT9Ri1xs/lg8LwDqgekWXWhH3iAF+1ZM+QPd7oxQ6jvtW/JPwzAScxitILUIFs0/AnQ/UWHzbATQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  define-data-property@1.1.4:
-    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
-    engines: {node: '>= 0.4'}
+  '@typescript-eslint/scope-manager@8.46.2':
+    resolution: {integrity: sha512-LF4b/NmGvdWEHD2H4MsHD8ny6JpiVNDzrSZr3CsckEgCbAGZbYM4Cqxvi9L+WqDMT+51Ozy7lt2M+d0JLEuBqA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  define-properties@1.2.1:
-    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
-    engines: {node: '>= 0.4'}
+  '@typescript-eslint/tsconfig-utils@8.38.0':
+    resolution: {integrity: sha512-Lum9RtSE3EroKk/bYns+sPOodqb2Fv50XOl/gMviMKNvanETUuUcC9ObRbzrJ4VSd2JalPqgSAavwrPiPvnAiQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <5.9.0'
 
-  defu@6.1.4:
-    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+  '@typescript-eslint/tsconfig-utils@8.46.2':
+    resolution: {integrity: sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
 
-  detect-browser@5.3.0:
-    resolution: {integrity: sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==}
+  '@typescript-eslint/type-utils@8.38.0':
+    resolution: {integrity: sha512-c7jAvGEZVf0ao2z+nnz8BUaHZD09Agbh+DY7qvBQqLiz8uJzRgVPj5YvOh8I8uEiH8oIUGIfHzMwUcGVco/SJg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+  '@typescript-eslint/type-utils@8.46.2':
+    resolution: {integrity: sha512-HbPM4LbaAAt/DjxXaG9yiS9brOOz6fabal4uvUmaUYe6l3K1phQDMQKBRUrr06BQkxkvIZVVHttqiybM9nJsLA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
 
-  diff@4.0.2:
-    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
-    engines: {node: '>=0.3.1'}
+  '@typescript-eslint/types@8.38.0':
+    resolution: {integrity: sha512-wzkUfX3plUqij4YwWaJyqhiPE5UCRVlFpKn1oCRn2O1bJ592XxWJj8ROQ3JD5MYXLORW84063z3tZTb/cs4Tyw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  dijkstrajs@1.0.3:
-    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+  '@typescript-eslint/types@8.46.2':
+    resolution: {integrity: sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+  '@typescript-eslint/typescript-estree@8.38.0':
+    resolution: {integrity: sha512-fooELKcAKzxux6fA6pxOflpNS0jc+nOQEEOipXFNjSlBS6fqrJOVY/whSn70SScHrcJ2LDsxWrneFoWYSVfqhQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <5.9.0'
 
-  doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
+  '@typescript-eslint/typescript-estree@8.46.2':
+    resolution: {integrity: sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
 
-  dunder-proto@1.0.1:
-    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
-    engines: {node: '>= 0.4'}
+  '@typescript-eslint/utils@8.38.0':
+    resolution: {integrity: sha512-hHcMA86Hgt+ijJlrD8fX0j1j8w4C92zue/8LOPAFioIno+W0+L7KqE8QZKCcPGc/92Vs9x36w/4MPTJhqXdyvg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
 
-  eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+  '@typescript-eslint/utils@8.46.2':
+    resolution: {integrity: sha512-sExxzucx0Tud5tE0XqR0lT0psBQvEpnpiul9XbGUB1QwpWJJAps1O/Z7hJxLGiZLBKMCutjTzDgmd1muEhBnVg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
 
-  electron-to-chromium@1.5.109:
-    resolution: {integrity: sha512-AidaH9JETVRr9DIPGfp1kAarm/W6hRJTPuCnkF+2MqhF4KaAgRIcBc8nvjk+YMXZhwfISof/7WG29eS4iGxQLQ==}
+  '@typescript-eslint/visitor-keys@8.38.0':
+    resolution: {integrity: sha512-pWrTcoFNWuwHlA9CvlfSsGWs14JxfN1TH25zM5L7o0pRLhsoZkDnTsXfQRJBEWJoV5DL0jf+Z+sxiud+K0mq1g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+  '@typescript-eslint/visitor-keys@8.46.2':
+    resolution: {integrity: sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+  '@unhead/vue@2.0.19':
+    resolution: {integrity: sha512-7BYjHfOaoZ9+ARJkT10Q2TjnTUqDXmMpfakIAsD/hXiuff1oqWg1xeXT5+MomhNcC15HbiABpbbBmITLSHxdKg==}
+    peerDependencies:
+      vue: '>=3.5.18'
 
-  entities@4.5.0:
-    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
-    engines: {node: '>=0.12'}
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
+    cpu: [arm]
+    os: [android]
 
-  es-abstract@1.24.0:
-    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
-    engines: {node: '>= 0.4'}
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
+    cpu: [arm64]
+    os: [android]
 
-  es-define-property@1.0.1:
-    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
-    engines: {node: '>= 0.4'}
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
+    cpu: [arm64]
+    os: [darwin]
 
-  es-errors@1.3.0:
-    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
-    engines: {node: '>= 0.4'}
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
+    cpu: [x64]
+    os: [darwin]
 
-  es-object-atoms@1.1.1:
-    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
-    engines: {node: '>= 0.4'}
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
+    cpu: [x64]
+    os: [freebsd]
 
-  es-set-tostringtag@2.1.0:
-    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
-    engines: {node: '>= 0.4'}
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
+    cpu: [arm]
+    os: [linux]
 
-  es-shim-unscopables@1.1.0:
-    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
-    engines: {node: '>= 0.4'}
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
+    cpu: [arm]
+    os: [linux]
 
-  es-to-primitive@1.3.0:
-    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
-    engines: {node: '>= 0.4'}
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
+    cpu: [arm64]
+    os: [linux]
 
-  esbuild@0.25.0:
-    resolution: {integrity: sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==}
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
+    cpu: [x64]
+    os: [win32]
+
+  '@vercel/nft@0.30.3':
+    resolution: {integrity: sha512-UEq+eF0ocEf9WQCV1gktxKhha36KDs7jln5qii6UpPf5clMqDc0p3E7d9l2Smx0i9Pm1qpq4S4lLfNl97bbv6w==}
     engines: {node: '>=18'}
     hasBin: true
 
-  escalade@3.2.0:
-    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
-    engines: {node: '>=6'}
+  '@vitejs/plugin-vue-jsx@5.1.1':
+    resolution: {integrity: sha512-uQkfxzlF8SGHJJVH966lFTdjM/lGcwJGzwAHpVqAPDD/QcsqoUGa+q31ox1BrUfi+FLP2ChVp7uLXE3DkHyDdQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0
+      vue: ^3.0.0
 
-  escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
+  '@vitejs/plugin-vue@5.2.1':
+    resolution: {integrity: sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0
+      vue: ^3.2.25
 
-  eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+  '@vitejs/plugin-vue@6.0.1':
+    resolution: {integrity: sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0
+      vue: ^3.2.25
 
-  eslint-module-utils@2.12.1:
-    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
-    engines: {node: '>=4'}
+  '@volar/language-core@2.4.23':
+    resolution: {integrity: sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==}
+
+  '@volar/source-map@2.4.23':
+    resolution: {integrity: sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q==}
+
+  '@volar/typescript@2.4.23':
+    resolution: {integrity: sha512-lAB5zJghWxVPqfcStmAP1ZqQacMpe90UrP5RJ3arDyrhy4aCUQqmxPPLB2PWDKugvylmO41ljK7vZ+t6INMTag==}
+
+  '@vue-macros/common@3.1.1':
+    resolution: {integrity: sha512-afW2DMjgCBVs33mWRlz7YsGHzoEEupnl0DK5ZTKsgziAlLh5syc5m+GM7eqeYrgiQpwMaVxa1fk73caCvPxyAw==}
+    engines: {node: '>=20.19.0'}
     peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
+      vue: ^2.7.0 || ^3.2.25
     peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
+      vue:
         optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
+
+  '@vue/babel-helper-vue-transform-on@1.5.0':
+    resolution: {integrity: sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==}
+
+  '@vue/babel-plugin-jsx@1.5.0':
+    resolution: {integrity: sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
         optional: true
 
-  eslint-plugin-import@2.32.0:
-    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
-    engines: {node: '>=4'}
+  '@vue/babel-plugin-resolve-type@1.5.0':
+    resolution: {integrity: sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==}
     peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
+      '@babel/core': ^7.0.0-0
 
-  eslint-plugin-vue@10.3.0:
-    resolution: {integrity: sha512-A0u9snqjCfYaPnqqOaH6MBLVWDUIN4trXn8J3x67uDcXvR7X6Ut8p16N+nYhMCQ9Y7edg2BIRGzfyZsY0IdqoQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@vue/compiler-core@3.5.13':
+    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
+
+  '@vue/compiler-core@3.5.22':
+    resolution: {integrity: sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==}
+
+  '@vue/compiler-dom@3.5.13':
+    resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
+
+  '@vue/compiler-dom@3.5.22':
+    resolution: {integrity: sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==}
+
+  '@vue/compiler-sfc@3.5.13':
+    resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
+
+  '@vue/compiler-sfc@3.5.22':
+    resolution: {integrity: sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==}
+
+  '@vue/compiler-ssr@3.5.13':
+    resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
+
+  '@vue/compiler-ssr@3.5.22':
+    resolution: {integrity: sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==}
+
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
+  '@vue/devtools-api@7.7.2':
+    resolution: {integrity: sha512-1syn558KhyN+chO5SjlZIwJ8bV/bQ1nOVTG66t2RbG66ZGekyiYNmRO7X9BJCXQqPsFHlnksqvPhce2qpzxFnA==}
+
+  '@vue/devtools-core@7.7.7':
+    resolution: {integrity: sha512-9z9TLbfC+AjAi1PQyWX+OErjIaJmdFlbDHcD+cAMYKY6Bh5VlsAtCeGyRMrXwIlMEQPukvnWt3gZBLwTAIMKzQ==}
     peerDependencies:
-      '@typescript-eslint/parser': ^7.0.0 || ^8.0.0
-      eslint: ^8.57.0 || ^9.0.0
-      vue-eslint-parser: ^10.0.0
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
+      vue: ^3.0.0
 
-  eslint-scope@8.4.0:
-    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@vue/devtools-kit@7.7.7':
+    resolution: {integrity: sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==}
 
-  eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@vue/devtools-shared@7.7.7':
+    resolution: {integrity: sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==}
 
-  eslint-visitor-keys@4.2.1:
-    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+  '@vue/eslint-config-typescript@14.6.0':
+    resolution: {integrity: sha512-UpiRY/7go4Yps4mYCjkvlIbVWmn9YvPGQDxTAlcKLphyaD77LjIu3plH4Y9zNT0GB4f3K5tMmhhtRhPOgrQ/bQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^9.10.0
+      eslint-plugin-vue: ^9.28.0 || ^10.0.0
+      typescript: '>=4.8.4'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  eslint@9.32.0:
-    resolution: {integrity: sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    hasBin: true
+  '@vue/language-core@3.1.2':
+    resolution: {integrity: sha512-PyFDCqpdfYUT+oMLqcc61oHfJlC6yjhybaefwQjRdkchIihToOEpJ2Wu/Ebq2yrnJdd1EsaAvZaXVAqcxtnDxQ==}
     peerDependencies:
-      jiti: '*'
+      typescript: '*'
     peerDependenciesMeta:
-      jiti:
+      typescript:
         optional: true
 
-  espree@10.4.0:
-    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@vue/reactivity@3.5.13':
+    resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
 
-  esquery@1.6.0:
-    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
-    engines: {node: '>=0.10'}
+  '@vue/reactivity@3.5.22':
+    resolution: {integrity: sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==}
 
-  esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
+  '@vue/runtime-core@3.5.13':
+    resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
 
-  estraverse@5.3.0:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
+  '@vue/runtime-core@3.5.22':
+    resolution: {integrity: sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==}
 
-  estree-walker@2.0.2:
-    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+  '@vue/runtime-dom@3.5.13':
+    resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
 
-  esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
+  '@vue/runtime-dom@3.5.22':
+    resolution: {integrity: sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==}
 
-  ethereum-cryptography@2.2.1:
-    resolution: {integrity: sha512-r/W8lkHSiTLxUxW8Rf3u4HGB0xQweG2RyETjywylKZSzLWoWAijRz8WCuOtJ6wah+avllXBqZuk29HCCvhEIRg==}
+  '@vue/server-renderer@3.5.13':
+    resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==}
+    peerDependencies:
+      vue: 3.5.13
 
-  event-target-shim@5.0.1:
-    resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
-    engines: {node: '>=6'}
+  '@vue/server-renderer@3.5.22':
+    resolution: {integrity: sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==}
+    peerDependencies:
+      vue: 3.5.22
 
-  events@3.3.0:
-    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
-    engines: {node: '>=0.8.x'}
+  '@vue/shared@3.5.13':
+    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
-  extension-port-stream@3.0.0:
-    resolution: {integrity: sha512-an2S5quJMiy5bnZKEf6AkfH/7r8CzHvhchU40gxN+OM6HPhe7Z9T1FUychcf2M9PpPOO0Hf7BAEfJkw2TDIBDw==}
-    engines: {node: '>=12.0.0'}
+  '@vue/shared@3.5.22':
+    resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
 
-  extension-port-stream@4.2.0:
-    resolution: {integrity: sha512-i5IgiPVMVrHN+Zx8PRjvFsOw8L1A3sboVwPZghDjW9Yp1BMmBDE6mCcTNu4xMXPYduBOwI3CBK7wd72LcOyD6g==}
-    engines: {node: '>=12.0.0'}
+  '@vue/tsconfig@0.7.0':
+    resolution: {integrity: sha512-ku2uNz5MaZ9IerPPUyOHzyjhXoX2kVJaVf7hL315DC17vS6IiZRmmCPfggNbU16QTvM80+uYYy3eYJB59WCtvg==}
     peerDependencies:
-      webextension-polyfill: ^0.10.0 || ^0.11.0 || ^0.12.0
+      typescript: 5.x
+      vue: ^3.4.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vue:
+        optional: true
 
-  fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+  '@vueuse/core@12.8.2':
+    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
 
-  fast-glob@3.3.3:
-    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
-    engines: {node: '>=8.6.0'}
+  '@vueuse/metadata@12.8.2':
+    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
 
-  fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+  '@vueuse/shared@12.8.2':
+    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
 
-  fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+  abbrev@3.0.1:
+    resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
+    engines: {node: ^18.17.0 || >=20.5.0}
 
-  fast-safe-stringify@2.1.1:
-    resolution: {integrity: sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==}
+  abort-controller@3.0.0:
+    resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
+    engines: {node: '>=6.5'}
 
-  fastq@1.19.1:
-    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+  accepts@1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
 
-  file-entry-cache@8.0.0:
-    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
-    engines: {node: '>=16.0.0'}
+  acorn-import-attributes@1.9.5:
+    resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
+    peerDependencies:
+      acorn: ^8
 
-  fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
+    engines: {node: '>=0.4.0'}
+
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  alien-signals@3.0.3:
+    resolution: {integrity: sha512-2JXjom6R7ZwrISpUphLhf4htUq1aKRCennTJ6u9kFfr3sLmC9+I4CxxVi+McoFnIg+p1HnVrfLT/iCt4Dlz//Q==}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
-  find-up@4.1.0:
-    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
-  find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
 
-  flat-cache@4.0.1:
-    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
-    engines: {node: '>=16'}
+  ansis@4.2.0:
+    resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
+    engines: {node: '>=14'}
 
-  flatted@3.3.3:
-    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
-  for-each@0.3.5:
-    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
-    engines: {node: '>= 0.4'}
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
 
-  foreground-child@3.3.1:
-    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+  archiver-utils@5.0.2:
+    resolution: {integrity: sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==}
+    engines: {node: '>= 14'}
+
+  archiver@7.0.1:
+    resolution: {integrity: sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==}
+    engines: {node: '>= 14'}
+
+  are-docs-informative@0.0.2:
+    resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
     engines: {node: '>=14'}
 
-  fraction.js@4.3.7:
-    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+  arg@4.1.3:
+    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
 
-  fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
-  function-bind@1.1.2:
-    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  function.prototype.name@1.1.8:
-    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+  aria-hidden@1.2.4:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
 
-  functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+  array-includes@3.1.9:
+    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
+    engines: {node: '>= 0.4'}
 
-  get-caller-file@2.0.5:
-    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
-    engines: {node: 6.* || 8.* || >= 10.*}
+  array.prototype.findlastindex@1.2.6:
+    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
+    engines: {node: '>= 0.4'}
 
-  get-intrinsic@1.3.0:
-    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+  array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
     engines: {node: '>= 0.4'}
 
-  get-proto@1.0.1:
-    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+  array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
     engines: {node: '>= 0.4'}
 
-  get-symbol-description@1.1.0:
-    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
     engines: {node: '>= 0.4'}
 
-  get-tsconfig@4.10.0:
-    resolution: {integrity: sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==}
+  ast-kit@2.1.3:
+    resolution: {integrity: sha512-TH+b3Lv6pUjy/Nu0m6A2JULtdzLpmqF9x1Dhj00ZoEiML8qvVA9j1flkzTKNYgdEhWrjDwtWNpyyCUbfQe514g==}
+    engines: {node: '>=20.19.0'}
 
-  glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
+  ast-walker-scope@0.8.3:
+    resolution: {integrity: sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg==}
+    engines: {node: '>=20.19.0'}
 
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
 
-  glob@10.4.5:
-    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
-    hasBin: true
+  async-sema@3.1.1:
+    resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
 
-  globals@14.0.0:
-    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
-    engines: {node: '>=18'}
+  async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
-  globals@16.3.0:
-    resolution: {integrity: sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ==}
-    engines: {node: '>=18'}
+  at-least-node@1.0.0:
+    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
+    engines: {node: '>= 4.0.0'}
 
-  globalthis@1.0.4:
-    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
-    engines: {node: '>= 0.4'}
+  autoprefixer@10.4.20:
+    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
 
-  gopd@1.2.0:
-    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+  autoprefixer@10.4.21:
+    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+  b4a@1.7.3:
+    resolution: {integrity: sha512-5Q2mfq2WfGuFp3uS//0s6baOJLMoVduPYVeNmDYxu5OUA1/cBfvr2RIS7vi62LdNj/urk1hfmj867I3qt6uZ7Q==}
+    peerDependencies:
+      react-native-b4a: '*'
+    peerDependenciesMeta:
+      react-native-b4a:
+        optional: true
 
-  has-bigints@1.1.0:
-    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
-    engines: {node: '>= 0.4'}
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  has-flag@4.0.0:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
-    engines: {node: '>=8'}
+  bare-events@2.8.1:
+    resolution: {integrity: sha512-oxSAxTS1hRfnyit2CL5QpAOS5ixfBjj6ex3yTNvXyY/kE719jQ/IjuESJBK2w5v4wwQRAHGseVJXx9QBYOtFGQ==}
+    peerDependencies:
+      bare-abort-controller: '*'
+    peerDependenciesMeta:
+      bare-abort-controller:
+        optional: true
 
-  has-property-descriptors@1.0.2:
-    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  has-proto@1.2.0:
-    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
-    engines: {node: '>= 0.4'}
+  baseline-browser-mapping@2.8.20:
+    resolution: {integrity: sha512-JMWsdF+O8Orq3EMukbUN1QfbLK9mX2CkUmQBcW2T0s8OmdAUL5LLM/6wFwSrqXzlXB13yhyK9gTKS1rIizOduQ==}
+    hasBin: true
 
-  has-symbols@1.1.0:
-    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
-    engines: {node: '>= 0.4'}
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
 
-  has-tostringtag@1.0.2:
-    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
-    engines: {node: '>= 0.4'}
+  bindings@1.5.0:
+    resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
-  hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
-    engines: {node: '>= 0.4'}
+  birpc@2.6.1:
+    resolution: {integrity: sha512-LPnFhlDpdSH6FJhJyn4M0kFO7vtQ5iPw24FnG0y21q09xC7e8+1LeR31S1MAIrDAHp4m7aas4bEkTDTvMAtebQ==}
 
-  he@1.2.0:
-    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
-    hasBin: true
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
-  hookable@5.5.3:
-    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
-  ieee754@1.2.1:
-    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+  brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
 
-  ignore@5.3.2:
-    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
-    engines: {node: '>= 4'}
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
 
-  ignore@7.0.5:
-    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
-    engines: {node: '>= 4'}
+  browserslist@4.24.4:
+    resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
 
-  import-fresh@3.3.1:
-    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
-    engines: {node: '>=6'}
+  browserslist@4.27.0:
+    resolution: {integrity: sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
 
-  imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
+  buffer-crc32@1.0.0:
+    resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
+    engines: {node: '>=8.0.0'}
 
-  inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
-  internal-slot@1.1.0:
-    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
-    engines: {node: '>= 0.4'}
+  buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
-  is-array-buffer@3.0.5:
-    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
-    engines: {node: '>= 0.4'}
+  builtin-modules@5.0.0:
+    resolution: {integrity: sha512-bkXY9WsVpY7CvMhKSR6pZilZu9Ln5WDrKVBUXf2S443etkmEO4V58heTecXcUIsNsi4Rx8JUO4NfX1IcQl4deg==}
+    engines: {node: '>=18.20'}
 
-  is-async-function@2.1.1:
-    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
-    engines: {node: '>= 0.4'}
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
 
-  is-bigint@1.1.0:
-    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
-    engines: {node: '>= 0.4'}
+  bundle-require@5.1.0:
+    resolution: {integrity: sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    peerDependencies:
+      esbuild: '>=0.18'
 
-  is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
+  c12@2.0.4:
+    resolution: {integrity: sha512-3DbbhnFt0fKJHxU4tEUPmD1ahWE4PWPMomqfYsTJdrhpmEnRKJi3qSC4rO5U6E6zN1+pjBY7+z8fUmNRMaVKLw==}
+    peerDependencies:
+      magicast: ^0.3.5
+    peerDependenciesMeta:
+      magicast:
+        optional: true
 
-  is-boolean-object@1.2.2:
-    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
-    engines: {node: '>= 0.4'}
+  c12@3.3.1:
+    resolution: {integrity: sha512-LcWQ01LT9tkoUINHgpIOv3mMs+Abv7oVCrtpMRi1PaapVEpWoMga5WuT7/DqFTu7URP9ftbOmimNw1KNIGh9DQ==}
+    peerDependencies:
+      magicast: ^0.3.5
+    peerDependenciesMeta:
+      magicast:
+        optional: true
 
-  is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
 
-  is-core-module@2.16.1:
-    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
-    engines: {node: '>= 0.4'}
+  cache-content-type@1.0.1:
+    resolution: {integrity: sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==}
+    engines: {node: '>= 6.0.0'}
 
-  is-data-view@1.0.2:
-    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
 
-  is-date-object@1.1.0:
-    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
     engines: {node: '>= 0.4'}
 
-  is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
-
-  is-finalizationregistry@1.1.1:
-    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
     engines: {node: '>= 0.4'}
 
-  is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
 
-  is-generator-function@1.1.0:
-    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
-    engines: {node: '>= 0.4'}
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
 
-  is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
 
-  is-map@2.0.3:
-    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
-    engines: {node: '>= 0.4'}
+  caniuse-api@3.0.0:
+    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
-  is-negative-zero@2.0.3:
-    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
-    engines: {node: '>= 0.4'}
+  caniuse-lite@1.0.30001751:
+    resolution: {integrity: sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==}
 
-  is-number-object@1.1.1:
-    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
-    engines: {node: '>= 0.4'}
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
 
-  is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
+  change-case@5.4.4:
+    resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
 
-  is-regex@1.2.1:
-    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
-    engines: {node: '>= 0.4'}
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
 
-  is-set@2.0.3:
-    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
-    engines: {node: '>= 0.4'}
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
 
-  is-shared-array-buffer@1.0.4:
-    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
-    engines: {node: '>= 0.4'}
+  chownr@2.0.0:
+    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
+    engines: {node: '>=10'}
 
-  is-stream@2.0.1:
-    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+
+  ci-info@4.3.1:
+    resolution: {integrity: sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==}
     engines: {node: '>=8'}
 
-  is-string@1.1.1:
-    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
-    engines: {node: '>= 0.4'}
+  citty@0.1.6:
+    resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
 
-  is-symbol@1.1.1:
-    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
-    engines: {node: '>= 0.4'}
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
-  is-typed-array@1.1.15:
-    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
-    engines: {node: '>= 0.4'}
+  clean-regexp@1.0.0:
+    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
+    engines: {node: '>=4'}
 
-  is-weakmap@2.0.2:
-    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
-    engines: {node: '>= 0.4'}
+  clipboardy@4.0.0:
+    resolution: {integrity: sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==}
+    engines: {node: '>=18'}
 
-  is-weakref@1.1.1:
-    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
-    engines: {node: '>= 0.4'}
+  clipboardy@5.0.0:
+    resolution: {integrity: sha512-MQfKHaD09eP80Pev4qBxZLbxJK/ONnqfSYAPlCmPh+7BDboYtO/3BmB6HGzxDIT0SlTRc2tzS8lQqfcdLtZ0Kg==}
+    engines: {node: '>=20'}
 
-  is-weakset@2.0.4:
-    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
-    engines: {node: '>= 0.4'}
+  cliui@6.0.0:
+    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
 
-  is-what@4.1.16:
-    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
-    engines: {node: '>=12.13'}
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
 
-  isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
 
-  isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+  cluster-key-slot@1.1.2:
+    resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
+    engines: {node: '>=0.10.0'}
 
-  jackspeak@3.4.3:
-    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+  co@4.6.0:
+    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
-    hasBin: true
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
 
-  js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+  colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
 
-  json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
 
-  json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+  commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
-    hasBin: true
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
 
-  keyv@4.5.4:
-    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+  commander@6.2.1:
+    resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
+    engines: {node: '>= 6'}
 
-  levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
+  comment-parser@1.4.1:
+    resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
+    engines: {node: '>= 12.0.0'}
 
-  lilconfig@3.1.3:
-    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
-    engines: {node: '>=14'}
+  commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+  compatx@0.2.0:
+    resolution: {integrity: sha512-6gLRNt4ygsi5NyMVhceOCFv14CIdDFN7fQjX1U4+47qVE/+kjPoXMK65KWK+dWxmFzMTuKazoQ9sch6pM0p5oA==}
 
-  locate-path@5.0.0:
-    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
-    engines: {node: '>=8'}
+  compress-commons@6.0.2:
+    resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==}
+    engines: {node: '>= 14'}
 
-  locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
-  long@5.3.2:
-    resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==}
+  confbox@0.2.2:
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
 
-  lru-cache@10.4.3:
-    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
 
-  lucide-vue-next@0.477.0:
-    resolution: {integrity: sha512-C7azIKO7aJKf5MD7OIzV7NRDtnjXH3KSXfyJgGqRIMemuMzW/9esuMxDXIXDhBZcJgRtXMUN0FcJwOJZQ8SywA==}
-    peerDependencies:
-      vue: '>=3.0.1'
+  content-disposition@0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
 
-  magic-string@0.30.17:
-    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
 
-  make-error@1.3.6:
-    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  math-intrinsics@1.1.0:
-    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
-    engines: {node: '>= 0.4'}
+  cookie-es@1.2.2:
+    resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==}
 
-  merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
+  cookie-es@2.0.0:
+    resolution: {integrity: sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==}
 
-  micro-ftch@0.3.1:
-    resolution: {integrity: sha512-/0LLxhzP0tfiR5hcQebtudP56gUurs2CLkGarnCiB/OqEyUFQ6U3paQi/tgLv0hBJYt2rnr9MNpxz4fiiugstg==}
+  cookie@1.0.2:
+    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
+    engines: {node: '>=18'}
 
-  micromatch@4.0.8:
-    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
-    engines: {node: '>=8.6'}
+  cookies@0.9.1:
+    resolution: {integrity: sha512-TG2hpqe4ELx54QER/S3HQ9SRVnQnGBtKUz5bLQWtYAQ+o6GpgMs6sYUvaiJjVxb+UXwhRhAEP3m7LbsIZ77Hmw==}
+    engines: {node: '>= 0.8'}
 
-  minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+  copy-anything@3.0.5:
+    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
+    engines: {node: '>=12.13'}
 
-  minimatch@9.0.5:
-    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  core-js-compat@3.46.0:
+    resolution: {integrity: sha512-p9hObIIEENxSV8xIu+V68JjSeARg6UVMG5mR+JEUguG3sI6MsiS1njz2jHmyJDvA+8jX/sytkBHup6kxhM9law==}
 
-  minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+  core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
-  minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  crc-32@1.2.2:
+    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
 
-  mitt@3.0.1:
-    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+  crc32-stream@6.0.0:
+    resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
+    engines: {node: '>= 14'}
 
-  ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+  create-require@1.1.1:
+    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
-  muggle-string@0.4.1:
-    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+  croner@9.1.0:
+    resolution: {integrity: sha512-p9nwwR4qyT5W996vBZhdvBCnMhicY5ytZkR4D1Xj0wuTDEiMnjwR57Q3RXYY/s0EpX6Ay3vgIcfaR+ewGHsi+g==}
+    engines: {node: '>=18.0'}
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
 
-  nanoid@3.3.8:
-    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
+  crossws@0.3.5:
+    resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
 
-  natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+  css-declaration-sorter@7.3.0:
+    resolution: {integrity: sha512-LQF6N/3vkAMYF4xoHLJfG718HRJh34Z8BnNhd6bosOMIVjMlhuZK5++oZa3uYAgrI5+7x2o27gUqTR2U/KjUOQ==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss: ^8.0.9
 
-  node-releases@2.0.19:
-    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
 
-  normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
 
-  normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
+  css-tree@3.1.0:
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
-  nth-check@2.1.1:
-    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
 
-  object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
 
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
+  cssnano-preset-default@7.0.9:
+    resolution: {integrity: sha512-tCD6AAFgYBOVpMBX41KjbvRh9c2uUjLXRyV7KHSIrwHiq5Z9o0TFfUCoM3TwVrRsRteN3sVXGNvjVNxYzkpTsA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
 
-  object-inspect@1.13.4:
-    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
-    engines: {node: '>= 0.4'}
+  cssnano-utils@5.0.1:
+    resolution: {integrity: sha512-ZIP71eQgG9JwjVZsTPSqhc6GHgEr53uJ7tK5///VfyWj6Xp2DBmixWHqJgPno+PqATzn48pL42ww9x5SSGmhZg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
 
-  object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
+  cssnano@7.1.1:
+    resolution: {integrity: sha512-fm4D8ti0dQmFPeF8DXSAA//btEmqCOgAc/9Oa3C1LW94h5usNrJEfrON7b4FkPZgnDEn6OUs5NdxiJZmAtGOpQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
 
-  object.assign@4.1.7:
-    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
-    engines: {node: '>= 0.4'}
+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
 
-  object.fromentries@2.0.8:
-    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
-    engines: {node: '>= 0.4'}
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  object.groupby@1.0.3:
-    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
     engines: {node: '>= 0.4'}
 
-  object.values@1.2.1:
-    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
     engines: {node: '>= 0.4'}
 
-  ohash@1.1.6:
-    resolution: {integrity: sha512-TBu7PtV8YkAZn0tSxobKY2n2aAQva936lhRrj6957aDaCf9IEtqsKbgMzXE/F/sjqYOwmrukeORHNLe5glk7Cg==}
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
 
-  once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+  db0@0.3.4:
+    resolution: {integrity: sha512-RiXXi4WaNzPTHEOu8UPQKMooIbqOEyqA1t7Z6MsdxSCeb8iUC9ko3LcmsLmeUt2SM5bctfArZKkRQggKZz7JNw==}
+    peerDependencies:
+      '@electric-sql/pglite': '*'
+      '@libsql/client': '*'
+      better-sqlite3: '*'
+      drizzle-orm: '*'
+      mysql2: '*'
+      sqlite3: '*'
+    peerDependenciesMeta:
+      '@electric-sql/pglite':
+        optional: true
+      '@libsql/client':
+        optional: true
+      better-sqlite3:
+        optional: true
+      drizzle-orm:
+        optional: true
+      mysql2:
+        optional: true
+      sqlite3:
+        optional: true
 
-  optionator@0.9.4:
-    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
-    engines: {node: '>= 0.8.0'}
+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
 
-  own-keys@1.0.1:
-    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
-    engines: {node: '>= 0.4'}
+  debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
 
-  p-limit@2.3.0:
-    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
-    engines: {node: '>=6'}
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
 
-  p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
 
-  p-locate@4.1.0:
-    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
-    engines: {node: '>=8'}
+  deep-equal@1.0.1:
+    resolution: {integrity: sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==}
 
-  p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
-  p-try@2.2.0:
-    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
-    engines: {node: '>=6'}
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
 
-  package-json-from-dist@1.0.1:
-    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+  default-browser-id@5.0.0:
+    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
+    engines: {node: '>=18'}
 
-  parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
+  default-browser@5.2.1:
+    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
+    engines: {node: '>=18'}
 
-  path-browserify@1.0.1:
-    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
 
-  path-exists@4.0.0:
-    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+  define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
     engines: {node: '>=8'}
 
-  path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
 
-  path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
 
-  path-scurry@1.11.1:
-    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
-    engines: {node: '>=16 || 14 >=14.18'}
+  defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
-  perfect-debounce@1.0.0:
-    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+  delegates@1.0.0:
+    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
 
-  picocolors@1.1.1:
-    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+  denque@2.1.0:
+    resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
+    engines: {node: '>=0.10'}
 
-  picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
+  depd@1.1.2:
+    resolution: {integrity: sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==}
+    engines: {node: '>= 0.6'}
 
-  picomatch@4.0.3:
-    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
-    engines: {node: '>=12'}
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
 
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
+  destr@2.0.5:
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
 
-  pinia@3.0.1:
-    resolution: {integrity: sha512-WXglsDzztOTH6IfcJ99ltYZin2mY8XZCXujkYWVIJlBjqsP6ST7zw+Aarh63E1cDVYeyUcPCxPHzJpEOmzB6Wg==}
-    peerDependencies:
-      typescript: '>=4.4.4'
-      vue: ^2.7.0 || ^3.5.11
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  destroy@1.2.0:
+    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 
-  pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-
-  pngjs@5.0.0:
-    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
-    engines: {node: '>=10.13.0'}
-
-  pony-cause@2.1.11:
-    resolution: {integrity: sha512-M7LhCsdNbNgiLYiP4WjsfLUuFmCfnjdF6jKe2R9NKl4WFN+HZPGHJZ9lnLP7f9ZnKe3U9nuWD0szirmj+migUg==}
-    engines: {node: '>=12.0.0'}
-
-  possible-typed-array-names@1.1.0:
-    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
-    engines: {node: '>= 0.4'}
-
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
+  detect-browser@5.3.0:
+    resolution: {integrity: sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==}
 
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
 
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
+  devalue@5.4.2:
+    resolution: {integrity: sha512-MwPZTKEPK2k8Qgfmqrd48ZKVvzSQjgW0lXLxiIBA8dQjtf/6mw6pggHNLcyDKyf+fI6eXxlQwPsfaCMTU5U+Bw==}
 
-  postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
-  postcss@8.5.3:
-    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
-    engines: {node: ^10 || ^12 || >=14}
+  diff@4.0.2:
+    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+    engines: {node: '>=0.3.1'}
 
-  prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
+  diff@8.0.2:
+    resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
+    engines: {node: '>=0.3.1'}
 
-  process@0.11.10:
-    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
-    engines: {node: '>= 0.6.0'}
+  dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
 
-  protobufjs@7.2.5:
-    resolution: {integrity: sha512-gGXRSXvxQ7UiPgfw8gevrfRWcTlSbOFg+p/N+JVJEK5VhueL2miT6qTymqAmjr1Q5WbOCyJbyrk6JfWKwlFn6A==}
-    engines: {node: '>=12.0.0'}
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
-  punycode@2.3.1:
-    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
-    engines: {node: '>=6'}
+  doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
 
-  qrcode@1.5.4:
-    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
-  queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
 
-  readable-stream@3.6.2:
-    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
-    engines: {node: '>= 6'}
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
-  readable-stream@4.7.0:
-    resolution: {integrity: sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  dot-prop@10.1.0:
+    resolution: {integrity: sha512-MVUtAugQMOff5RnBy2d9N31iG0lNwg1qAoAOn7pOK5wf94WIaE3My2p3uwTQuvS2AcqchkcR3bHByjaM0mmi7Q==}
+    engines: {node: '>=20'}
 
-  readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
+  dotenv@16.6.1:
+    resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
+    engines: {node: '>=12'}
 
-  reflect.getprototypeof@1.0.10:
-    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
-    engines: {node: '>= 0.4'}
+  dotenv@17.2.3:
+    resolution: {integrity: sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w==}
+    engines: {node: '>=12'}
 
-  regexp.prototype.flags@1.5.4:
-    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
-  reka-ui@2.0.2:
-    resolution: {integrity: sha512-pC2UF6Z+kJF96aJvIErhkSO4DJYIeq9pgvh3pntNqcZb3zFGMzw8h2uny+GnLX2CKiQV54kZNYXxecYIiPMGyg==}
-    peerDependencies:
-      vue: '>= 3.2.0'
-
-  require-directory@2.1.1:
-    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
-    engines: {node: '>=0.10.0'}
-
-  require-main-filename@2.0.0:
-    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
-
-  resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-
-  resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
-
-  resolve@1.22.10:
-    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
-    engines: {node: '>= 0.4'}
-    hasBin: true
+  duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
-  reusify@1.1.0:
-    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  rfdc@1.4.1:
-    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
-  rollup@4.34.9:
-    resolution: {integrity: sha512-nF5XYqWWp9hx/LrpC8sZvvvmq0TeTjQgaZHYmAgwysT9nh8sWnZhBnM8ZyVbbJFIQBLwHDNoMqsBZBbUo4U8sQ==}
-    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
-    hasBin: true
+  electron-to-chromium@1.5.109:
+    resolution: {integrity: sha512-AidaH9JETVRr9DIPGfp1kAarm/W6hRJTPuCnkF+2MqhF4KaAgRIcBc8nvjk+YMXZhwfISof/7WG29eS4iGxQLQ==}
 
-  run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+  electron-to-chromium@1.5.241:
+    resolution: {integrity: sha512-ILMvKX/ZV5WIJzzdtuHg8xquk2y0BOGlFOxBVwTpbiXqWIH0hamG45ddU4R3PQ0gYu+xgo0vdHXHli9sHIGb4w==}
 
-  safe-array-concat@1.1.3:
-    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
-    engines: {node: '>=0.4'}
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
-  safe-buffer@5.2.1:
-    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
-  safe-push-apply@1.0.0:
-    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
-    engines: {node: '>= 0.4'}
+  encodeurl@1.0.2:
+    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
+    engines: {node: '>= 0.8'}
 
-  safe-regex-test@1.1.0:
-    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
-    engines: {node: '>= 0.4'}
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
 
-  semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
 
-  semver@7.7.1:
-    resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
-    engines: {node: '>=10'}
-    hasBin: true
+  error-stack-parser-es@1.0.5:
+    resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
 
-  set-blocking@2.0.0:
-    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+  errx@0.1.0:
+    resolution: {integrity: sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==}
 
-  set-function-length@1.2.2:
-    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+  es-abstract@1.24.0:
+    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
     engines: {node: '>= 0.4'}
 
-  set-function-name@2.0.2:
-    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
 
-  set-proto@1.0.0:
-    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
-
-  shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
-  side-channel-list@1.0.0:
-    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
 
-  side-channel-map@1.0.1:
-    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
-  side-channel-weakmap@1.0.2:
-    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+  es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
     engines: {node: '>= 0.4'}
 
-  side-channel@1.1.0:
-    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
-  signal-exit@4.1.0:
-    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
-    engines: {node: '>=14'}
-
-  source-map-js@1.2.1:
-    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
-    engines: {node: '>=0.10.0'}
+  esbuild@0.25.0:
+    resolution: {integrity: sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==}
+    engines: {node: '>=18'}
+    hasBin: true
 
-  source-map-support@0.5.21:
-    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+  esbuild@0.25.11:
+    resolution: {integrity: sha512-KohQwyzrKTQmhXDW1PjCv3Tyspn9n5GcY2RTDqeORIdIJY8yKIF7sTSopFmn/wpMPW4rdPXI0UE5LJLuq3bx0Q==}
+    engines: {node: '>=18'}
+    hasBin: true
 
-  source-map@0.6.1:
-    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
-    engines: {node: '>=0.10.0'}
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
 
-  speakingurl@14.0.1:
-    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
-    engines: {node: '>=0.10.0'}
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
-  stop-iteration-iterator@1.1.0:
-    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
-    engines: {node: '>= 0.4'}
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
 
-  string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
 
-  string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
-  string.prototype.trim@1.2.10:
-    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.trimend@1.0.9:
-    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
-    engines: {node: '>= 0.4'}
+  eslint-config-flat-gitignore@2.1.0:
+    resolution: {integrity: sha512-cJzNJ7L+psWp5mXM7jBX+fjHtBvvh06RBlcweMhKD8jWqQw0G78hOW5tpVALGHGFPsBV+ot2H+pdDGJy6CV8pA==}
+    peerDependencies:
+      eslint: ^9.5.0
 
-  string.prototype.trimstart@1.0.8:
-    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
-    engines: {node: '>= 0.4'}
+  eslint-flat-config-utils@2.1.4:
+    resolution: {integrity: sha512-bEnmU5gqzS+4O+id9vrbP43vByjF+8KOs+QuuV4OlqAuXmnRW2zfI/Rza1fQvdihQ5h4DUo0NqFAiViD4mSrzQ==}
 
-  string_decoder@1.3.0:
-    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+  eslint-import-context@0.1.9:
+    resolution: {integrity: sha512-K9Hb+yRaGAGUbwjhFNHvSmmkZs9+zbuoe3kFQ4V1wYjrepUFYM2dZAfNtjbbj3qsPfUfsA68Bx/ICWQMi+C8Eg==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      unrs-resolver: ^1.0.0
+    peerDependenciesMeta:
+      unrs-resolver:
+        optional: true
 
-  strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
+  eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
 
-  strip-ansi@7.1.0:
-    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
-    engines: {node: '>=12'}
+  eslint-merge-processors@2.0.0:
+    resolution: {integrity: sha512-sUuhSf3IrJdGooquEUB5TNpGNpBoQccbnaLHsb1XkBLUPPqCNivCpY05ZcpCOiV9uHwO2yxXEWVczVclzMxYlA==}
+    peerDependencies:
+      eslint: '*'
 
-  strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+  eslint-module-utils@2.12.1:
+    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
     engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
 
-  strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-
-  sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
-  superjson@2.2.2:
-    resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
-    engines: {node: '>=16'}
+  eslint-plugin-import-lite@0.3.0:
+    resolution: {integrity: sha512-dkNBAL6jcoCsXZsQ/Tt2yXmMDoNt5NaBh/U7yvccjiK8cai6Ay+MK77bMykmqQA2bTF6lngaLCDij6MTO3KkvA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=9.0.0'
+      typescript: '>=4.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
+  eslint-plugin-import-x@4.16.1:
+    resolution: {integrity: sha512-vPZZsiOKaBAIATpFE2uMI4w5IRwdv/FpQ+qZZMR4E+PeOcM4OeoEbqxRMnywdxP19TyB/3h6QBB0EWon7letSQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/utils': ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      eslint-import-resolver-node: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/utils':
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
 
-  supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
+  eslint-plugin-import@2.32.0:
+    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
 
-  tailwind-merge@3.0.2:
-    resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}
+  eslint-plugin-jsdoc@54.7.0:
+    resolution: {integrity: sha512-u5Na4he2+6kY1rWqxzbQaAwJL3/tDCuT5ElDRc5UJ9stOeQeQ5L1JJ1kRRu7ldYMlOHMCJLsY8Mg/Tu3ExdZiQ==}
+    engines: {node: '>=20.11.0'}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
 
-  tailwindcss-animate@1.0.7:
-    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+  eslint-plugin-regexp@2.10.0:
+    resolution: {integrity: sha512-ovzQT8ESVn5oOe5a7gIDPD5v9bCSjIFJu57sVPDqgPRXicQzOnYfFN21WoQBQF18vrhT5o7UMKFwJQVVjyJ0ng==}
+    engines: {node: ^18 || >=20}
     peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
+      eslint: '>=8.44.0'
 
-  tailwindcss@3.4.17:
-    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  eslint-plugin-unicorn@60.0.0:
+    resolution: {integrity: sha512-QUzTefvP8stfSXsqKQ+vBQSEsXIlAiCduS/V1Em+FKgL9c21U/IIm20/e3MFy1jyCf14tHAhqC1sX8OTy6VUCg==}
+    engines: {node: ^20.10.0 || >=21.0.0}
+    peerDependencies:
+      eslint: '>=9.29.0'
 
-  terser@5.39.0:
-    resolution: {integrity: sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==}
-    engines: {node: '>=10'}
-    hasBin: true
+  eslint-plugin-vue@10.3.0:
+    resolution: {integrity: sha512-A0u9snqjCfYaPnqqOaH6MBLVWDUIN4trXn8J3x67uDcXvR7X6Ut8p16N+nYhMCQ9Y7edg2BIRGzfyZsY0IdqoQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^7.0.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      vue-eslint-parser: ^10.0.0
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
 
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
+  eslint-plugin-vue@10.5.1:
+    resolution: {integrity: sha512-SbR9ZBUFKgvWAbq3RrdCtWaW0IKm6wwUiApxf3BVTNfqUIo4IQQmreMg2iHFJJ6C/0wss3LXURBJ1OwS/MhFcQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@stylistic/eslint-plugin': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
+      '@typescript-eslint/parser': ^7.0.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      vue-eslint-parser: ^10.0.0
+    peerDependenciesMeta:
+      '@stylistic/eslint-plugin':
+        optional: true
+      '@typescript-eslint/parser':
+        optional: true
 
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+  eslint-processor-vue-blocks@2.0.0:
+    resolution: {integrity: sha512-u4W0CJwGoWY3bjXAuFpc/b6eK3NQEI8MoeW7ritKj3G3z/WtHrKjkqf+wk8mPEy5rlMGS+k6AZYOw2XBoN/02Q==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.3.0
+      eslint: '>=9.0.0'
 
-  to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  ts-api-utils@2.1.0:
-    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
-    engines: {node: '>=18.12'}
+  eslint-typegen@2.3.0:
+    resolution: {integrity: sha512-azYgAvhlz1AyTpeLfVSKcrNJInuIsRrcUrOcHmEl8T9oMKesePVUPrF8gRgE6azV8CAlFzxJDTyaXAAbA/BYiA==}
     peerDependencies:
-      typescript: '>=4.8.4'
+      eslint: ^9.0.0
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  ts-node@10.9.2:
-    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.32.0:
+    resolution: {integrity: sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
-      '@swc/core': '>=1.2.50'
-      '@swc/wasm': '>=1.2.50'
-      '@types/node': '*'
-      typescript: '>=2.7'
+      jiti: '*'
     peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      '@swc/wasm':
+      jiti:
         optional: true
 
-  tsconfig-paths@3.15.0:
-    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
 
-  tsx@4.19.3:
-    resolution: {integrity: sha512-4H8vUNGNjQ4V2EOoGw005+c+dGuPSnhpPBPHBtsZdGZBk/iJb4kguGlPWaZTZ3q5nMtFOEsY0nRDlh9PJyd6SQ==}
-    engines: {node: '>=18.0.0'}
-    hasBin: true
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
 
-  type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
 
-  typed-array-buffer@1.0.3:
-    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
-    engines: {node: '>= 0.4'}
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
-  typed-array-byte-length@1.0.3:
-    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
-    engines: {node: '>= 0.4'}
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
-  typed-array-byte-offset@1.0.4:
-    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
-    engines: {node: '>= 0.4'}
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
 
-  typed-array-length@1.0.7:
-    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
-    engines: {node: '>= 0.4'}
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
 
-  typescript-eslint@8.38.0:
-    resolution: {integrity: sha512-FsZlrYK6bPDGoLeZRuvx2v6qrM03I0U0SnfCLPs/XCCPCFD80xU9Pg09H/K+XFa68uJuZo7l/Xhs+eDRg2l3hg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
+  ethereum-cryptography@2.2.1:
+    resolution: {integrity: sha512-r/W8lkHSiTLxUxW8Rf3u4HGB0xQweG2RyETjywylKZSzLWoWAijRz8WCuOtJ6wah+avllXBqZuk29HCCvhEIRg==}
 
-  typescript@5.7.3:
-    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
-    engines: {node: '>=14.17'}
-    hasBin: true
+  event-target-shim@5.0.1:
+    resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
+    engines: {node: '>=6'}
 
-  unbox-primitive@1.1.0:
-    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
-    engines: {node: '>= 0.4'}
+  events-universal@1.0.1:
+    resolution: {integrity: sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==}
 
-  undici-types@6.20.0:
-    resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
+  events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
 
-  update-browserslist-db@1.1.3:
-    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
-    hasBin: true
+  execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+
+  execa@9.6.0:
+    resolution: {integrity: sha512-jpWzZ1ZhwUmeWRhS7Qv3mhpOhLfwI+uAX4e5fOcXqwMR7EcJ0pj2kV1CVzHVMX/LphnKWD3LObjZCoJ71lKpHw==}
+    engines: {node: ^18.19.0 || >=20.5.0}
+
+  exsolve@1.0.7:
+    resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
+
+  extension-port-stream@3.0.0:
+    resolution: {integrity: sha512-an2S5quJMiy5bnZKEf6AkfH/7r8CzHvhchU40gxN+OM6HPhe7Z9T1FUychcf2M9PpPOO0Hf7BAEfJkw2TDIBDw==}
+    engines: {node: '>=12.0.0'}
+
+  extension-port-stream@4.2.0:
+    resolution: {integrity: sha512-i5IgiPVMVrHN+Zx8PRjvFsOw8L1A3sboVwPZghDjW9Yp1BMmBDE6mCcTNu4xMXPYduBOwI3CBK7wd72LcOyD6g==}
+    engines: {node: '>=12.0.0'}
     peerDependencies:
-      browserslist: '>= 4.21.0'
+      webextension-polyfill: ^0.10.0 || ^0.11.0 || ^0.12.0
 
-  uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+  fast-fifo@1.3.2:
+    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
 
-  uuid@9.0.1:
-    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
-    hasBin: true
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
 
-  v8-compile-cache-lib@3.0.1:
-    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
-  vite@6.2.0:
-    resolution: {integrity: sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
-    hasBin: true
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-npm-meta@0.4.7:
+    resolution: {integrity: sha512-aZU3i3eRcSb2NCq8i6N6IlyiTyF6vqAqzBGl2NBF6ngNx/GIqfYbkLDIKZ4z4P0o/RmtsFnVqHwdrSm13o4tnQ==}
+
+  fast-safe-stringify@2.1.1:
+    resolution: {integrity: sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==}
+
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
     peerDependencies:
-      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-      jiti: '>=1.21.0'
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      sass-embedded: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.16.0
-      tsx: ^4.8.1
-      yaml: ^2.4.2
+      picomatch: ^3 || ^4
     peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      jiti:
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      sass-embedded:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-      tsx:
-        optional: true
-      yaml:
+      picomatch:
         optional: true
 
-  vscode-uri@3.1.0:
-    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
 
-  vue-demi@0.14.10:
-    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
-    engines: {node: '>=12'}
-    hasBin: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
 
-  vue-eslint-parser@10.2.0:
-    resolution: {integrity: sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
+  file-uri-to-path@1.0.0:
+    resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
 
-  vue-router@4.5.0:
-    resolution: {integrity: sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==}
-    peerDependencies:
-      vue: ^3.2.0
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
 
-  vue-sonner@1.3.0:
-    resolution: {integrity: sha512-jAodBy4Mri8rQjVZGQAPs4ZYymc1ywPiwfa81qU0fFl+Suk7U8NaOxIDdI1oBGLeQJqRZi/oxNIuhCLqsBmOwg==}
+  find-up-simple@1.0.1:
+    resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
+    engines: {node: '>=18'}
 
-  vue-tsc@2.2.8:
-    resolution: {integrity: sha512-jBYKBNFADTN+L+MdesNX/TB3XuDSyaWynKMDgR+yCSln0GQ9Tfb7JS2lr46s2LiFUT1WsmfWsSvIElyxzOPqcQ==}
-    hasBin: true
-    peerDependencies:
-      typescript: '>=5.0.0'
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
 
-  vue@3.5.13:
-    resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
 
-  webextension-polyfill@0.10.0:
-    resolution: {integrity: sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g==}
+  find-up@7.0.0:
+    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
+    engines: {node: '>=18'}
 
-  webextension-polyfill@0.12.0:
-    resolution: {integrity: sha512-97TBmpoWJEE+3nFBQ4VocyCdLKfw54rFaJ6EVQYLBCXqCIpLSZkwGgASpv4oPt9gdKCJ80RJlcmNzNn008Ag6Q==}
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
 
-  which-boxed-primitive@1.1.1:
-    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
 
-  which-builtin-type@1.2.1:
-    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
+  fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+
+  fresh@0.5.2:
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
+    engines: {node: '>= 0.6'}
+
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
+  fs-extra@9.1.0:
+    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
+    engines: {node: '>=10'}
+
+  fs-minipass@2.1.0:
+    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
+    engines: {node: '>= 8'}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
     engines: {node: '>= 0.4'}
 
-  which-collection@1.0.2:
-    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+  functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+
+  fuse.js@7.1.0:
+    resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
+    engines: {node: '>=10'}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
-  which-module@2.0.1:
-    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+  get-port-please@3.2.0:
+    resolution: {integrity: sha512-I9QVvBw5U/hw3RmWpYKRumUeaDgxTPd401x364rLmWBJcOQ753eov1eTgzDqRG9bqFIfDc7gfzcQEWrUri3o1A==}
 
-  which-typed-array@1.1.19:
-    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
-  which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
+  get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
 
-  word-wrap@1.2.5:
-    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
-    engines: {node: '>=0.10.0'}
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
 
-  wrap-ansi@6.2.0:
-    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
-    engines: {node: '>=8'}
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
 
-  wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
+  get-tsconfig@4.13.0:
+    resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
 
-  wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
+  giget@1.2.5:
+    resolution: {integrity: sha512-r1ekGw/Bgpi3HLV3h1MRBIlSAdHoIMklpaQ3OQLFcRw9PwAj2rqigvIbg+dBUI51OxVI2jsEtDywDBjSiuf7Ug==}
+    hasBin: true
 
-  wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+  giget@2.0.0:
+    resolution: {integrity: sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==}
+    hasBin: true
 
-  xml-name-validator@4.0.0:
-    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
-    engines: {node: '>=12'}
+  git-up@8.1.1:
+    resolution: {integrity: sha512-FDenSF3fVqBYSaJoYy1KSc2wosx0gCvKP+c+PRBht7cAaiCeQlBtfBDX9vgnNOHmdePlSFITVcn4pFfcgNvx3g==}
 
-  y18n@4.0.3:
-    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+  git-url-parse@16.1.0:
+    resolution: {integrity: sha512-cPLz4HuK86wClEW7iDdeAKcCVlWXmrLpb2L+G9goW0Z1dtpNS6BXXSOckUTlJT/LDQViE1QZKstNORzHsLnobw==}
 
-  yaml@2.7.0:
-    resolution: {integrity: sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==}
-    engines: {node: '>= 14'}
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
 
-  yargs-parser@18.1.3:
-    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
-    engines: {node: '>=6'}
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
 
-  yargs@15.4.1:
-    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+  global-directory@4.0.1:
+    resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
+    engines: {node: '>=18'}
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@16.3.0:
+    resolution: {integrity: sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ==}
+    engines: {node: '>=18'}
+
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
+  globby@15.0.0:
+    resolution: {integrity: sha512-oB4vkQGqlMl682wL1IlWd02tXCbquGWM4voPEI85QmNKCaw8zGTm1f1rubFgkg3Eli2PtKlFgrnmUqasbQWlkw==}
+    engines: {node: '>=20'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+
+  gzip-size@7.0.0:
+    resolution: {integrity: sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  h3@1.15.4:
+    resolution: {integrity: sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ==}
+
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
-  yn@3.1.1:
-    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
-    engines: {node: '>=6'}
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
-  yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
 
-snapshots:
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
 
-  '@alloc/quick-lru@5.2.0': {}
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
 
-  '@babel/helper-string-parser@7.25.9': {}
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
 
-  '@babel/helper-validator-identifier@7.25.9': {}
+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
-  '@babel/parser@7.26.9':
-    dependencies:
-      '@babel/types': 7.26.9
+  http-assert@1.5.0:
+    resolution: {integrity: sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==}
+    engines: {node: '>= 0.8'}
+
+  http-errors@1.6.3:
+    resolution: {integrity: sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==}
+    engines: {node: '>= 0.6'}
+
+  http-errors@1.8.1:
+    resolution: {integrity: sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==}
+    engines: {node: '>= 0.6'}
+
+  http-errors@2.0.0:
+    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
+    engines: {node: '>= 0.8'}
+
+  http-shutdown@1.2.2:
+    resolution: {integrity: sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  httpxy@0.1.7:
+    resolution: {integrity: sha512-pXNx8gnANKAndgga5ahefxc++tJvNL87CXoRwxn1cJE2ZkWEojF3tNfQIEhZX/vfpt+wzeAzpUI4qkediX1MLQ==}
+
+  human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+
+  human-signals@8.0.1:
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  image-meta@0.2.2:
+    resolution: {integrity: sha512-3MOLanc3sb3LNGWQl1RlQlNWURE5g32aUphrDyFeCsxBTk08iE3VNe4CwsUZ0Qs1X+EfX0+r29Sxdpza4B+yRA==}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  impound@1.0.0:
+    resolution: {integrity: sha512-8lAJ+1Arw2sMaZ9HE2ZmL5zOcMnt18s6+7Xqgq2aUVy4P1nlzAyPtzCDxsk51KVFwHEEdc6OWvUyqwHwhRYaug==}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  indent-string@5.0.0:
+    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
+    engines: {node: '>=12'}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.3:
+    resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==}
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ini@4.1.1:
+    resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+
+  ioredis@5.8.2:
+    resolution: {integrity: sha512-C6uC+kleiIMmjViJINWk80sOQw5lEzse1ZmvD+S/s8p8CWapftSaC+kocGTx6xrbrJ4WmYQGC08ffHLr6ToR6Q==}
+    engines: {node: '>=12.22.0'}
+
+  iron-webcrypto@1.2.1:
+    resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
+
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+
+  is-builtin-module@5.0.0:
+    resolution: {integrity: sha512-f4RqJKBUe5rQkJ2eJEJBXSticB3hGbN9j0yxxMQFqIW89Jp9WYFtzfTcRlstDKVUTRzSOTLKRfO9vIztenwtxA==}
+    engines: {node: '>=18.20'}
+
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+
+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-generator-function@1.1.0:
+    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
+    engines: {node: '>= 0.4'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
+  is-installed-globally@1.0.0:
+    resolution: {integrity: sha512-K55T22lfpQ63N4KEN57jZUAaAYqYHEe8veb/TycJRk9DdSCLLcovXz/mL6mOnhQaZsQGwPhuFopdQIlqGSEjiQ==}
+    engines: {node: '>=18'}
+
+  is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+
+  is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-path-inside@4.0.0:
+    resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
+    engines: {node: '>=12'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-reference@1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+
+  is-ssh@1.4.1:
+    resolution: {integrity: sha512-JNeu1wQsHjyHgn9NcWTaXq6zWSR6hqE0++zhfZlkFBbScNkyvxCdeV8sRkSBaeLKxmbpR21brail63ACNxJ0Tg==}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
+
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
+  is-wayland@0.1.0:
+    resolution: {integrity: sha512-QkbMsWkIfkrzOPxenwye0h56iAXirZYHG9eHVPb22fO9y+wPbaX/CHacOWBa/I++4ohTcByimhM1/nyCsH8KNA==}
+    engines: {node: '>=20'}
+
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
+
+  is-what@4.1.16:
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}
+
+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+
+  is-wsl@3.1.0:
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
+
+  is64bit@2.0.0:
+    resolution: {integrity: sha512-jv+8jaWCl0g2lSBkNSVXdzfBA0npK1HGC2KtWM9FumFRoGS94g3NbCCLVnCYHLjp4GrW2KZeeSTMo5ddtznmGw==}
+    engines: {node: '>=18'}
+
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
+  isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  isexe@3.1.1:
+    resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
+    engines: {node: '>=16'}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+
+  jsdoc-type-pratt-parser@4.8.0:
+    resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==}
+    engines: {node: '>=12.0.0'}
+
+  jsdoc-type-pratt-parser@5.1.1:
+    resolution: {integrity: sha512-DYYlVP1fe4QBMh2xTIs20/YeTz2GYVbWAEZweHSZD+qQ/Cx2d5RShuhhsdk64eTjNq0FeVnteP/qVOgaywSRbg==}
+    engines: {node: '>=12.0.0'}
+
+  jsesc@3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-schema-to-typescript-lite@15.0.0:
+    resolution: {integrity: sha512-5mMORSQm9oTLyjM4mWnyNBi2T042Fhg1/0gCIB6X8U/LVpM2A+Nmj2yEyArqVouDmFThDxpEXcnTgSrjkGJRFA==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+
+  keygrip@1.1.0:
+    resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}
+    engines: {node: '>= 0.6'}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
+  klona@2.0.6:
+    resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
+    engines: {node: '>= 8'}
+
+  knitwork@1.2.0:
+    resolution: {integrity: sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==}
+
+  koa-compose@4.1.0:
+    resolution: {integrity: sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==}
+
+  koa-convert@2.0.0:
+    resolution: {integrity: sha512-asOvN6bFlSnxewce2e/DK3p4tltyfC4VM7ZwuTuepI7dEQVcvpyFuBcEARu1+Hxg8DIwytce2n7jrZtRlPrARA==}
+    engines: {node: '>= 10'}
+
+  koa-send@5.0.1:
+    resolution: {integrity: sha512-tmcyQ/wXXuxpDxyNXv5yNNkdAMdFRqwtegBXUaowiQzUKqJehttS0x2j0eOZDQAyloAth5w6wwBImnFzkUz3pQ==}
+    engines: {node: '>= 8'}
+
+  koa-static@5.0.0:
+    resolution: {integrity: sha512-UqyYyH5YEXaJrf9S8E23GoJFQZXkBVJ9zYYMPGz919MSX1KuvAcycIuS0ci150HCoPf4XQVhQ84Qf8xRPWxFaQ==}
+    engines: {node: '>= 7.6.0'}
+
+  koa@2.16.3:
+    resolution: {integrity: sha512-zPPuIt+ku1iCpFBRwseMcPYQ1cJL8l60rSmKeOuGfOXyE6YnTBmf2aEFNL2HQGrD0cPcLO/t+v9RTgC+fwEh/g==}
+    engines: {node: ^4.8.4 || ^6.10.1 || ^7.10.1 || >= 8.1.4}
+
+  launch-editor@2.12.0:
+    resolution: {integrity: sha512-giOHXoOtifjdHqUamwKq6c49GzBdLjvxrd2D+Q4V6uOHopJv7p9VJxikDsQ/CBXZbEITgUqSVHXLTG3VhPP1Dg==}
+
+  lazystream@1.0.1:
+    resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
+    engines: {node: '>= 0.6.3'}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  listhen@1.9.0:
+    resolution: {integrity: sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg==}
+    hasBin: true
+
+  load-tsconfig@0.2.5:
+    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  locate-path@7.2.0:
+    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  lodash.defaults@4.2.0:
+    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
+
+  lodash.isarguments@3.1.0:
+    resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
+
+  lodash.memoize@4.1.2:
+    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  long@5.3.2:
+    resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lucide-vue-next@0.477.0:
+    resolution: {integrity: sha512-C7azIKO7aJKf5MD7OIzV7NRDtnjXH3KSXfyJgGqRIMemuMzW/9esuMxDXIXDhBZcJgRtXMUN0FcJwOJZQ8SywA==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
+  magic-regexp@0.10.0:
+    resolution: {integrity: sha512-Uly1Bu4lO1hwHUW0CQeSWuRtzCMNO00CmXtS8N6fyvB3B979GOEEeAkiTUDsmbYLAbvpUS/Kt5c4ibosAzVyVg==}
+
+  magic-string-ast@1.0.3:
+    resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
+    engines: {node: '>=20.19.0'}
+
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  magicast@0.3.5:
+    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
+
+  make-error@1.3.6:
+    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
+  mdn-data@2.12.2:
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
+
+  media-typer@0.3.0:
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    engines: {node: '>= 0.6'}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  methods@1.1.2:
+    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
+    engines: {node: '>= 0.6'}
+
+  micro-ftch@0.3.1:
+    resolution: {integrity: sha512-/0LLxhzP0tfiR5hcQebtudP56gUurs2CLkGarnCiB/OqEyUFQ6U3paQi/tgLv0hBJYt2rnr9MNpxz4fiiugstg==}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.1:
+    resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
+    engines: {node: '>= 0.6'}
+
+  mime@3.0.0:
+    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+
+  mime@4.1.0:
+    resolution: {integrity: sha512-X5ju04+cAzsojXKes0B/S4tcYtFAJ6tTMuSPBEn9CPGlrWr8Fiw7qYeLT0XyH80HSoAoqWCaz+MWKh22P7G1cw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass@3.3.6:
+    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
+    engines: {node: '>=8'}
+
+  minipass@5.0.0:
+    resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
+    engines: {node: '>=8'}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minizlib@2.1.2:
+    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
+    engines: {node: '>= 8'}
+
+  minizlib@3.1.0:
+    resolution: {integrity: sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==}
+    engines: {node: '>= 18'}
+
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
+  mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  mlly@1.8.0:
+    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
+
+  mocked-exports@0.1.1:
+    resolution: {integrity: sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA==}
+
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  nanoid@5.1.6:
+    resolution: {integrity: sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
+  nanotar@0.2.0:
+    resolution: {integrity: sha512-9ca1h0Xjvo9bEkE4UOxgAzLV0jHKe6LMaxo37ND2DAhhAtd0j8pR1Wxz+/goMrZO8AEZTWCmyaOsFI/W5AdpCQ==}
+
+  napi-postinstall@0.3.4:
+    resolution: {integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  negotiator@0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+
+  nitropack@2.12.8:
+    resolution: {integrity: sha512-k4KT/6CMiX+aAI2LWEdVhvI4PPPWt6NTz70TcxrGUgvMpt8Pv4/iG0KTwBJ58KdwFp59p3Mlp8QyGVmIVP6GvQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      xml2js: ^0.6.2
+    peerDependenciesMeta:
+      xml2js:
+        optional: true
+
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
+  node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+
+  node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+
+  node-forge@1.3.1:
+    resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
+    engines: {node: '>= 6.13.0'}
+
+  node-gyp-build@4.8.4:
+    resolution: {integrity: sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==}
+    hasBin: true
+
+  node-mock-http@1.0.3:
+    resolution: {integrity: sha512-jN8dK25fsfnMrVsEhluUTPkBFY+6ybu7jSB1n+ri/vOGjJxU8J9CZhpSGkHXSkFjtUhbmoncG/YG9ta5Ludqog==}
+
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+
+  node-releases@2.0.26:
+    resolution: {integrity: sha512-S2M9YimhSjBSvYnlr5/+umAnPHE++ODwt5e2Ij6FoX45HA/s4vHdkDx1eax2pAPeAOqu4s9b7ppahsyEFdVqQA==}
+
+  nopt@8.1.0:
+    resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    hasBin: true
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
+  npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
+  nuxt@4.2.0:
+    resolution: {integrity: sha512-4qzf2Ymf07dMMj50TZdNZgMqCdzDch8NY3NO2ClucUaIvvsr6wd9+JrDpI1CckSTHwqU37/dIPFpvIQZoeHoYA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@parcel/watcher': ^2.1.0
+      '@types/node': '>=18.12.0'
+    peerDependenciesMeta:
+      '@parcel/watcher':
+        optional: true
+      '@types/node':
+        optional: true
+
+  nypm@0.5.4:
+    resolution: {integrity: sha512-X0SNNrZiGU8/e/zAB7sCTtdxWTMSIO73q+xuKgglm2Yvzwlo8UoC5FNySQFCvl84uPaeADkqHUZUkWy4aH4xOA==}
+    engines: {node: ^14.16.0 || >=16.10.0}
+    hasBin: true
+
+  nypm@0.6.2:
+    resolution: {integrity: sha512-7eM+hpOtrKrBDCh7Ypu2lJ9Z7PNZBdi/8AT3AX8xoCj43BBVHD0hPSTEvMtkMpfs8FCqBGhxB+uToIQimA111g==}
+    engines: {node: ^14.16.0 || >=16.10.0}
+    hasBin: true
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+
+  object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
+
+  object.groupby@1.0.3:
+    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+    engines: {node: '>= 0.4'}
+
+  object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+    engines: {node: '>= 0.4'}
+
+  ofetch@1.5.0:
+    resolution: {integrity: sha512-A7llJ7eZyziA5xq9//3ZurA8OhFqtS99K5/V1sLBJ5j137CM/OAjlbA/TEJXBuOWwOfLqih+oH5U3ran4za1FQ==}
+
+  ohash@1.1.6:
+    resolution: {integrity: sha512-TBu7PtV8YkAZn0tSxobKY2n2aAQva936lhRrj6957aDaCf9IEtqsKbgMzXE/F/sjqYOwmrukeORHNLe5glk7Cg==}
+
+  ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+
+  on-change@6.0.1:
+    resolution: {integrity: sha512-P7o0hkMahOhjb1niG28vLNAXsJrRcfpJvYWcTmPt/Tf4xedcF2PA1E9++N1tufY8/vIsaiJgHhjQp53hJCe+zw==}
+    engines: {node: '>=20'}
+
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+
+  only@0.0.2:
+    resolution: {integrity: sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ==}
+
+  open@10.2.0:
+    resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
+    engines: {node: '>=18'}
+
+  open@7.4.2:
+    resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==}
+    engines: {node: '>=8'}
+
+  open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
+  oxc-minify@0.95.0:
+    resolution: {integrity: sha512-3k//447vscNk5JZXVnr2qv0QONjUU7F8Y6ewAPFVQNgdvYh3gCLYCRjQ/DR5kVkqxFgVa8R/FFBV3X5jlztSzw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-parser@0.95.0:
+    resolution: {integrity: sha512-Te8fE/SmiiKWIrwBwxz5Dod87uYvsbcZ9JAL5ylPg1DevyKgTkxCXnPEaewk1Su2qpfNmry5RHoN+NywWFCG+A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-transform@0.95.0:
+    resolution: {integrity: sha512-SmS5aThb5K0SoUZgzGbikNBjrGHfOY4X5TEqBlaZb1uy5YgXbUSbpakpZJ13yW36LNqy8Im5+y+sIk5dlzpZ/w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-walker@0.5.2:
+    resolution: {integrity: sha512-XYoZqWwApSKUmSDEFeOKdy3Cdh95cOcSU8f7yskFWE4Rl3cfL5uwyY+EV7Brk9mdNLy+t5SseJajd6g7KncvlA==}
+    peerDependencies:
+      oxc-parser: '>=0.72.0'
+
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-limit@4.0.0:
+    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  p-locate@6.0.0:
+    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  package-manager-detector@1.5.0:
+    resolution: {integrity: sha512-uBj69dVlYe/+wxj8JOpr97XfsxH/eumMt6HqjNTmJDf/6NO9s+0uxeOneIz3AsPt2m6y9PqzDzd3ATcU17MNfw==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-imports-exports@0.2.4:
+    resolution: {integrity: sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==}
+
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
+  parse-path@7.1.0:
+    resolution: {integrity: sha512-EuCycjZtfPcjWk7KTksnJ5xPMvWGA/6i4zrLYhRG0hGvC3GPU/jGUj3Cy+ZR0v30duV3e23R95T1lE2+lsndSw==}
+
+  parse-statements@1.0.11:
+    resolution: {integrity: sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==}
+
+  parse-url@9.2.0:
+    resolution: {integrity: sha512-bCgsFI+GeGWPAvAiUv63ZorMeif3/U0zaXABGJbOWt5OH2KCaPHF6S+0ok4aqM9RuIPGyZdx9tR9l13PsW4AYQ==}
+    engines: {node: '>=14.13.0'}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-exists@5.0.0:
+    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
+
+  path-type@6.0.0:
+    resolution: {integrity: sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==}
+    engines: {node: '>=18'}
+
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
+  perfect-debounce@2.0.0:
+    resolution: {integrity: sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  pinia@3.0.3:
+    resolution: {integrity: sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==}
+    peerDependencies:
+      typescript: '>=4.4.4'
+      vue: ^2.7.0 || ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  pirates@4.0.6:
+    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
+    engines: {node: '>= 6'}
+
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+
+  pluralize@8.0.0:
+    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
+    engines: {node: '>=4'}
+
+  pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+
+  pony-cause@2.1.11:
+    resolution: {integrity: sha512-M7LhCsdNbNgiLYiP4WjsfLUuFmCfnjdF6jKe2R9NKl4WFN+HZPGHJZ9lnLP7f9ZnKe3U9nuWD0szirmj+migUg==}
+    engines: {node: '>=12.0.0'}
+
+  portfinder@1.0.38:
+    resolution: {integrity: sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==}
+    engines: {node: '>= 10.12'}
+
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+
+  postcss-calc@10.1.1:
+    resolution: {integrity: sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==}
+    engines: {node: ^18.12 || ^20.9 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.38
+
+  postcss-colormin@7.0.4:
+    resolution: {integrity: sha512-ziQuVzQZBROpKpfeDwmrG+Vvlr0YWmY/ZAk99XD+mGEBuEojoFekL41NCsdhyNUtZI7DPOoIWIR7vQQK9xwluw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-convert-values@7.0.7:
+    resolution: {integrity: sha512-HR9DZLN04Xbe6xugRH6lS4ZQH2zm/bFh/ZyRkpedZozhvh+awAfbA0P36InO4fZfDhvYfNJeNvlTf1sjwGbw/A==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-discard-comments@7.0.4:
+    resolution: {integrity: sha512-6tCUoql/ipWwKtVP/xYiFf1U9QgJ0PUvxN7pTcsQ8Ns3Fnwq1pU5D5s1MhT/XySeLq6GXNvn37U46Ded0TckWg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-discard-duplicates@7.0.2:
+    resolution: {integrity: sha512-eTonaQvPZ/3i1ASDHOKkYwAybiM45zFIc7KXils4mQmHLqIswXD9XNOKEVxtTFnsmwYzF66u4LMgSr0abDlh5w==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-discard-empty@7.0.1:
+    resolution: {integrity: sha512-cFrJKZvcg/uxB6Ijr4l6qmn3pXQBna9zyrPC+sK0zjbkDUZew+6xDltSF7OeB7rAtzaaMVYSdbod+sZOCWnMOg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-discard-overridden@7.0.1:
+    resolution: {integrity: sha512-7c3MMjjSZ/qYrx3uc1940GSOzN1Iqjtlqe8uoSg+qdVPYyRb0TILSqqmtlSFuE4mTDECwsm397Ya7iXGzfF7lg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.0.1:
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@4.0.2:
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+
+  postcss-merge-longhand@7.0.5:
+    resolution: {integrity: sha512-Kpu5v4Ys6QI59FxmxtNB/iHUVDn9Y9sYw66D6+SZoIk4QTz1prC4aYkhIESu+ieG1iylod1f8MILMs1Em3mmIw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-merge-rules@7.0.6:
+    resolution: {integrity: sha512-2jIPT4Tzs8K87tvgCpSukRQ2jjd+hH6Bb8rEEOUDmmhOeTcqDg5fEFK8uKIu+Pvc3//sm3Uu6FRqfyv7YF7+BQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-minify-font-values@7.0.1:
+    resolution: {integrity: sha512-2m1uiuJeTplll+tq4ENOQSzB8LRnSUChBv7oSyFLsJRtUgAAJGP6LLz0/8lkinTgxrmJSPOEhgY1bMXOQ4ZXhQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-minify-gradients@7.0.1:
+    resolution: {integrity: sha512-X9JjaysZJwlqNkJbUDgOclyG3jZEpAMOfof6PUZjPnPrePnPG62pS17CjdM32uT1Uq1jFvNSff9l7kNbmMSL2A==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-minify-params@7.0.4:
+    resolution: {integrity: sha512-3OqqUddfH8c2e7M35W6zIwv7jssM/3miF9cbCSb1iJiWvtguQjlxZGIHK9JRmc8XAKmE2PFGtHSM7g/VcW97sw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-minify-selectors@7.0.5:
+    resolution: {integrity: sha512-x2/IvofHcdIrAm9Q+p06ZD1h6FPcQ32WtCRVodJLDR+WMn8EVHI1kvLxZuGKz/9EY5nAmI6lIQIrpo4tBy5+ug==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-nesting@13.0.2:
+    resolution: {integrity: sha512-1YCI290TX+VP0U/K/aFxzHzQWHWURL+CtHMSbex1lCdpXD1SoR2sYuxDu5aNI9lPoXpKTCggFZiDJbwylU0LEQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-normalize-charset@7.0.1:
+    resolution: {integrity: sha512-sn413ofhSQHlZFae//m9FTOfkmiZ+YQXsbosqOWRiVQncU2BA3daX3n0VF3cG6rGLSFVc5Di/yns0dFfh8NFgQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-display-values@7.0.1:
+    resolution: {integrity: sha512-E5nnB26XjSYz/mGITm6JgiDpAbVuAkzXwLzRZtts19jHDUBFxZ0BkXAehy0uimrOjYJbocby4FVswA/5noOxrQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-positions@7.0.1:
+    resolution: {integrity: sha512-pB/SzrIP2l50ZIYu+yQZyMNmnAcwyYb9R1fVWPRxm4zcUFCY2ign7rcntGFuMXDdd9L2pPNUgoODDk91PzRZuQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-repeat-style@7.0.1:
+    resolution: {integrity: sha512-NsSQJ8zj8TIDiF0ig44Byo3Jk9e4gNt9x2VIlJudnQQ5DhWAHJPF4Tr1ITwyHio2BUi/I6Iv0HRO7beHYOloYQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-string@7.0.1:
+    resolution: {integrity: sha512-QByrI7hAhsoze992kpbMlJSbZ8FuCEc1OT9EFbZ6HldXNpsdpZr+YXC5di3UEv0+jeZlHbZcoCADgb7a+lPmmQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-timing-functions@7.0.1:
+    resolution: {integrity: sha512-bHifyuuSNdKKsnNJ0s8fmfLMlvsQwYVxIoUBnowIVl2ZAdrkYQNGVB4RxjfpvkMjipqvbz0u7feBZybkl/6NJg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-unicode@7.0.4:
+    resolution: {integrity: sha512-LvIURTi1sQoZqj8mEIE8R15yvM+OhbR1avynMtI9bUzj5gGKR/gfZFd8O7VMj0QgJaIFzxDwxGl/ASMYAkqO8g==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-url@7.0.1:
+    resolution: {integrity: sha512-sUcD2cWtyK1AOL/82Fwy1aIVm/wwj5SdZkgZ3QiUzSzQQofrbq15jWJ3BA7Z+yVRwamCjJgZJN0I9IS7c6tgeQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-whitespace@7.0.1:
+    resolution: {integrity: sha512-vsbgFHMFQrJBJKrUFJNZ2pgBeBkC2IvvoHjz1to0/0Xk7sII24T0qFOiJzG6Fu3zJoq/0yI4rKWi7WhApW+EFA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-ordered-values@7.0.2:
+    resolution: {integrity: sha512-AMJjt1ECBffF7CEON/Y0rekRLS6KsePU6PRP08UqYW4UGFRnTXNrByUzYK1h8AC7UWTZdQ9O3Oq9kFIhm0SFEw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-reduce-initial@7.0.4:
+    resolution: {integrity: sha512-rdIC9IlMBn7zJo6puim58Xd++0HdbvHeHaPgXsimMfG1ijC5A9ULvNLSE0rUKVJOvNMcwewW4Ga21ngyJjY/+Q==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-reduce-transforms@7.0.1:
+    resolution: {integrity: sha512-MhyEbfrm+Mlp/36hvZ9mT9DaO7dbncU0CvWI8V93LRkY6IYlu38OPg3FObnuKTUxJ4qA8HpurdQOo5CyqqO76g==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
+    engines: {node: '>=4'}
+
+  postcss-svgo@7.1.0:
+    resolution: {integrity: sha512-KnAlfmhtoLz6IuU3Sij2ycusNs4jPW+QoFE5kuuUOK8awR6tMxZQrs5Ey3BUz7nFCzT3eqyFgqkyrHiaU2xx3w==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >= 18}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-unique-selectors@7.0.4:
+    resolution: {integrity: sha512-pmlZjsmEAG7cHd7uK3ZiNSW6otSZ13RHuZ/4cDN/bVglS5EpF2r2oxY99SuOHa8m7AWoBCelTS3JPpzsIs8skQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.5.3:
+    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  pretty-bytes@7.1.0:
+    resolution: {integrity: sha512-nODzvTiYVRGRqAOvE84Vk5JDPyyxsVk0/fbA/bq7RqlnhksGpset09XTxbpvLTIjoaF7K8Z8DG8yHtKGTPSYRw==}
+    engines: {node: '>=20'}
+
+  pretty-ms@9.3.0:
+    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
+    engines: {node: '>=18'}
+
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
+  process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
+  protobufjs@7.2.5:
+    resolution: {integrity: sha512-gGXRSXvxQ7UiPgfw8gevrfRWcTlSbOFg+p/N+JVJEK5VhueL2miT6qTymqAmjr1Q5WbOCyJbyrk6JfWKwlFn6A==}
+    engines: {node: '>=12.0.0'}
+
+  protocols@2.0.2:
+    resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  radix3@1.1.2:
+    resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
+
+  randombytes@2.1.0:
+    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
+
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+
+  rc9@2.1.2:
+    resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
+
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  readable-stream@4.7.0:
+    resolution: {integrity: sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  readdir-glob@1.1.3:
+    resolution: {integrity: sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  redis-errors@1.2.0:
+    resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
+    engines: {node: '>=4'}
+
+  redis-parser@3.0.0:
+    resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
+    engines: {node: '>=4'}
+
+  refa@0.12.1:
+    resolution: {integrity: sha512-J8rn6v4DBb2nnFqkqwy6/NnTYMcgLA+sLr0iIO41qpv0n+ngb7ksag2tMRl0inb1bbO/esUwzW1vbJi7K0sI0g==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
+
+  regexp-ast-analysis@0.7.1:
+    resolution: {integrity: sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  regexp-tree@0.1.27:
+    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
+    hasBin: true
+
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
+
+  regjsparser@0.12.0:
+    resolution: {integrity: sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==}
+    hasBin: true
+
+  reka-ui@2.0.2:
+    resolution: {integrity: sha512-pC2UF6Z+kJF96aJvIErhkSO4DJYIeq9pgvh3pntNqcZb3zFGMzw8h2uny+GnLX2CKiQV54kZNYXxecYIiPMGyg==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
+  replace-in-file@6.3.5:
+    resolution: {integrity: sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-main-filename@2.0.0:
+    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
+  resolve-path@1.4.0:
+    resolution: {integrity: sha512-i1xevIst/Qa+nA9olDxLWnLk8YZbi8R/7JPbCMcgyWaFR6bKWaexgJgEB5oc2PKMjYdrHynyz0NY+if+H98t1w==}
+    engines: {node: '>= 0.8'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  rollup-plugin-visualizer@6.0.5:
+    resolution: {integrity: sha512-9+HlNgKCVbJDs8tVtjQ43US12eqaiHyyiLMdBwQ7vSZPiHMysGNo2E88TAp1si5wx8NAoYriI2A5kuKfIakmJg==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      rolldown: 1.x || ^1.0.0-beta
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+
+  rollup@4.34.9:
+    resolution: {integrity: sha512-nF5XYqWWp9hx/LrpC8sZvvvmq0TeTjQgaZHYmAgwysT9nh8sWnZhBnM8ZyVbbJFIQBLwHDNoMqsBZBbUo4U8sQ==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  rollup@4.52.5:
+    resolution: {integrity: sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
+  sax@1.4.1:
+    resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
+
+  scslre@0.3.0:
+    resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
+    engines: {node: ^14.0.0 || >=16.0.0}
+
+  scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.7.1:
+    resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  send@1.2.0:
+    resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
+    engines: {node: '>= 18'}
+
+  serialize-javascript@6.0.2:
+    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
+
+  seroval@1.3.2:
+    resolution: {integrity: sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==}
+    engines: {node: '>=10'}
+
+  serve-placeholder@2.0.2:
+    resolution: {integrity: sha512-/TMG8SboeiQbZJWRlfTCqMs2DD3SZgWp0kDQePz9yUuCnDfDh/92gf7/PxGhzXTKBIPASIHxFcZndoNbp6QOLQ==}
+
+  serve-static@2.2.0:
+    resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
+    engines: {node: '>= 18'}
+
+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
+  setprototypeof@1.1.0:
+    resolution: {integrity: sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  shell-quote@1.8.3:
+    resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  simple-git@3.28.0:
+    resolution: {integrity: sha512-Rs/vQRwsn1ILH1oBUy8NucJlXmnnLeLCfcvbSehkPzbv3wwoFWIdtfd6Ndo6ZPhlPsCZ60CPI4rxurnwAa+a2w==}
+
+  sirv@3.0.2:
+    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
+    engines: {node: '>=18'}
+
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
+  slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
+
+  smob@1.5.0:
+    resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
+  spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
+
+  spdx-expression-parse@4.0.0:
+    resolution: {integrity: sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==}
+
+  spdx-license-ids@3.0.22:
+    resolution: {integrity: sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==}
+
+  speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+
+  srvx@0.8.16:
+    resolution: {integrity: sha512-hmcGW4CgroeSmzgF1Ihwgl+Ths0JqAJ7HwjP2X7e3JzY7u4IydLMcdnlqGQiQGUswz+PO9oh/KtCpOISIvs9QQ==}
+    engines: {node: '>=20.16.0'}
+    hasBin: true
+
+  stable-hash-x@0.2.0:
+    resolution: {integrity: sha512-o3yWv49B/o4QZk5ZcsALc6t0+eCelPc44zZsLtCQnZPDwFpDYSWcDnrv2TtMmMbQ7uKo3J0HTURCqckw23czNQ==}
+    engines: {node: '>=12.0.0'}
+
+  standard-as-callback@2.1.0:
+    resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
+
+  statuses@1.5.0:
+    resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
+    engines: {node: '>= 0.6'}
+
+  statuses@2.0.1:
+    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
+    engines: {node: '>= 0.8'}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+
+  streamx@2.23.0:
+    resolution: {integrity: sha512-kn+e44esVfn2Fa/O0CPFcex27fjIL6MkVae0Mm6q+E6f0hWv578YCERbv+4m02cjxvDsPKLnmxral/rR6lBMAg==}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
+  strip-indent@4.1.1:
+    resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
+    engines: {node: '>=12'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  strip-literal@3.1.0:
+    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
+
+  structured-clone-es@1.0.0:
+    resolution: {integrity: sha512-FL8EeKFFyNQv5cMnXI31CIMCsFarSVI2bF0U0ImeNE3g/F1IvJQyqzOXxPBRXiwQfyBTlbNe88jh1jFW0O/jiQ==}
+
+  stylehacks@7.0.6:
+    resolution: {integrity: sha512-iitguKivmsueOmTO0wmxURXBP8uqOO+zikLGZ7Mm9e/94R4w5T999Js2taS/KBOnQ/wdC3jN3vNSrkGDrlnqQg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  superjson@2.2.2:
+    resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
+    engines: {node: '>=16'}
+
+  supports-color@10.2.2:
+    resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
+    engines: {node: '>=18'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  svgo@4.0.0:
+    resolution: {integrity: sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  system-architecture@0.1.0:
+    resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
+    engines: {node: '>=18'}
+
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
+  tailwind-config-viewer@2.0.4:
+    resolution: {integrity: sha512-icvcmdMmt9dphvas8wL40qttrHwAnW3QEN4ExJ2zICjwRsPj7gowd1cOceaWG3IfTuM/cTNGQcx+bsjMtmV+cw==}
+    engines: {node: '>=13'}
+    hasBin: true
+    peerDependencies:
+      tailwindcss: 1 || 2 || 2.0.1-compat || 3
+
+  tailwind-merge@3.0.2:
+    resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
+  tailwindcss@3.4.17:
+    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  tar-stream@3.1.7:
+    resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
+
+  tar@6.2.1:
+    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
+    engines: {node: '>=10'}
+
+  tar@7.5.1:
+    resolution: {integrity: sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==}
+    engines: {node: '>=18'}
+
+  terser@5.39.0:
+    resolution: {integrity: sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  text-decoder@1.2.3:
+    resolution: {integrity: sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==}
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
+  tinyexec@1.0.1:
+    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
+  tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+
+  ts-api-utils@2.1.0:
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  ts-node@10.9.2:
+    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+
+  tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tsscmp@1.0.6:
+    resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==}
+    engines: {node: '>=0.6.x'}
+
+  tsx@4.19.3:
+    resolution: {integrity: sha512-4H8vUNGNjQ4V2EOoGw005+c+dGuPSnhpPBPHBtsZdGZBk/iJb4kguGlPWaZTZ3q5nMtFOEsY0nRDlh9PJyd6SQ==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@5.1.0:
+    resolution: {integrity: sha512-wQ531tuWvB6oK+pchHIu5lHe5f5wpSCqB8Kf4dWQRbOYc9HTge7JL0G4Qd44bh6QuJCccIzL3bugb8GI0MwHrg==}
+    engines: {node: '>=20'}
+
+  type-is@1.6.18:
+    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
+    engines: {node: '>= 0.6'}
+
+  type-level-regexp@0.1.17:
+    resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
+
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+
+  typescript-eslint@8.38.0:
+    resolution: {integrity: sha512-FsZlrYK6bPDGoLeZRuvx2v6qrM03I0U0SnfCLPs/XCCPCFD80xU9Pg09H/K+XFa68uJuZo7l/Xhs+eDRg2l3hg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
+  typescript@5.7.3:
+    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.6.1:
+    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
+
+  ultrahtml@1.6.0:
+    resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==}
+
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
+  uncrypto@0.1.3:
+    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
+
+  unctx@2.4.1:
+    resolution: {integrity: sha512-AbaYw0Nm4mK4qjhns67C+kgxR2YWiwlDBPzxrN8h8C6VtAdCgditAY5Dezu3IJy4XVqAnbrXt9oQJvsn3fyozg==}
+
+  undici-types@6.20.0:
+    resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
+
+  undici@7.16.0:
+    resolution: {integrity: sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==}
+    engines: {node: '>=20.18.1'}
+
+  unenv@2.0.0-rc.21:
+    resolution: {integrity: sha512-Wj7/AMtE9MRnAXa6Su3Lk0LNCfqDYgfwVjwRFVum9U7wsto1imuHqk4kTm7Jni+5A0Hn7dttL6O/zjvUvoo+8A==}
+
+  unenv@2.0.0-rc.23:
+    resolution: {integrity: sha512-NeOb/HbW2OwOzYaV21MewVQYfzlSwG0kVUB74RyV0gEIP44M5DsYTK9e7jDcekB/3YU+pfNWniZj+r4M/aejyQ==}
+
+  unhead@2.0.19:
+    resolution: {integrity: sha512-gEEjkV11Aj+rBnY6wnRfsFtF2RxKOLaPN4i+Gx3UhBxnszvV6ApSNZbGk7WKyy/lErQ6ekPN63qdFL7sa1leow==}
+
+  unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
+
+  unicorn-magic@0.3.0:
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
+
+  unimport@5.5.0:
+    resolution: {integrity: sha512-/JpWMG9s1nBSlXJAQ8EREFTFy3oy6USFd8T6AoBaw1q2GGcF4R9yp3ofg32UODZlYEO5VD0EWE1RpI9XDWyPYg==}
+    engines: {node: '>=18.12.0'}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unplugin-utils@0.2.5:
+    resolution: {integrity: sha512-gwXJnPRewT4rT7sBi/IvxKTjsms7jX7QIDLOClApuZwR49SXbrB1z2NLUZ+vDHyqCj/n58OzRRqaW+B8OZi8vg==}
+    engines: {node: '>=18.12.0'}
+
+  unplugin-utils@0.3.1:
+    resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
+    engines: {node: '>=20.19.0'}
+
+  unplugin-vue-router@0.16.0:
+    resolution: {integrity: sha512-yFmUQoN07KABkbxMSaNvfjnflwSi3nkSVKi7v6FTwXlzXyRDSx63vQ8Se4ho0T9Ao9I8U5FJB12fzmrGxFB0CA==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.5.17
+      vue-router: ^4.6.0
+    peerDependenciesMeta:
+      vue-router:
+        optional: true
+
+  unplugin@2.3.10:
+    resolution: {integrity: sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==}
+    engines: {node: '>=18.12.0'}
+
+  unrs-resolver@1.11.1:
+    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+
+  unstorage@1.17.1:
+    resolution: {integrity: sha512-KKGwRTT0iVBCErKemkJCLs7JdxNVfqTPc/85ae1XES0+bsHbc/sFBfVi5kJp156cc51BHinIH2l3k0EZ24vOBQ==}
+    peerDependencies:
+      '@azure/app-configuration': ^1.8.0
+      '@azure/cosmos': ^4.2.0
+      '@azure/data-tables': ^13.3.0
+      '@azure/identity': ^4.6.0
+      '@azure/keyvault-secrets': ^4.9.0
+      '@azure/storage-blob': ^12.26.0
+      '@capacitor/preferences': ^6.0.3 || ^7.0.0
+      '@deno/kv': '>=0.9.0'
+      '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0
+      '@planetscale/database': ^1.19.0
+      '@upstash/redis': ^1.34.3
+      '@vercel/blob': '>=0.27.1'
+      '@vercel/functions': ^2.2.12 || ^3.0.0
+      '@vercel/kv': ^1.0.1
+      aws4fetch: ^1.0.20
+      db0: '>=0.2.1'
+      idb-keyval: ^6.2.1
+      ioredis: ^5.4.2
+      uploadthing: ^7.4.4
+    peerDependenciesMeta:
+      '@azure/app-configuration':
+        optional: true
+      '@azure/cosmos':
+        optional: true
+      '@azure/data-tables':
+        optional: true
+      '@azure/identity':
+        optional: true
+      '@azure/keyvault-secrets':
+        optional: true
+      '@azure/storage-blob':
+        optional: true
+      '@capacitor/preferences':
+        optional: true
+      '@deno/kv':
+        optional: true
+      '@netlify/blobs':
+        optional: true
+      '@planetscale/database':
+        optional: true
+      '@upstash/redis':
+        optional: true
+      '@vercel/blob':
+        optional: true
+      '@vercel/functions':
+        optional: true
+      '@vercel/kv':
+        optional: true
+      aws4fetch:
+        optional: true
+      db0:
+        optional: true
+      idb-keyval:
+        optional: true
+      ioredis:
+        optional: true
+      uploadthing:
+        optional: true
+
+  untun@0.1.3:
+    resolution: {integrity: sha512-4luGP9LMYszMRZwsvyUd9MrxgEGZdZuZgpVQHEEX0lCYFESasVRvZd0EYpCkOIbJKHMuv0LskpXc/8Un+MJzEQ==}
+    hasBin: true
+
+  untyped@2.0.0:
+    resolution: {integrity: sha512-nwNCjxJTjNuLCgFr42fEak5OcLuB3ecca+9ksPFNvtfYSLpjf+iJqSIaSnIile6ZPbKYxI5k2AfXqeopGudK/g==}
+    hasBin: true
+
+  unwasm@0.3.11:
+    resolution: {integrity: sha512-Vhp5gb1tusSQw5of/g3Q697srYgMXvwMgXMjcG4ZNga02fDX9coxJ9fAb0Ci38hM2Hv/U1FXRPGgjP2BYqhNoQ==}
+
+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  update-browserslist-db@1.1.4:
+    resolution: {integrity: sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uqr@0.1.2:
+    resolution: {integrity: sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==}
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  uuid@9.0.1:
+    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    hasBin: true
+
+  v8-compile-cache-lib@3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  vite-dev-rpc@1.1.0:
+    resolution: {integrity: sha512-pKXZlgoXGoE8sEKiKJSng4hI1sQ4wi5YT24FCrwrLt6opmkjlqPPVmiPWWJn8M8byMxRGzp1CrFuqQs4M/Z39A==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0
+
+  vite-hot-client@2.1.0:
+    resolution: {integrity: sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==}
+    peerDependencies:
+      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
+
+  vite-node@3.2.4:
+    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+
+  vite-plugin-checker@0.11.0:
+    resolution: {integrity: sha512-iUdO9Pl9UIBRPAragwi3as/BXXTtRu4G12L3CMrjx+WVTd9g/MsqNakreib9M/2YRVkhZYiTEwdH2j4Dm0w7lw==}
+    engines: {node: '>=16.11'}
+    peerDependencies:
+      '@biomejs/biome': '>=1.7'
+      eslint: '>=7'
+      meow: ^13.2.0
+      optionator: ^0.9.4
+      oxlint: '>=1'
+      stylelint: '>=16'
+      typescript: '*'
+      vite: '>=5.4.20'
+      vls: '*'
+      vti: '*'
+      vue-tsc: ~2.2.10 || ^3.0.0
+    peerDependenciesMeta:
+      '@biomejs/biome':
+        optional: true
+      eslint:
+        optional: true
+      meow:
+        optional: true
+      optionator:
+        optional: true
+      oxlint:
+        optional: true
+      stylelint:
+        optional: true
+      typescript:
+        optional: true
+      vls:
+        optional: true
+      vti:
+        optional: true
+      vue-tsc:
+        optional: true
+
+  vite-plugin-eslint2@5.0.4:
+    resolution: {integrity: sha512-3Yc7K2R/RrONB9JtwEh2Y40YP3tQi/3UiNHrwcYDsDBKDKnEu7B8PwmXLm7piDFRbxcnTPvgrV2LZnBpKP8JUw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/eslint': ^7.0.0 || ^8.0.0 || ^9.0.0
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
+      rollup: ^2.0.0 || ^3.0.0 || ^4.0.0
+      vite: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      rollup:
+        optional: true
+
+  vite-plugin-inspect@11.3.3:
+    resolution: {integrity: sha512-u2eV5La99oHoYPHE6UvbwgEqKKOQGz86wMg40CCosP6q8BkB6e5xPneZfYagK4ojPJSj5anHCrnvC20DpwVdRA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': '*'
+      vite: ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+
+  vite-plugin-vue-tracer@1.0.1:
+    resolution: {integrity: sha512-L5/vAhT6oYbH4RSQYGLN9VfHexWe7SGzca1pJ7oPkL6KtxWA1jbGeb3Ri1JptKzqtd42HinOq4uEYqzhVWrzig==}
+    peerDependencies:
+      vite: ^6.0.0 || ^7.0.0
+      vue: ^3.5.0
+
+  vite@6.2.0:
+    resolution: {integrity: sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vite@7.1.12:
+    resolution: {integrity: sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  vue-bundle-renderer@2.2.0:
+    resolution: {integrity: sha512-sz/0WEdYH1KfaOm0XaBmRZOWgYTEvUDt6yPYaUzl4E52qzgWLlknaPPTTZmp6benaPTlQAI/hN1x3tAzZygycg==}
+
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  vue-devtools-stub@0.1.0:
+    resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
+
+  vue-eslint-parser@10.2.0:
+    resolution: {integrity: sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+
+  vue-router@4.5.0:
+    resolution: {integrity: sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  vue-router@4.6.3:
+    resolution: {integrity: sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  vue-sonner@1.3.0:
+    resolution: {integrity: sha512-jAodBy4Mri8rQjVZGQAPs4ZYymc1ywPiwfa81qU0fFl+Suk7U8NaOxIDdI1oBGLeQJqRZi/oxNIuhCLqsBmOwg==}
+
+  vue-tsc@3.1.2:
+    resolution: {integrity: sha512-3fd4DY0rFczs5f+VB3OhcLU83V6+3Puj2yLBe0Ak65k7ERk+STVNKaOAi0EBo6Lc15UiJB6LzU6Mxy4+h/pKew==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue@3.5.13:
+    resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  vue@3.5.22:
+    resolution: {integrity: sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  webextension-polyfill@0.10.0:
+    resolution: {integrity: sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g==}
+
+  webextension-polyfill@0.12.0:
+    resolution: {integrity: sha512-97TBmpoWJEE+3nFBQ4VocyCdLKfw54rFaJ6EVQYLBCXqCIpLSZkwGgASpv4oPt9gdKCJ80RJlcmNzNn008Ag6Q==}
+
+  webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
+  whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+
+  which-module@2.0.1:
+    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+    engines: {node: '>= 0.4'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  which@5.0.0:
+    resolution: {integrity: sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  ws@8.18.3:
+    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  wsl-utils@0.1.0:
+    resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
+    engines: {node: '>=18'}
+
+  xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+
+  y18n@4.0.3:
+    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
+  yaml@2.7.0:
+    resolution: {integrity: sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
+  yaml@2.8.1:
+    resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+  yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  ylru@1.4.0:
+    resolution: {integrity: sha512-2OQsPNEmBCvXuFlIni/a+Rn+R2pHW9INm0BxXJ4hVDA8TirqMj+J/Rp9ItLatT/5pZqWwefVrTQcHpixsxnVlA==}
+    engines: {node: '>= 4.0.0'}
+
+  yn@3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  yocto-queue@1.2.1:
+    resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
+    engines: {node: '>=12.20'}
+
+  yoctocolors@2.1.2:
+    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+    engines: {node: '>=18'}
+
+  youch-core@0.3.3:
+    resolution: {integrity: sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA==}
+
+  youch@4.1.0-beta.11:
+    resolution: {integrity: sha512-sQi6PERyO/mT8w564ojOVeAlYTtVQmC2GaktQAf+IdI75/GKIggosBuvyVXvEV+FATAT6RbLdIjFoiIId4ozoQ==}
+
+  zip-stream@6.0.1:
+    resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
+    engines: {node: '>= 14'}
+
+snapshots:
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@antfu/install-pkg@1.1.0':
+    dependencies:
+      package-manager-detector: 1.5.0
+      tinyexec: 1.0.1
+
+  '@apidevtools/json-schema-ref-parser@14.2.1(@types/json-schema@7.0.15)':
+    dependencies:
+      '@types/json-schema': 7.0.15
+      js-yaml: 4.1.0
+
+  '@babel/code-frame@7.27.1':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.28.5': {}
+
+  '@babel/core@7.28.5':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helpers': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.28.5':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    dependencies:
+      '@babel/types': 7.28.5
+
+  '@babel/helper-compilation-targets@7.27.2':
+    dependencies:
+      '@babel/compat-data': 7.28.5
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.24.4
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.28.5
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    dependencies:
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.27.1':
+    dependencies:
+      '@babel/types': 7.28.5
+
+  '@babel/helper-plugin-utils@7.27.1': {}
+
+  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.25.9': {}
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.25.9': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.28.4':
+    dependencies:
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.5
+
+  '@babel/parser@7.26.9':
+    dependencies:
+      '@babel/types': 7.26.9
+
+  '@babel/parser@7.28.5':
+    dependencies:
+      '@babel/types': 7.28.5
+
+  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-typescript@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/template@7.27.2':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+
+  '@babel/traverse@7.28.5':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.5
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.28.5
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.5
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.26.9':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
+  '@babel/types@7.28.5':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@clack/core@0.5.0':
+    dependencies:
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+
+  '@clack/prompts@0.11.0':
+    dependencies:
+      '@clack/core': 0.5.0
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+
+  '@cloudflare/kv-asset-handler@0.4.0':
+    dependencies:
+      mime: 3.0.0
+
+  '@cspotcode/source-map-support@0.8.1':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+    optional: true
+
+  '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.0)':
+    dependencies:
+      postcss-selector-parser: 7.1.0
+
+  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.0)':
+    dependencies:
+      postcss-selector-parser: 7.1.0
+
+  '@dxup/nuxt@0.2.0(magicast@0.3.5)':
+    dependencies:
+      '@dxup/unimport': 0.1.0
+      '@nuxt/kit': 4.2.0(magicast@0.3.5)
+      chokidar: 4.0.3
+      pathe: 2.0.3
+      tinyglobby: 0.2.15
+    transitivePeerDependencies:
+      - magicast
+
+  '@dxup/unimport@0.1.0': {}
+
+  '@emnapi/core@1.6.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.1.0
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.6.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.1.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@es-joy/jsdoccomment@0.56.0':
+    dependencies:
+      '@types/estree': 1.0.8
+      '@typescript-eslint/types': 8.46.2
+      comment-parser: 1.4.1
+      esquery: 1.6.0
+      jsdoc-type-pratt-parser: 5.1.1
+
+  '@esbuild/aix-ppc64@0.25.0':
+    optional: true
+
+  '@esbuild/aix-ppc64@0.25.11':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.0':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.11':
+    optional: true
+
+  '@esbuild/android-arm@0.25.0':
+    optional: true
+
+  '@esbuild/android-arm@0.25.11':
+    optional: true
+
+  '@esbuild/android-x64@0.25.0':
+    optional: true
+
+  '@esbuild/android-x64@0.25.11':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.0':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.11':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.0':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.11':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.0':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.11':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.0':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.11':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.0':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.11':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.0':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.11':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.0':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.11':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.0':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.11':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.0':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.11':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.0':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.11':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.0':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.11':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.0':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.11':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.0':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.11':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.0':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.11':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.0':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.11':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.0':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.11':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.0':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.11':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.25.11':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.0':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.11':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.0':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.11':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.0':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.11':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.0':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.11':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.7.0(eslint@9.32.0(jiti@2.6.1))':
+    dependencies:
+      eslint: 9.32.0(jiti@2.6.1)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.32.0(jiti@2.6.1))':
+    dependencies:
+      eslint: 9.32.0(jiti@2.6.1)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/compat@1.3.1(eslint@9.32.0(jiti@2.6.1))':
+    optionalDependencies:
+      eslint: 9.32.0(jiti@2.6.1)
+
+  '@eslint/config-array@0.21.0':
+    dependencies:
+      '@eslint/object-schema': 2.1.6
+      debug: 4.4.0
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.3.0': {}
+
+  '@eslint/config-inspector@1.3.0(eslint@9.32.0(jiti@2.6.1))':
+    dependencies:
+      '@nodelib/fs.walk': 3.0.1
+      ansis: 4.2.0
+      bundle-require: 5.1.0(esbuild@0.25.11)
+      cac: 6.7.14
+      chokidar: 4.0.3
+      debug: 4.4.3
+      esbuild: 0.25.11
+      eslint: 9.32.0(jiti@2.6.1)
+      find-up: 7.0.0
+      get-port-please: 3.2.0
+      h3: 1.15.4
+      mlly: 1.8.0
+      mrmime: 2.0.1
+      open: 10.2.0
+      tinyglobby: 0.2.15
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  '@eslint/core@0.15.1':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.1':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.0
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.32.0': {}
+
+  '@eslint/js@9.38.0': {}
+
+  '@eslint/object-schema@2.1.6': {}
+
+  '@eslint/plugin-kit@0.3.4':
+    dependencies:
+      '@eslint/core': 0.15.1
+      levn: 0.4.1
+
+  '@ethereumjs/common@3.2.0':
+    dependencies:
+      '@ethereumjs/util': 8.1.0
+      crc-32: 1.2.2
+
+  '@ethereumjs/rlp@4.0.1': {}
+
+  '@ethereumjs/tx@4.2.0':
+    dependencies:
+      '@ethereumjs/common': 3.2.0
+      '@ethereumjs/rlp': 4.0.1
+      '@ethereumjs/util': 8.1.0
+      ethereum-cryptography: 2.2.1
+
+  '@ethereumjs/util@8.1.0':
+    dependencies:
+      '@ethereumjs/rlp': 4.0.1
+      ethereum-cryptography: 2.2.1
+      micro-ftch: 0.3.1
+
+  '@floating-ui/core@1.6.9':
+    dependencies:
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/dom@1.6.13':
+    dependencies:
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/utils@0.2.9': {}
+
+  '@floating-ui/vue@1.1.6(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@floating-ui/dom': 1.6.13
+      '@floating-ui/utils': 0.2.9
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@hiveio/beekeeper@1.28.0': {}
+
+  '@hiveio/wax-signers-keychain@1.27.12-rc2-251027102101':
+    dependencies:
+      '@hiveio/wax': 1.27.12-rc2-251027102101
+
+  '@hiveio/wax-signers-metamask@1.27.12-rc2-251027102101(webextension-polyfill@0.12.0)':
+    dependencies:
+      '@hiveio/wax': 1.27.12-rc2-251027102101
+      '@metamask/providers': 21.0.0(webextension-polyfill@0.12.0)
+    transitivePeerDependencies:
+      - supports-color
+      - webextension-polyfill
+
+  '@hiveio/wax-signers-peakvault@1.27.12-rc2-251027102101':
+    dependencies:
+      '@hiveio/wax': 1.27.12-rc2-251027102101
+
+  '@hiveio/wax@1.27.12-rc2-251027102101':
+    dependencies:
+      events: 3.3.0
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.6':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.3.1
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.3.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@internationalized/date@3.7.0':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
+  '@internationalized/number@3.6.0':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
+  '@ioredis/commands@1.4.0': {}
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.2
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/gen-mapping@0.3.8':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/source-map@0.3.6':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@jridgewell/trace-mapping@0.3.9':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+    optional: true
+
+  '@koa/router@12.0.2':
+    dependencies:
+      debug: 4.4.3
+      http-errors: 2.0.0
+      koa-compose: 4.1.0
+      methods: 1.1.2
+      path-to-regexp: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@kwsites/file-exists@1.1.1':
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@kwsites/promise-deferred@1.1.1': {}
+
+  '@mapbox/node-pre-gyp@2.0.0':
+    dependencies:
+      consola: 3.4.2
+      detect-libc: 2.1.2
+      https-proxy-agent: 7.0.6
+      node-fetch: 2.7.0
+      nopt: 8.1.0
+      semver: 7.7.3
+      tar: 7.5.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  '@mdi/js@7.4.47': {}
+
+  '@metamask/json-rpc-engine@10.0.3':
+    dependencies:
+      '@metamask/rpc-errors': 7.0.2
+      '@metamask/safe-event-emitter': 3.1.2
+      '@metamask/utils': 11.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@metamask/json-rpc-engine@8.0.2':
+    dependencies:
+      '@metamask/rpc-errors': 6.4.0
+      '@metamask/safe-event-emitter': 3.1.2
+      '@metamask/utils': 8.5.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@metamask/json-rpc-middleware-stream@7.0.2':
+    dependencies:
+      '@metamask/json-rpc-engine': 8.0.2
+      '@metamask/safe-event-emitter': 3.1.2
+      '@metamask/utils': 8.5.0
+      readable-stream: 3.6.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@metamask/json-rpc-middleware-stream@8.0.7':
+    dependencies:
+      '@metamask/json-rpc-engine': 10.0.3
+      '@metamask/safe-event-emitter': 3.1.2
+      '@metamask/utils': 11.3.0
+      readable-stream: 3.6.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@metamask/object-multiplex@2.1.0':
+    dependencies:
+      once: 1.4.0
+      readable-stream: 3.6.2
+
+  '@metamask/providers@16.1.0':
+    dependencies:
+      '@metamask/json-rpc-engine': 8.0.2
+      '@metamask/json-rpc-middleware-stream': 7.0.2
+      '@metamask/object-multiplex': 2.1.0
+      '@metamask/rpc-errors': 6.4.0
+      '@metamask/safe-event-emitter': 3.1.2
+      '@metamask/utils': 8.5.0
+      detect-browser: 5.3.0
+      extension-port-stream: 3.0.0
+      fast-deep-equal: 3.1.3
+      is-stream: 2.0.1
+      readable-stream: 3.6.2
+      webextension-polyfill: 0.10.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@metamask/providers@21.0.0(webextension-polyfill@0.12.0)':
+    dependencies:
+      '@metamask/json-rpc-engine': 10.0.3
+      '@metamask/json-rpc-middleware-stream': 8.0.7
+      '@metamask/object-multiplex': 2.1.0
+      '@metamask/rpc-errors': 7.0.2
+      '@metamask/safe-event-emitter': 3.1.2
+      '@metamask/utils': 11.3.0
+      detect-browser: 5.3.0
+      extension-port-stream: 4.2.0(webextension-polyfill@0.12.0)
+      fast-deep-equal: 3.1.3
+      is-stream: 2.0.1
+      readable-stream: 3.6.2
+      webextension-polyfill: 0.12.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@metamask/rpc-errors@6.4.0':
+    dependencies:
+      '@metamask/utils': 9.3.0
+      fast-safe-stringify: 2.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@metamask/rpc-errors@7.0.2':
+    dependencies:
+      '@metamask/utils': 11.3.0
+      fast-safe-stringify: 2.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@metamask/safe-event-emitter@3.1.2': {}
+
+  '@metamask/superstruct@3.1.0': {}
+
+  '@metamask/utils@11.3.0':
+    dependencies:
+      '@ethereumjs/tx': 4.2.0
+      '@metamask/superstruct': 3.1.0
+      '@noble/hashes': 1.7.1
+      '@scure/base': 1.2.4
+      '@types/debug': 4.1.12
+      debug: 4.4.0
+      pony-cause: 2.1.11
+      semver: 7.7.1
+      uuid: 9.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@metamask/utils@8.5.0':
+    dependencies:
+      '@ethereumjs/tx': 4.2.0
+      '@metamask/superstruct': 3.1.0
+      '@noble/hashes': 1.7.1
+      '@scure/base': 1.2.4
+      '@types/debug': 4.1.12
+      debug: 4.4.0
+      pony-cause: 2.1.11
+      semver: 7.7.1
+      uuid: 9.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@metamask/utils@9.3.0':
+    dependencies:
+      '@ethereumjs/tx': 4.2.0
+      '@metamask/superstruct': 3.1.0
+      '@noble/hashes': 1.7.1
+      '@scure/base': 1.2.4
+      '@types/debug': 4.1.12
+      debug: 4.4.0
+      pony-cause: 2.1.11
+      semver: 7.7.1
+      uuid: 9.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@mtyszczak-cargo/htm@1.0.1(@hiveio/wax@1.27.12-rc2-251027102101)':
+    dependencies:
+      '@hiveio/wax': 1.27.12-rc2-251027102101
+      protobufjs: 7.2.5
+
+  '@nabla/vite-plugin-eslint@2.0.6(eslint@9.32.0(jiti@2.6.1))(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))':
+    dependencies:
+      '@types/eslint': 9.6.1
+      chalk: 4.1.2
+      debug: 4.4.0
+      eslint: 9.32.0(jiti@2.6.1)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    dependencies:
+      '@emnapi/core': 1.6.0
+      '@emnapi/runtime': 1.6.0
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.0.7':
+    dependencies:
+      '@emnapi/core': 1.6.0
+      '@emnapi/runtime': 1.6.0
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@noble/curves@1.4.2':
+    dependencies:
+      '@noble/hashes': 1.4.0
+
+  '@noble/hashes@1.4.0': {}
+
+  '@noble/hashes@1.7.1': {}
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.scandir@4.0.1':
+    dependencies:
+      '@nodelib/fs.stat': 4.0.0
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.stat@4.0.0': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+
+  '@nodelib/fs.walk@3.0.1':
+    dependencies:
+      '@nodelib/fs.scandir': 4.0.1
+      fastq: 1.19.1
+
+  '@nuxt/cli@3.29.3(magicast@0.3.5)':
+    dependencies:
+      c12: 3.3.1(magicast@0.3.5)
+      citty: 0.1.6
+      clipboardy: 5.0.0
+      confbox: 0.2.2
+      consola: 3.4.2
+      defu: 6.1.4
+      exsolve: 1.0.7
+      fuse.js: 7.1.0
+      get-port-please: 3.2.0
+      giget: 2.0.0
+      h3: 1.15.4
+      jiti: 2.6.1
+      listhen: 1.9.0
+      nypm: 0.6.2
+      ofetch: 1.5.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 2.0.0
+      pkg-types: 2.3.0
+      scule: 1.3.0
+      semver: 7.7.3
+      srvx: 0.8.16
+      std-env: 3.10.0
+      tinyexec: 1.0.1
+      ufo: 1.6.1
+      undici: 7.16.0
+      youch: 4.1.0-beta.11
+    transitivePeerDependencies:
+      - magicast
+
+  '@nuxt/devalue@2.0.2': {}
+
+  '@nuxt/devtools-kit@2.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))':
+    dependencies:
+      '@nuxt/kit': 3.20.0(magicast@0.3.5)
+      execa: 8.0.1
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - magicast
+
+  '@nuxt/devtools-wizard@2.7.0':
+    dependencies:
+      consola: 3.4.2
+      diff: 8.0.2
+      execa: 8.0.1
+      magicast: 0.3.5
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      prompts: 2.4.2
+      semver: 7.7.3
+
+  '@nuxt/devtools@2.7.0(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.22(typescript@5.7.3))':
+    dependencies:
+      '@nuxt/devtools-kit': 2.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
+      '@nuxt/devtools-wizard': 2.7.0
+      '@nuxt/kit': 3.20.0(magicast@0.3.5)
+      '@vue/devtools-core': 7.7.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.22(typescript@5.7.3))
+      '@vue/devtools-kit': 7.7.7
+      birpc: 2.6.1
+      consola: 3.4.2
+      destr: 2.0.5
+      error-stack-parser-es: 1.0.5
+      execa: 8.0.1
+      fast-npm-meta: 0.4.7
+      get-port-please: 3.2.0
+      hookable: 5.5.3
+      image-meta: 0.2.2
+      is-installed-globally: 1.0.0
+      launch-editor: 2.12.0
+      local-pkg: 1.1.2
+      magicast: 0.3.5
+      nypm: 0.6.2
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 2.3.0
+      semver: 7.7.3
+      simple-git: 3.28.0
+      sirv: 3.0.2
+      structured-clone-es: 1.0.0
+      tinyglobby: 0.2.15
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+      vite-plugin-inspect: 11.3.3(@nuxt/kit@3.20.0(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
+      vite-plugin-vue-tracer: 1.0.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.22(typescript@5.7.3))
+      which: 5.0.0
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+      - vue
+
+  '@nuxt/eslint-config@1.9.0(@typescript-eslint/utils@8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(@vue/compiler-sfc@3.5.22)(eslint-import-resolver-node@0.3.9)(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@clack/prompts': 0.11.0
+      '@eslint/js': 9.38.0
+      '@nuxt/eslint-plugin': 1.9.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      '@stylistic/eslint-plugin': 5.5.0(eslint@9.32.0(jiti@2.6.1))
+      '@typescript-eslint/eslint-plugin': 8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      '@typescript-eslint/parser': 8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      eslint: 9.32.0(jiti@2.6.1)
+      eslint-config-flat-gitignore: 2.1.0(eslint@9.32.0(jiti@2.6.1))
+      eslint-flat-config-utils: 2.1.4
+      eslint-merge-processors: 2.0.0(eslint@9.32.0(jiti@2.6.1))
+      eslint-plugin-import-lite: 0.3.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint@9.32.0(jiti@2.6.1))
+      eslint-plugin-jsdoc: 54.7.0(eslint@9.32.0(jiti@2.6.1))
+      eslint-plugin-regexp: 2.10.0(eslint@9.32.0(jiti@2.6.1))
+      eslint-plugin-unicorn: 60.0.0(eslint@9.32.0(jiti@2.6.1))
+      eslint-plugin-vue: 10.5.1(@stylistic/eslint-plugin@5.5.0(eslint@9.32.0(jiti@2.6.1)))(@typescript-eslint/parser@8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@2.6.1)))
+      eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.22)(eslint@9.32.0(jiti@2.6.1))
+      globals: 16.3.0
+      local-pkg: 1.1.2
+      pathe: 2.0.3
+      vue-eslint-parser: 10.2.0(eslint@9.32.0(jiti@2.6.1))
+    transitivePeerDependencies:
+      - '@typescript-eslint/utils'
+      - '@vue/compiler-sfc'
+      - eslint-import-resolver-node
+      - supports-color
+      - typescript
+
+  '@nuxt/eslint-plugin@1.9.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/utils': 8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      eslint: 9.32.0(jiti@2.6.1)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@nuxt/eslint@1.9.0(@typescript-eslint/utils@8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(@vue/compiler-sfc@3.5.22)(eslint-import-resolver-node@0.3.9)(eslint@9.32.0(jiti@2.6.1))(magicast@0.3.5)(typescript@5.7.3)(vite-plugin-eslint2@5.0.4(@types/eslint@9.6.1)(eslint@9.32.0(jiti@2.6.1))(rollup@4.52.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)))(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))':
+    dependencies:
+      '@eslint/config-inspector': 1.3.0(eslint@9.32.0(jiti@2.6.1))
+      '@nuxt/devtools-kit': 2.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
+      '@nuxt/eslint-config': 1.9.0(@typescript-eslint/utils@8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(@vue/compiler-sfc@3.5.22)(eslint-import-resolver-node@0.3.9)(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      '@nuxt/eslint-plugin': 1.9.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      '@nuxt/kit': 4.2.0(magicast@0.3.5)
+      chokidar: 4.0.3
+      eslint: 9.32.0(jiti@2.6.1)
+      eslint-flat-config-utils: 2.1.4
+      eslint-typegen: 2.3.0(eslint@9.32.0(jiti@2.6.1))
+      find-up: 7.0.0
+      get-port-please: 3.2.0
+      mlly: 1.8.0
+      pathe: 2.0.3
+      unimport: 5.5.0
+    optionalDependencies:
+      vite-plugin-eslint2: 5.0.4(@types/eslint@9.6.1)(eslint@9.32.0(jiti@2.6.1))(rollup@4.52.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
+    transitivePeerDependencies:
+      - '@typescript-eslint/utils'
+      - '@vue/compiler-sfc'
+      - bufferutil
+      - eslint-import-resolver-node
+      - eslint-plugin-format
+      - magicast
+      - supports-color
+      - typescript
+      - utf-8-validate
+      - vite
+
+  '@nuxt/kit@3.20.0(magicast@0.3.5)':
+    dependencies:
+      c12: 3.3.1(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      errx: 0.1.0
+      exsolve: 1.0.7
+      ignore: 7.0.5
+      jiti: 2.6.1
+      klona: 2.0.6
+      knitwork: 1.2.0
+      mlly: 1.8.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      rc9: 2.1.2
+      scule: 1.3.0
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ufo: 1.6.1
+      unctx: 2.4.1
+      untyped: 2.0.0
+    transitivePeerDependencies:
+      - magicast
+
+  '@nuxt/kit@4.2.0(magicast@0.3.5)':
+    dependencies:
+      c12: 3.3.1(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      errx: 0.1.0
+      exsolve: 1.0.7
+      ignore: 7.0.5
+      jiti: 2.6.1
+      klona: 2.0.6
+      mlly: 1.8.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      rc9: 2.1.2
+      scule: 1.3.0
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ufo: 1.6.1
+      unctx: 2.4.1
+      untyped: 2.0.0
+    transitivePeerDependencies:
+      - magicast
+
+  '@nuxt/nitro-server@4.2.0(db0@0.3.4)(ioredis@5.8.2)(magicast@0.3.5)(nuxt@4.2.0(@parcel/watcher@2.5.1)(@types/node@22.13.9)(@vue/compiler-sfc@3.5.22)(db0@0.3.4)(eslint@9.32.0(jiti@2.6.1))(ioredis@5.8.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.5)(terser@5.39.0)(tsx@4.19.3)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue-tsc@3.1.2(typescript@5.7.3))(yaml@2.8.1))(typescript@5.7.3)':
+    dependencies:
+      '@nuxt/devalue': 2.0.2
+      '@nuxt/kit': 4.2.0(magicast@0.3.5)
+      '@unhead/vue': 2.0.19(vue@3.5.22(typescript@5.7.3))
+      '@vue/shared': 3.5.22
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      devalue: 5.4.2
+      errx: 0.1.0
+      escape-string-regexp: 5.0.0
+      exsolve: 1.0.7
+      h3: 1.15.4
+      impound: 1.0.0
+      klona: 2.0.6
+      mocked-exports: 0.1.1
+      nitropack: 2.12.8
+      nuxt: 4.2.0(@parcel/watcher@2.5.1)(@types/node@22.13.9)(@vue/compiler-sfc@3.5.22)(db0@0.3.4)(eslint@9.32.0(jiti@2.6.1))(ioredis@5.8.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.5)(terser@5.39.0)(tsx@4.19.3)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue-tsc@3.1.2(typescript@5.7.3))(yaml@2.8.1)
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      radix3: 1.1.2
+      std-env: 3.10.0
+      ufo: 1.6.1
+      unctx: 2.4.1
+      unstorage: 1.17.1(db0@0.3.4)(ioredis@5.8.2)
+      vue: 3.5.22(typescript@5.7.3)
+      vue-bundle-renderer: 2.2.0
+      vue-devtools-stub: 0.1.0
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bare-abort-controller
+      - better-sqlite3
+      - db0
+      - drizzle-orm
+      - encoding
+      - idb-keyval
+      - ioredis
+      - magicast
+      - mysql2
+      - react-native-b4a
+      - rolldown
+      - sqlite3
+      - supports-color
+      - typescript
+      - uploadthing
+      - xml2js
+
+  '@nuxt/schema@4.2.0':
+    dependencies:
+      '@vue/shared': 3.5.22
+      defu: 6.1.4
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      std-env: 3.10.0
+
+  '@nuxt/telemetry@2.6.6(magicast@0.3.5)':
+    dependencies:
+      '@nuxt/kit': 3.20.0(magicast@0.3.5)
+      citty: 0.1.6
+      consola: 3.4.2
+      destr: 2.0.5
+      dotenv: 16.6.1
+      git-url-parse: 16.1.0
+      is-docker: 3.0.0
+      ofetch: 1.5.0
+      package-manager-detector: 1.5.0
+      pathe: 2.0.3
+      rc9: 2.1.2
+      std-env: 3.10.0
+    transitivePeerDependencies:
+      - magicast
+
+  '@nuxt/vite-builder@4.2.0(@types/node@22.13.9)(eslint@9.32.0(jiti@2.6.1))(magicast@0.3.5)(nuxt@4.2.0(@parcel/watcher@2.5.1)(@types/node@22.13.9)(@vue/compiler-sfc@3.5.22)(db0@0.3.4)(eslint@9.32.0(jiti@2.6.1))(ioredis@5.8.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.5)(terser@5.39.0)(tsx@4.19.3)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue-tsc@3.1.2(typescript@5.7.3))(yaml@2.8.1))(optionator@0.9.4)(rollup@4.52.5)(terser@5.39.0)(tsx@4.19.3)(typescript@5.7.3)(vue-tsc@3.1.2(typescript@5.7.3))(vue@3.5.22(typescript@5.7.3))(yaml@2.8.1)':
+    dependencies:
+      '@nuxt/kit': 4.2.0(magicast@0.3.5)
+      '@rollup/plugin-replace': 6.0.2(rollup@4.52.5)
+      '@vitejs/plugin-vue': 6.0.1(vite@7.1.12(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.22(typescript@5.7.3))
+      '@vitejs/plugin-vue-jsx': 5.1.1(vite@7.1.12(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.22(typescript@5.7.3))
+      autoprefixer: 10.4.21(postcss@8.5.6)
+      consola: 3.4.2
+      cssnano: 7.1.1(postcss@8.5.6)
+      defu: 6.1.4
+      esbuild: 0.25.11
+      escape-string-regexp: 5.0.0
+      exsolve: 1.0.7
+      get-port-please: 3.2.0
+      h3: 1.15.4
+      jiti: 2.6.1
+      knitwork: 1.2.0
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      mocked-exports: 0.1.1
+      nuxt: 4.2.0(@parcel/watcher@2.5.1)(@types/node@22.13.9)(@vue/compiler-sfc@3.5.22)(db0@0.3.4)(eslint@9.32.0(jiti@2.6.1))(ioredis@5.8.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.5)(terser@5.39.0)(tsx@4.19.3)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue-tsc@3.1.2(typescript@5.7.3))(yaml@2.8.1)
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      postcss: 8.5.6
+      rollup-plugin-visualizer: 6.0.5(rollup@4.52.5)
+      seroval: 1.3.2
+      std-env: 3.10.0
+      ufo: 1.6.1
+      unenv: 2.0.0-rc.23
+      vite: 7.1.12(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+      vite-node: 3.2.4(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+      vite-plugin-checker: 0.11.0(eslint@9.32.0(jiti@2.6.1))(optionator@0.9.4)(typescript@5.7.3)(vite@7.1.12(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue-tsc@3.1.2(typescript@5.7.3))
+      vue: 3.5.22(typescript@5.7.3)
+      vue-bundle-renderer: 2.2.0
+    transitivePeerDependencies:
+      - '@biomejs/biome'
+      - '@types/node'
+      - eslint
+      - less
+      - lightningcss
+      - magicast
+      - meow
+      - optionator
+      - oxlint
+      - rollup
+      - sass
+      - sass-embedded
+      - stylelint
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - vls
+      - vti
+      - vue-tsc
+      - yaml
 
-  '@babel/types@7.26.9':
+  '@nuxtjs/color-mode@3.5.2(magicast@0.3.5)':
     dependencies:
-      '@babel/helper-string-parser': 7.25.9
-      '@babel/helper-validator-identifier': 7.25.9
+      '@nuxt/kit': 3.20.0(magicast@0.3.5)
+      pathe: 1.1.2
+      pkg-types: 1.3.1
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - magicast
 
-  '@cspotcode/source-map-support@0.8.1':
+  '@nuxtjs/tailwindcss@6.13.1(magicast@0.3.5)(ts-node@10.9.2(@swc/core@1.3.78(@swc/helpers@0.5.15))(@types/node@22.13.9)(typescript@5.7.3))':
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.9
-    optional: true
+      '@nuxt/kit': 3.20.0(magicast@0.3.5)
+      autoprefixer: 10.4.21(postcss@8.5.6)
+      c12: 2.0.4(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      h3: 1.15.4
+      klona: 2.0.6
+      pathe: 2.0.3
+      postcss: 8.5.6
+      postcss-nesting: 13.0.2(postcss@8.5.6)
+      tailwind-config-viewer: 2.0.4(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.3.78(@swc/helpers@0.5.15))(@types/node@22.13.9)(typescript@5.7.3)))
+      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.3.78(@swc/helpers@0.5.15))(@types/node@22.13.9)(typescript@5.7.3))
+      ufo: 1.6.1
+      unctx: 2.4.1
+    transitivePeerDependencies:
+      - magicast
+      - supports-color
+      - ts-node
 
-  '@esbuild/aix-ppc64@0.25.0':
+  '@oxc-minify/binding-android-arm64@0.95.0':
     optional: true
 
-  '@esbuild/android-arm64@0.25.0':
+  '@oxc-minify/binding-darwin-arm64@0.95.0':
     optional: true
 
-  '@esbuild/android-arm@0.25.0':
+  '@oxc-minify/binding-darwin-x64@0.95.0':
     optional: true
 
-  '@esbuild/android-x64@0.25.0':
+  '@oxc-minify/binding-freebsd-x64@0.95.0':
     optional: true
 
-  '@esbuild/darwin-arm64@0.25.0':
+  '@oxc-minify/binding-linux-arm-gnueabihf@0.95.0':
     optional: true
 
-  '@esbuild/darwin-x64@0.25.0':
+  '@oxc-minify/binding-linux-arm-musleabihf@0.95.0':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.25.0':
+  '@oxc-minify/binding-linux-arm64-gnu@0.95.0':
     optional: true
 
-  '@esbuild/freebsd-x64@0.25.0':
+  '@oxc-minify/binding-linux-arm64-musl@0.95.0':
     optional: true
 
-  '@esbuild/linux-arm64@0.25.0':
+  '@oxc-minify/binding-linux-riscv64-gnu@0.95.0':
     optional: true
 
-  '@esbuild/linux-arm@0.25.0':
+  '@oxc-minify/binding-linux-s390x-gnu@0.95.0':
     optional: true
 
-  '@esbuild/linux-ia32@0.25.0':
+  '@oxc-minify/binding-linux-x64-gnu@0.95.0':
     optional: true
 
-  '@esbuild/linux-loong64@0.25.0':
+  '@oxc-minify/binding-linux-x64-musl@0.95.0':
     optional: true
 
-  '@esbuild/linux-mips64el@0.25.0':
+  '@oxc-minify/binding-wasm32-wasi@0.95.0':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.0.7
     optional: true
 
-  '@esbuild/linux-ppc64@0.25.0':
+  '@oxc-minify/binding-win32-arm64-msvc@0.95.0':
     optional: true
 
-  '@esbuild/linux-riscv64@0.25.0':
+  '@oxc-minify/binding-win32-x64-msvc@0.95.0':
     optional: true
 
-  '@esbuild/linux-s390x@0.25.0':
+  '@oxc-parser/binding-android-arm64@0.95.0':
     optional: true
 
-  '@esbuild/linux-x64@0.25.0':
+  '@oxc-parser/binding-darwin-arm64@0.95.0':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.25.0':
+  '@oxc-parser/binding-darwin-x64@0.95.0':
     optional: true
 
-  '@esbuild/netbsd-x64@0.25.0':
+  '@oxc-parser/binding-freebsd-x64@0.95.0':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.25.0':
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.95.0':
     optional: true
 
-  '@esbuild/openbsd-x64@0.25.0':
+  '@oxc-parser/binding-linux-arm-musleabihf@0.95.0':
     optional: true
 
-  '@esbuild/sunos-x64@0.25.0':
+  '@oxc-parser/binding-linux-arm64-gnu@0.95.0':
     optional: true
 
-  '@esbuild/win32-arm64@0.25.0':
+  '@oxc-parser/binding-linux-arm64-musl@0.95.0':
     optional: true
 
-  '@esbuild/win32-ia32@0.25.0':
+  '@oxc-parser/binding-linux-riscv64-gnu@0.95.0':
     optional: true
 
-  '@esbuild/win32-x64@0.25.0':
+  '@oxc-parser/binding-linux-s390x-gnu@0.95.0':
     optional: true
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.32.0(jiti@1.21.7))':
-    dependencies:
-      eslint: 9.32.0(jiti@1.21.7)
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/regexpp@4.12.1': {}
-
-  '@eslint/compat@1.3.1(eslint@9.32.0(jiti@1.21.7))':
-    optionalDependencies:
-      eslint: 9.32.0(jiti@1.21.7)
-
-  '@eslint/config-array@0.21.0':
-    dependencies:
-      '@eslint/object-schema': 2.1.6
-      debug: 4.4.0
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/config-helpers@0.3.0': {}
-
-  '@eslint/core@0.15.1':
-    dependencies:
-      '@types/json-schema': 7.0.15
-
-  '@eslint/eslintrc@3.3.1':
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.4.0
-      espree: 10.4.0
-      globals: 14.0.0
-      ignore: 5.3.2
-      import-fresh: 3.3.1
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/js@9.32.0': {}
-
-  '@eslint/object-schema@2.1.6': {}
-
-  '@eslint/plugin-kit@0.3.4':
-    dependencies:
-      '@eslint/core': 0.15.1
-      levn: 0.4.1
-
-  '@ethereumjs/common@3.2.0':
-    dependencies:
-      '@ethereumjs/util': 8.1.0
-      crc-32: 1.2.2
-
-  '@ethereumjs/rlp@4.0.1': {}
-
-  '@ethereumjs/tx@4.2.0':
-    dependencies:
-      '@ethereumjs/common': 3.2.0
-      '@ethereumjs/rlp': 4.0.1
-      '@ethereumjs/util': 8.1.0
-      ethereum-cryptography: 2.2.1
-
-  '@ethereumjs/util@8.1.0':
-    dependencies:
-      '@ethereumjs/rlp': 4.0.1
-      ethereum-cryptography: 2.2.1
-      micro-ftch: 0.3.1
-
-  '@floating-ui/core@1.6.9':
-    dependencies:
-      '@floating-ui/utils': 0.2.9
-
-  '@floating-ui/dom@1.6.13':
-    dependencies:
-      '@floating-ui/core': 1.6.9
-      '@floating-ui/utils': 0.2.9
-
-  '@floating-ui/utils@0.2.9': {}
-
-  '@floating-ui/vue@1.1.6(vue@3.5.13(typescript@5.7.3))':
-    dependencies:
-      '@floating-ui/dom': 1.6.13
-      '@floating-ui/utils': 0.2.9
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.3))
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
-  '@hiveio/beekeeper@1.28.0': {}
-
-  '@hiveio/wax-signers-keychain@1.27.12-rc2-251027102101':
-    dependencies:
-      '@hiveio/wax': 1.27.12-rc2-251027102101
-
-  '@hiveio/wax-signers-metamask@1.27.12-rc2-251027102101(webextension-polyfill@0.12.0)':
-    dependencies:
-      '@hiveio/wax': 1.27.12-rc2-251027102101
-      '@metamask/providers': 21.0.0(webextension-polyfill@0.12.0)
-    transitivePeerDependencies:
-      - supports-color
-      - webextension-polyfill
-
-  '@hiveio/wax-signers-peakvault@1.27.12-rc2-251027102101':
-    dependencies:
-      '@hiveio/wax': 1.27.12-rc2-251027102101
-
-  '@hiveio/wax@1.27.12-rc2-251027102101':
-    dependencies:
-      events: 3.3.0
-
-  '@humanfs/core@0.19.1': {}
-
-  '@humanfs/node@0.16.6':
-    dependencies:
-      '@humanfs/core': 0.19.1
-      '@humanwhocodes/retry': 0.3.1
-
-  '@humanwhocodes/module-importer@1.0.1': {}
-
-  '@humanwhocodes/retry@0.3.1': {}
-
-  '@humanwhocodes/retry@0.4.3': {}
-
-  '@internationalized/date@3.7.0':
-    dependencies:
-      '@swc/helpers': 0.5.15
+  '@oxc-parser/binding-linux-x64-gnu@0.95.0':
+    optional: true
 
-  '@internationalized/number@3.6.0':
-    dependencies:
-      '@swc/helpers': 0.5.15
+  '@oxc-parser/binding-linux-x64-musl@0.95.0':
+    optional: true
 
-  '@isaacs/cliui@8.0.2':
+  '@oxc-parser/binding-wasm32-wasi@0.95.0':
     dependencies:
-      string-width: 5.1.2
-      string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: wrap-ansi@7.0.0
+      '@napi-rs/wasm-runtime': 1.0.7
+    optional: true
 
-  '@jridgewell/gen-mapping@0.3.8':
-    dependencies:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
+  '@oxc-parser/binding-win32-arm64-msvc@0.95.0':
+    optional: true
 
-  '@jridgewell/resolve-uri@3.1.2': {}
+  '@oxc-parser/binding-win32-x64-msvc@0.95.0':
+    optional: true
 
-  '@jridgewell/set-array@1.2.1': {}
+  '@oxc-project/types@0.95.0': {}
 
-  '@jridgewell/source-map@0.3.6':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
-      '@jridgewell/trace-mapping': 0.3.25
+  '@oxc-transform/binding-android-arm64@0.95.0':
     optional: true
 
-  '@jridgewell/sourcemap-codec@1.5.0': {}
-
-  '@jridgewell/trace-mapping@0.3.25':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.0
+  '@oxc-transform/binding-darwin-arm64@0.95.0':
+    optional: true
 
-  '@jridgewell/trace-mapping@0.3.9':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.0
+  '@oxc-transform/binding-darwin-x64@0.95.0':
     optional: true
 
-  '@mdi/js@7.4.47': {}
+  '@oxc-transform/binding-freebsd-x64@0.95.0':
+    optional: true
 
-  '@metamask/json-rpc-engine@10.0.3':
-    dependencies:
-      '@metamask/rpc-errors': 7.0.2
-      '@metamask/safe-event-emitter': 3.1.2
-      '@metamask/utils': 11.3.0
-    transitivePeerDependencies:
-      - supports-color
+  '@oxc-transform/binding-linux-arm-gnueabihf@0.95.0':
+    optional: true
 
-  '@metamask/json-rpc-engine@8.0.2':
-    dependencies:
-      '@metamask/rpc-errors': 6.4.0
-      '@metamask/safe-event-emitter': 3.1.2
-      '@metamask/utils': 8.5.0
-    transitivePeerDependencies:
-      - supports-color
+  '@oxc-transform/binding-linux-arm-musleabihf@0.95.0':
+    optional: true
 
-  '@metamask/json-rpc-middleware-stream@7.0.2':
-    dependencies:
-      '@metamask/json-rpc-engine': 8.0.2
-      '@metamask/safe-event-emitter': 3.1.2
-      '@metamask/utils': 8.5.0
-      readable-stream: 3.6.2
-    transitivePeerDependencies:
-      - supports-color
+  '@oxc-transform/binding-linux-arm64-gnu@0.95.0':
+    optional: true
 
-  '@metamask/json-rpc-middleware-stream@8.0.7':
-    dependencies:
-      '@metamask/json-rpc-engine': 10.0.3
-      '@metamask/safe-event-emitter': 3.1.2
-      '@metamask/utils': 11.3.0
-      readable-stream: 3.6.2
-    transitivePeerDependencies:
-      - supports-color
+  '@oxc-transform/binding-linux-arm64-musl@0.95.0':
+    optional: true
 
-  '@metamask/object-multiplex@2.1.0':
-    dependencies:
-      once: 1.4.0
-      readable-stream: 3.6.2
+  '@oxc-transform/binding-linux-riscv64-gnu@0.95.0':
+    optional: true
 
-  '@metamask/providers@16.1.0':
-    dependencies:
-      '@metamask/json-rpc-engine': 8.0.2
-      '@metamask/json-rpc-middleware-stream': 7.0.2
-      '@metamask/object-multiplex': 2.1.0
-      '@metamask/rpc-errors': 6.4.0
-      '@metamask/safe-event-emitter': 3.1.2
-      '@metamask/utils': 8.5.0
-      detect-browser: 5.3.0
-      extension-port-stream: 3.0.0
-      fast-deep-equal: 3.1.3
-      is-stream: 2.0.1
-      readable-stream: 3.6.2
-      webextension-polyfill: 0.10.0
-    transitivePeerDependencies:
-      - supports-color
+  '@oxc-transform/binding-linux-s390x-gnu@0.95.0':
+    optional: true
 
-  '@metamask/providers@21.0.0(webextension-polyfill@0.12.0)':
-    dependencies:
-      '@metamask/json-rpc-engine': 10.0.3
-      '@metamask/json-rpc-middleware-stream': 8.0.7
-      '@metamask/object-multiplex': 2.1.0
-      '@metamask/rpc-errors': 7.0.2
-      '@metamask/safe-event-emitter': 3.1.2
-      '@metamask/utils': 11.3.0
-      detect-browser: 5.3.0
-      extension-port-stream: 4.2.0(webextension-polyfill@0.12.0)
-      fast-deep-equal: 3.1.3
-      is-stream: 2.0.1
-      readable-stream: 3.6.2
-      webextension-polyfill: 0.12.0
-    transitivePeerDependencies:
-      - supports-color
+  '@oxc-transform/binding-linux-x64-gnu@0.95.0':
+    optional: true
 
-  '@metamask/rpc-errors@6.4.0':
-    dependencies:
-      '@metamask/utils': 9.3.0
-      fast-safe-stringify: 2.1.1
-    transitivePeerDependencies:
-      - supports-color
+  '@oxc-transform/binding-linux-x64-musl@0.95.0':
+    optional: true
 
-  '@metamask/rpc-errors@7.0.2':
+  '@oxc-transform/binding-wasm32-wasi@0.95.0':
     dependencies:
-      '@metamask/utils': 11.3.0
-      fast-safe-stringify: 2.1.1
-    transitivePeerDependencies:
-      - supports-color
+      '@napi-rs/wasm-runtime': 1.0.7
+    optional: true
 
-  '@metamask/safe-event-emitter@3.1.2': {}
+  '@oxc-transform/binding-win32-arm64-msvc@0.95.0':
+    optional: true
 
-  '@metamask/superstruct@3.1.0': {}
+  '@oxc-transform/binding-win32-x64-msvc@0.95.0':
+    optional: true
 
-  '@metamask/utils@11.3.0':
-    dependencies:
-      '@ethereumjs/tx': 4.2.0
-      '@metamask/superstruct': 3.1.0
-      '@noble/hashes': 1.7.1
-      '@scure/base': 1.2.4
-      '@types/debug': 4.1.12
-      debug: 4.4.0
-      pony-cause: 2.1.11
-      semver: 7.7.1
-      uuid: 9.0.1
-    transitivePeerDependencies:
-      - supports-color
+  '@parcel/watcher-android-arm64@2.5.1':
+    optional: true
 
-  '@metamask/utils@8.5.0':
-    dependencies:
-      '@ethereumjs/tx': 4.2.0
-      '@metamask/superstruct': 3.1.0
-      '@noble/hashes': 1.7.1
-      '@scure/base': 1.2.4
-      '@types/debug': 4.1.12
-      debug: 4.4.0
-      pony-cause: 2.1.11
-      semver: 7.7.1
-      uuid: 9.0.1
-    transitivePeerDependencies:
-      - supports-color
+  '@parcel/watcher-darwin-arm64@2.5.1':
+    optional: true
 
-  '@metamask/utils@9.3.0':
-    dependencies:
-      '@ethereumjs/tx': 4.2.0
-      '@metamask/superstruct': 3.1.0
-      '@noble/hashes': 1.7.1
-      '@scure/base': 1.2.4
-      '@types/debug': 4.1.12
-      debug: 4.4.0
-      pony-cause: 2.1.11
-      semver: 7.7.1
-      uuid: 9.0.1
-    transitivePeerDependencies:
-      - supports-color
+  '@parcel/watcher-darwin-x64@2.5.1':
+    optional: true
 
-  '@mtyszczak-cargo/htm@1.0.1(@hiveio/wax@1.27.12-rc2-251027102101)':
-    dependencies:
-      '@hiveio/wax': 1.27.12-rc2-251027102101
-      protobufjs: 7.2.5
+  '@parcel/watcher-freebsd-x64@2.5.1':
+    optional: true
 
-  '@nabla/vite-plugin-eslint@2.0.6(eslint@9.32.0(jiti@1.21.7))(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0))':
-    dependencies:
-      '@types/eslint': 9.6.1
-      chalk: 4.1.2
-      debug: 4.4.0
-      eslint: 9.32.0(jiti@1.21.7)
-      vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0)
-    transitivePeerDependencies:
-      - supports-color
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
+    optional: true
 
-  '@noble/curves@1.4.2':
-    dependencies:
-      '@noble/hashes': 1.4.0
+  '@parcel/watcher-linux-arm-musl@2.5.1':
+    optional: true
 
-  '@noble/hashes@1.4.0': {}
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+    optional: true
 
-  '@noble/hashes@1.7.1': {}
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
+    optional: true
 
-  '@nodelib/fs.scandir@2.1.5':
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.5.1':
+    optional: true
+
+  '@parcel/watcher-wasm@2.5.1':
     dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
+      is-glob: 4.0.3
+      micromatch: 4.0.8
 
-  '@nodelib/fs.stat@2.0.5': {}
+  '@parcel/watcher-win32-arm64@2.5.1':
+    optional: true
 
-  '@nodelib/fs.walk@1.2.8':
+  '@parcel/watcher-win32-ia32@2.5.1':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.5.1':
+    optional: true
+
+  '@parcel/watcher@2.5.1':
     dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.19.1
+      detect-libc: 1.0.3
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+      node-addon-api: 7.1.1
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.1
+      '@parcel/watcher-darwin-arm64': 2.5.1
+      '@parcel/watcher-darwin-x64': 2.5.1
+      '@parcel/watcher-freebsd-x64': 2.5.1
+      '@parcel/watcher-linux-arm-glibc': 2.5.1
+      '@parcel/watcher-linux-arm-musl': 2.5.1
+      '@parcel/watcher-linux-arm64-glibc': 2.5.1
+      '@parcel/watcher-linux-arm64-musl': 2.5.1
+      '@parcel/watcher-linux-x64-glibc': 2.5.1
+      '@parcel/watcher-linux-x64-musl': 2.5.1
+      '@parcel/watcher-win32-arm64': 2.5.1
+      '@parcel/watcher-win32-ia32': 2.5.1
+      '@parcel/watcher-win32-x64': 2.5.1
+
+  '@pinia/nuxt@0.11.2(magicast@0.3.5)(pinia@3.0.3(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))':
+    dependencies:
+      '@nuxt/kit': 3.20.0(magicast@0.3.5)
+      pinia: 3.0.3(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
+    transitivePeerDependencies:
+      - magicast
 
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@polka/url@1.0.0-next.29': {}
+
+  '@poppinss/colors@4.1.5':
+    dependencies:
+      kleur: 4.1.5
+
+  '@poppinss/dumper@0.6.4':
+    dependencies:
+      '@poppinss/colors': 4.1.5
+      '@sindresorhus/is': 7.1.0
+      supports-color: 10.2.2
+
+  '@poppinss/exception@1.2.2': {}
+
   '@protobufjs/aspromise@1.1.2': {}
 
   '@protobufjs/base64@1.1.2': {}
@@ -3033,63 +7501,196 @@ snapshots:
 
   '@protobufjs/utf8@1.1.0': {}
 
+  '@rolldown/pluginutils@1.0.0-beta.29': {}
+
+  '@rolldown/pluginutils@1.0.0-beta.45': {}
+
+  '@rollup/plugin-alias@5.1.1(rollup@4.52.5)':
+    optionalDependencies:
+      rollup: 4.52.5
+
+  '@rollup/plugin-commonjs@28.0.9(rollup@4.52.5)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      fdir: 6.5.0(picomatch@4.0.3)
+      is-reference: 1.2.1
+      magic-string: 0.30.21
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 4.52.5
+
+  '@rollup/plugin-inject@5.0.5(rollup@4.52.5)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+    optionalDependencies:
+      rollup: 4.52.5
+
+  '@rollup/plugin-json@6.1.0(rollup@4.52.5)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+    optionalDependencies:
+      rollup: 4.52.5
+
+  '@rollup/plugin-node-resolve@16.0.3(rollup@4.52.5)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-module: 1.0.0
+      resolve: 1.22.10
+    optionalDependencies:
+      rollup: 4.52.5
+
+  '@rollup/plugin-replace@6.0.2(rollup@4.52.5)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      magic-string: 0.30.21
+    optionalDependencies:
+      rollup: 4.52.5
+
+  '@rollup/plugin-terser@0.4.4(rollup@4.52.5)':
+    dependencies:
+      serialize-javascript: 6.0.2
+      smob: 1.5.0
+      terser: 5.39.0
+    optionalDependencies:
+      rollup: 4.52.5
+
+  '@rollup/pluginutils@5.3.0(rollup@4.52.5)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 4.52.5
+
   '@rollup/rollup-android-arm-eabi@4.34.9':
     optional: true
 
+  '@rollup/rollup-android-arm-eabi@4.52.5':
+    optional: true
+
   '@rollup/rollup-android-arm64@4.34.9':
     optional: true
 
+  '@rollup/rollup-android-arm64@4.52.5':
+    optional: true
+
   '@rollup/rollup-darwin-arm64@4.34.9':
     optional: true
 
+  '@rollup/rollup-darwin-arm64@4.52.5':
+    optional: true
+
   '@rollup/rollup-darwin-x64@4.34.9':
     optional: true
 
+  '@rollup/rollup-darwin-x64@4.52.5':
+    optional: true
+
   '@rollup/rollup-freebsd-arm64@4.34.9':
     optional: true
 
+  '@rollup/rollup-freebsd-arm64@4.52.5':
+    optional: true
+
   '@rollup/rollup-freebsd-x64@4.34.9':
     optional: true
 
+  '@rollup/rollup-freebsd-x64@4.52.5':
+    optional: true
+
   '@rollup/rollup-linux-arm-gnueabihf@4.34.9':
     optional: true
 
+  '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
+    optional: true
+
   '@rollup/rollup-linux-arm-musleabihf@4.34.9':
     optional: true
 
+  '@rollup/rollup-linux-arm-musleabihf@4.52.5':
+    optional: true
+
   '@rollup/rollup-linux-arm64-gnu@4.34.9':
     optional: true
 
+  '@rollup/rollup-linux-arm64-gnu@4.52.5':
+    optional: true
+
   '@rollup/rollup-linux-arm64-musl@4.34.9':
     optional: true
 
+  '@rollup/rollup-linux-arm64-musl@4.52.5':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.52.5':
+    optional: true
+
   '@rollup/rollup-linux-loongarch64-gnu@4.34.9':
     optional: true
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.34.9':
     optional: true
 
+  '@rollup/rollup-linux-ppc64-gnu@4.52.5':
+    optional: true
+
   '@rollup/rollup-linux-riscv64-gnu@4.34.9':
     optional: true
 
+  '@rollup/rollup-linux-riscv64-gnu@4.52.5':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.52.5':
+    optional: true
+
   '@rollup/rollup-linux-s390x-gnu@4.34.9':
     optional: true
 
+  '@rollup/rollup-linux-s390x-gnu@4.52.5':
+    optional: true
+
   '@rollup/rollup-linux-x64-gnu@4.34.9':
     optional: true
 
+  '@rollup/rollup-linux-x64-gnu@4.52.5':
+    optional: true
+
   '@rollup/rollup-linux-x64-musl@4.34.9':
     optional: true
 
+  '@rollup/rollup-linux-x64-musl@4.52.5':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.52.5':
+    optional: true
+
   '@rollup/rollup-win32-arm64-msvc@4.34.9':
     optional: true
 
+  '@rollup/rollup-win32-arm64-msvc@4.52.5':
+    optional: true
+
   '@rollup/rollup-win32-ia32-msvc@4.34.9':
     optional: true
 
+  '@rollup/rollup-win32-ia32-msvc@4.52.5':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.52.5':
+    optional: true
+
   '@rollup/rollup-win32-x64-msvc@4.34.9':
     optional: true
 
+  '@rollup/rollup-win32-x64-msvc@4.52.5':
+    optional: true
+
   '@rtsao/scc@1.1.0': {}
 
   '@scure/base@1.1.9': {}
@@ -3107,11 +7708,29 @@ snapshots:
       '@noble/hashes': 1.4.0
       '@scure/base': 1.1.9
 
-  '@stylistic/eslint-plugin@5.2.2(eslint@9.32.0(jiti@1.21.7))':
+  '@sec-ant/readable-stream@0.4.1': {}
+
+  '@sindresorhus/is@7.1.0': {}
+
+  '@sindresorhus/merge-streams@4.0.0': {}
+
+  '@speed-highlight/core@1.2.8': {}
+
+  '@stylistic/eslint-plugin@5.2.2(eslint@9.32.0(jiti@2.6.1))':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.6.1))
       '@typescript-eslint/types': 8.38.0
-      eslint: 9.32.0(jiti@1.21.7)
+      eslint: 9.32.0(jiti@2.6.1)
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      estraverse: 5.3.0
+      picomatch: 4.0.3
+
+  '@stylistic/eslint-plugin@5.5.0(eslint@9.32.0(jiti@2.6.1))':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.32.0(jiti@2.6.1))
+      '@typescript-eslint/types': 8.46.2
+      eslint: 9.32.0(jiti@2.6.1)
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
       estraverse: 5.3.0
@@ -3192,6 +7811,11 @@ snapshots:
   '@tsconfig/node16@1.0.4':
     optional: true
 
+  '@tybys/wasm-util@0.10.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
@@ -3203,6 +7827,8 @@ snapshots:
 
   '@types/estree@1.0.6': {}
 
+  '@types/estree@1.0.8': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/json5@0.0.29': {}
@@ -3213,21 +7839,44 @@ snapshots:
     dependencies:
       undici-types: 6.20.0
 
+  '@types/parse-path@7.1.0':
+    dependencies:
+      parse-path: 7.1.0
+
   '@types/qrcode@1.5.6':
     dependencies:
       '@types/node': 22.13.9
 
+  '@types/resolve@1.20.2': {}
+
   '@types/web-bluetooth@0.0.21': {}
 
-  '@typescript-eslint/eslint-plugin@8.38.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)':
+  '@typescript-eslint/eslint-plugin@8.38.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
+      '@typescript-eslint/parser': 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
       '@typescript-eslint/scope-manager': 8.38.0
-      '@typescript-eslint/type-utils': 8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
+      '@typescript-eslint/type-utils': 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
       '@typescript-eslint/visitor-keys': 8.38.0
-      eslint: 9.32.0(jiti@1.21.7)
+      eslint: 9.32.0(jiti@2.6.1)
+      graphemer: 1.4.0
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.7.3)
+      typescript: 5.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      '@typescript-eslint/scope-manager': 8.46.2
+      '@typescript-eslint/type-utils': 8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      '@typescript-eslint/visitor-keys': 8.46.2
+      eslint: 9.32.0(jiti@2.6.1)
       graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -3236,14 +7885,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)':
+  '@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.38.0
       '@typescript-eslint/types': 8.38.0
       '@typescript-eslint/typescript-estree': 8.38.0(typescript@5.7.3)
       '@typescript-eslint/visitor-keys': 8.38.0
       debug: 4.4.0
-      eslint: 9.32.0(jiti@1.21.7)
+      eslint: 9.32.0(jiti@2.6.1)
+      typescript: 5.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.46.2
+      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.7.3)
+      '@typescript-eslint/visitor-keys': 8.46.2
+      debug: 4.4.3
+      eslint: 9.32.0(jiti@2.6.1)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
@@ -3257,22 +7918,52 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/project-service@8.46.2(typescript@5.7.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.46.2(typescript@5.7.3)
+      '@typescript-eslint/types': 8.46.2
+      debug: 4.4.3
+      typescript: 5.7.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/scope-manager@8.38.0':
     dependencies:
       '@typescript-eslint/types': 8.38.0
       '@typescript-eslint/visitor-keys': 8.38.0
 
+  '@typescript-eslint/scope-manager@8.46.2':
+    dependencies:
+      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/visitor-keys': 8.46.2
+
   '@typescript-eslint/tsconfig-utils@8.38.0(typescript@5.7.3)':
     dependencies:
       typescript: 5.7.3
 
-  '@typescript-eslint/type-utils@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)':
+  '@typescript-eslint/tsconfig-utils@8.46.2(typescript@5.7.3)':
+    dependencies:
+      typescript: 5.7.3
+
+  '@typescript-eslint/type-utils@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)':
     dependencies:
       '@typescript-eslint/types': 8.38.0
       '@typescript-eslint/typescript-estree': 8.38.0(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
       debug: 4.4.0
-      eslint: 9.32.0(jiti@1.21.7)
+      eslint: 9.32.0(jiti@2.6.1)
+      ts-api-utils: 2.1.0(typescript@5.7.3)
+      typescript: 5.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/type-utils@8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      debug: 4.4.3
+      eslint: 9.32.0(jiti@2.6.1)
       ts-api-utils: 2.1.0(typescript@5.7.3)
       typescript: 5.7.3
     transitivePeerDependencies:
@@ -3280,6 +7971,8 @@ snapshots:
 
   '@typescript-eslint/types@8.38.0': {}
 
+  '@typescript-eslint/types@8.46.2': {}
+
   '@typescript-eslint/typescript-estree@8.38.0(typescript@5.7.3)':
     dependencies:
       '@typescript-eslint/project-service': 8.38.0(typescript@5.7.3)
@@ -3290,19 +7983,46 @@ snapshots:
       fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.1
+      semver: 7.7.1
+      ts-api-utils: 2.1.0(typescript@5.7.3)
+      typescript: 5.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/typescript-estree@8.46.2(typescript@5.7.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.46.2(typescript@5.7.3)
+      '@typescript-eslint/tsconfig-utils': 8.46.2(typescript@5.7.3)
+      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/visitor-keys': 8.46.2
+      debug: 4.4.3
+      fast-glob: 3.3.3
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.3
       ts-api-utils: 2.1.0(typescript@5.7.3)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)':
+  '@typescript-eslint/utils@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.6.1))
       '@typescript-eslint/scope-manager': 8.38.0
       '@typescript-eslint/types': 8.38.0
       '@typescript-eslint/typescript-estree': 8.38.0(typescript@5.7.3)
-      eslint: 9.32.0(jiti@1.21.7)
+      eslint: 9.32.0(jiti@2.6.1)
+      typescript: 5.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.46.2
+      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.7.3)
+      eslint: 9.32.0(jiti@2.6.1)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
@@ -3312,23 +8032,169 @@ snapshots:
       '@typescript-eslint/types': 8.38.0
       eslint-visitor-keys: 4.2.1
 
-  '@vitejs/plugin-vue@5.2.1(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@typescript-eslint/visitor-keys@8.46.2':
+    dependencies:
+      '@typescript-eslint/types': 8.46.2
+      eslint-visitor-keys: 4.2.1
+
+  '@unhead/vue@2.0.19(vue@3.5.22(typescript@5.7.3))':
+    dependencies:
+      hookable: 5.5.3
+      unhead: 2.0.19
+      vue: 3.5.22(typescript@5.7.3)
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    optional: true
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    optional: true
+
+  '@vercel/nft@0.30.3(rollup@4.52.5)':
+    dependencies:
+      '@mapbox/node-pre-gyp': 2.0.0
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      acorn: 8.15.0
+      acorn-import-attributes: 1.9.5(acorn@8.15.0)
+      async-sema: 3.1.1
+      bindings: 1.5.0
+      estree-walker: 2.0.2
+      glob: 10.4.5
+      graceful-fs: 4.2.11
+      node-gyp-build: 4.8.4
+      picomatch: 4.0.3
+      resolve-from: 5.0.0
+    transitivePeerDependencies:
+      - encoding
+      - rollup
+      - supports-color
+
+  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.12(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.22(typescript@5.7.3))':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
+      '@rolldown/pluginutils': 1.0.0-beta.45
+      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.5)
+      vite: 7.1.12(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+      vue: 3.5.22(typescript@5.7.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitejs/plugin-vue@5.2.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
       vue: 3.5.13(typescript@5.7.3)
 
-  '@volar/language-core@2.4.11':
+  '@vitejs/plugin-vue@6.0.1(vite@7.1.12(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.22(typescript@5.7.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.0-beta.29
+      vite: 7.1.12(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+      vue: 3.5.22(typescript@5.7.3)
+
+  '@volar/language-core@2.4.23':
     dependencies:
-      '@volar/source-map': 2.4.11
+      '@volar/source-map': 2.4.23
 
-  '@volar/source-map@2.4.11': {}
+  '@volar/source-map@2.4.23': {}
 
-  '@volar/typescript@2.4.11':
+  '@volar/typescript@2.4.23':
     dependencies:
-      '@volar/language-core': 2.4.11
+      '@volar/language-core': 2.4.23
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
+  '@vue-macros/common@3.1.1(vue@3.5.22(typescript@5.7.3))':
+    dependencies:
+      '@vue/compiler-sfc': 3.5.22
+      ast-kit: 2.1.3
+      local-pkg: 1.1.2
+      magic-string-ast: 1.0.3
+      unplugin-utils: 0.3.1
+    optionalDependencies:
+      vue: 3.5.22(typescript@5.7.3)
+
+  '@vue/babel-helper-vue-transform-on@1.5.0': {}
+
+  '@vue/babel-plugin-jsx@1.5.0(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+      '@vue/babel-helper-vue-transform-on': 1.5.0
+      '@vue/babel-plugin-resolve-type': 1.5.0(@babel/core@7.28.5)
+      '@vue/shared': 3.5.22
+    optionalDependencies:
+      '@babel/core': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-resolve-type@1.5.0(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/parser': 7.28.5
+      '@vue/compiler-sfc': 3.5.22
+    transitivePeerDependencies:
+      - supports-color
+
   '@vue/compiler-core@3.5.13':
     dependencies:
       '@babel/parser': 7.26.9
@@ -3337,11 +8203,24 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
+  '@vue/compiler-core@3.5.22':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@vue/shared': 3.5.22
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
   '@vue/compiler-dom@3.5.13':
     dependencies:
       '@vue/compiler-core': 3.5.13
       '@vue/shared': 3.5.13
 
+  '@vue/compiler-dom@3.5.22':
+    dependencies:
+      '@vue/compiler-core': 3.5.22
+      '@vue/shared': 3.5.22
+
   '@vue/compiler-sfc@3.5.13':
     dependencies:
       '@babel/parser': 7.26.9
@@ -3354,59 +8233,82 @@ snapshots:
       postcss: 8.5.3
       source-map-js: 1.2.1
 
+  '@vue/compiler-sfc@3.5.22':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@vue/compiler-core': 3.5.22
+      '@vue/compiler-dom': 3.5.22
+      '@vue/compiler-ssr': 3.5.22
+      '@vue/shared': 3.5.22
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.6
+      source-map-js: 1.2.1
+
   '@vue/compiler-ssr@3.5.13':
     dependencies:
       '@vue/compiler-dom': 3.5.13
       '@vue/shared': 3.5.13
 
-  '@vue/compiler-vue2@2.7.16':
+  '@vue/compiler-ssr@3.5.22':
     dependencies:
-      de-indent: 1.0.2
-      he: 1.2.0
+      '@vue/compiler-dom': 3.5.22
+      '@vue/shared': 3.5.22
 
   '@vue/devtools-api@6.6.4': {}
 
   '@vue/devtools-api@7.7.2':
     dependencies:
-      '@vue/devtools-kit': 7.7.2
+      '@vue/devtools-kit': 7.7.7
+
+  '@vue/devtools-core@7.7.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.22(typescript@5.7.3))':
+    dependencies:
+      '@vue/devtools-kit': 7.7.7
+      '@vue/devtools-shared': 7.7.7
+      mitt: 3.0.1
+      nanoid: 5.1.6
+      pathe: 2.0.3
+      vite-hot-client: 2.1.0(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
+      vue: 3.5.22(typescript@5.7.3)
+    transitivePeerDependencies:
+      - vite
 
-  '@vue/devtools-kit@7.7.2':
+  '@vue/devtools-kit@7.7.7':
     dependencies:
-      '@vue/devtools-shared': 7.7.2
-      birpc: 0.2.19
+      '@vue/devtools-shared': 7.7.7
+      birpc: 2.6.1
       hookable: 5.5.3
       mitt: 3.0.1
       perfect-debounce: 1.0.0
       speakingurl: 14.0.1
       superjson: 2.2.2
 
-  '@vue/devtools-shared@7.7.2':
+  '@vue/devtools-shared@7.7.7':
     dependencies:
       rfdc: 1.4.1
 
-  '@vue/eslint-config-typescript@14.6.0(eslint-plugin-vue@10.3.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint@9.32.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@1.21.7))))(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)':
+  '@vue/eslint-config-typescript@14.6.0(eslint-plugin-vue@10.3.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@2.6.1))))(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/utils': 8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
-      eslint: 9.32.0(jiti@1.21.7)
-      eslint-plugin-vue: 10.3.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint@9.32.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@1.21.7)))
+      '@typescript-eslint/utils': 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      eslint: 9.32.0(jiti@2.6.1)
+      eslint-plugin-vue: 10.3.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@2.6.1)))
       fast-glob: 3.3.3
-      typescript-eslint: 8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
-      vue-eslint-parser: 10.2.0(eslint@9.32.0(jiti@1.21.7))
+      typescript-eslint: 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      vue-eslint-parser: 10.2.0(eslint@9.32.0(jiti@2.6.1))
     optionalDependencies:
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@vue/language-core@2.2.8(typescript@5.7.3)':
+  '@vue/language-core@3.1.2(typescript@5.7.3)':
     dependencies:
-      '@volar/language-core': 2.4.11
-      '@vue/compiler-dom': 3.5.13
-      '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.13
-      alien-signals: 1.0.4
-      minimatch: 9.0.5
+      '@volar/language-core': 2.4.23
+      '@vue/compiler-dom': 3.5.22
+      '@vue/shared': 3.5.22
+      alien-signals: 3.0.3
       muggle-string: 0.4.1
       path-browserify: 1.0.1
+      picomatch: 4.0.3
     optionalDependencies:
       typescript: 5.7.3
 
@@ -3414,11 +8316,20 @@ snapshots:
     dependencies:
       '@vue/shared': 3.5.13
 
+  '@vue/reactivity@3.5.22':
+    dependencies:
+      '@vue/shared': 3.5.22
+
   '@vue/runtime-core@3.5.13':
     dependencies:
       '@vue/reactivity': 3.5.13
       '@vue/shared': 3.5.13
 
+  '@vue/runtime-core@3.5.22':
+    dependencies:
+      '@vue/reactivity': 3.5.22
+      '@vue/shared': 3.5.22
+
   '@vue/runtime-dom@3.5.13':
     dependencies:
       '@vue/reactivity': 3.5.13
@@ -3426,14 +8337,29 @@ snapshots:
       '@vue/shared': 3.5.13
       csstype: 3.1.3
 
+  '@vue/runtime-dom@3.5.22':
+    dependencies:
+      '@vue/reactivity': 3.5.22
+      '@vue/runtime-core': 3.5.22
+      '@vue/shared': 3.5.22
+      csstype: 3.1.3
+
   '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/compiler-ssr': 3.5.13
       '@vue/shared': 3.5.13
       vue: 3.5.13(typescript@5.7.3)
 
+  '@vue/server-renderer@3.5.22(vue@3.5.22(typescript@5.7.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.22
+      '@vue/shared': 3.5.22
+      vue: 3.5.22(typescript@5.7.3)
+
   '@vue/shared@3.5.13': {}
 
+  '@vue/shared@3.5.22': {}
+
   '@vue/tsconfig@0.7.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))':
     optionalDependencies:
       typescript: 5.7.3
@@ -3456,10 +8382,21 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  abbrev@3.0.1: {}
+
   abort-controller@3.0.0:
     dependencies:
       event-target-shim: 5.0.1
 
+  accepts@1.3.8:
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+
+  acorn-import-attributes@1.9.5(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
@@ -3471,6 +8408,8 @@ snapshots:
 
   acorn@8.15.0: {}
 
+  agent-base@7.1.4: {}
+
   ajv@6.12.6:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -3478,7 +8417,7 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
-  alien-signals@1.0.4: {}
+  alien-signals@3.0.3: {}
 
   ansi-regex@5.0.1: {}
 
@@ -3490,6 +8429,8 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
+  ansis@4.2.0: {}
+
   any-promise@1.3.0: {}
 
   anymatch@3.1.3:
@@ -3497,6 +8438,31 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  archiver-utils@5.0.2:
+    dependencies:
+      glob: 10.4.5
+      graceful-fs: 4.2.11
+      is-stream: 2.0.1
+      lazystream: 1.0.1
+      lodash: 4.17.21
+      normalize-path: 3.0.0
+      readable-stream: 4.7.0
+
+  archiver@7.0.1:
+    dependencies:
+      archiver-utils: 5.0.2
+      async: 3.2.6
+      buffer-crc32: 1.0.0
+      readable-stream: 4.7.0
+      readdir-glob: 1.1.3
+      tar-stream: 3.1.7
+      zip-stream: 6.0.1
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
+  are-docs-informative@0.0.2: {}
+
   arg@4.1.3:
     optional: true
 
@@ -3558,29 +8524,65 @@ snapshots:
       get-intrinsic: 1.3.0
       is-array-buffer: 3.0.5
 
+  ast-kit@2.1.3:
+    dependencies:
+      '@babel/parser': 7.28.5
+      pathe: 2.0.3
+
+  ast-walker-scope@0.8.3:
+    dependencies:
+      '@babel/parser': 7.28.5
+      ast-kit: 2.1.3
+
   async-function@1.0.0: {}
 
+  async-sema@3.1.1: {}
+
+  async@3.2.6: {}
+
+  at-least-node@1.0.0: {}
+
   autoprefixer@10.4.20(postcss@8.5.3):
     dependencies:
       browserslist: 4.24.4
-      caniuse-lite: 1.0.30001701
+      caniuse-lite: 1.0.30001751
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
+  autoprefixer@10.4.21(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.24.4
+      caniuse-lite: 1.0.30001751
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.1.0
 
+  b4a@1.7.3: {}
+
   balanced-match@1.0.2: {}
 
+  bare-events@2.8.1: {}
+
   base64-js@1.5.1: {}
 
+  baseline-browser-mapping@2.8.20: {}
+
   binary-extensions@2.3.0: {}
 
-  birpc@0.2.19: {}
+  bindings@1.5.0:
+    dependencies:
+      file-uri-to-path: 1.0.0
+
+  birpc@2.6.1: {}
 
   boolbase@1.0.0: {}
 
@@ -3599,19 +8601,80 @@ snapshots:
 
   browserslist@4.24.4:
     dependencies:
-      caniuse-lite: 1.0.30001701
+      caniuse-lite: 1.0.30001751
       electron-to-chromium: 1.5.109
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.24.4)
 
-  buffer-from@1.1.2:
-    optional: true
+  browserslist@4.27.0:
+    dependencies:
+      baseline-browser-mapping: 2.8.20
+      caniuse-lite: 1.0.30001751
+      electron-to-chromium: 1.5.241
+      node-releases: 2.0.26
+      update-browserslist-db: 1.1.4(browserslist@4.27.0)
+
+  buffer-crc32@1.0.0: {}
+
+  buffer-from@1.1.2: {}
 
   buffer@6.0.3:
     dependencies:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
+  builtin-modules@5.0.0: {}
+
+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.1.0
+
+  bundle-require@5.1.0(esbuild@0.25.11):
+    dependencies:
+      esbuild: 0.25.11
+      load-tsconfig: 0.2.5
+
+  c12@2.0.4(magicast@0.3.5):
+    dependencies:
+      chokidar: 4.0.3
+      confbox: 0.1.8
+      defu: 6.1.4
+      dotenv: 16.6.1
+      giget: 1.2.5
+      jiti: 2.6.1
+      mlly: 1.8.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 1.3.1
+      rc9: 2.1.2
+    optionalDependencies:
+      magicast: 0.3.5
+
+  c12@3.3.1(magicast@0.3.5):
+    dependencies:
+      chokidar: 4.0.3
+      confbox: 0.2.2
+      defu: 6.1.4
+      dotenv: 17.2.3
+      exsolve: 1.0.7
+      giget: 2.0.0
+      jiti: 2.6.1
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 2.0.0
+      pkg-types: 2.3.0
+      rc9: 2.1.2
+    optionalDependencies:
+      magicast: 0.3.5
+
+  cac@6.7.14: {}
+
+  cache-content-type@1.0.1:
+    dependencies:
+      mime-types: 2.1.35
+      ylru: 1.4.0
+
   call-bind-apply-helpers@1.0.2:
     dependencies:
       es-errors: 1.3.0
@@ -3635,13 +8698,22 @@ snapshots:
 
   camelcase@5.3.1: {}
 
-  caniuse-lite@1.0.30001701: {}
+  caniuse-api@3.0.0:
+    dependencies:
+      browserslist: 4.27.0
+      caniuse-lite: 1.0.30001751
+      lodash.memoize: 4.1.2
+      lodash.uniq: 4.5.0
+
+  caniuse-lite@1.0.30001751: {}
 
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  change-case@5.4.4: {}
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -3654,48 +8726,222 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
+  chownr@2.0.0: {}
+
+  chownr@3.0.0: {}
+
+  ci-info@4.3.1: {}
+
+  citty@0.1.6:
+    dependencies:
+      consola: 3.4.2
+
   class-variance-authority@0.7.1:
     dependencies:
       clsx: 2.1.1
 
+  clean-regexp@1.0.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
+  clipboardy@4.0.0:
+    dependencies:
+      execa: 8.0.1
+      is-wsl: 3.1.0
+      is64bit: 2.0.0
+
+  clipboardy@5.0.0:
+    dependencies:
+      execa: 9.6.0
+      is-wayland: 0.1.0
+      is-wsl: 3.1.0
+      is64bit: 2.0.0
+
   cliui@6.0.0:
     dependencies:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       wrap-ansi: 6.2.0
 
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
   clsx@2.1.1: {}
 
+  cluster-key-slot@1.1.2: {}
+
+  co@4.6.0: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
 
   color-name@1.1.4: {}
 
-  commander@2.20.3:
-    optional: true
+  colord@2.9.3: {}
+
+  commander@11.1.0: {}
+
+  commander@2.20.3: {}
 
   commander@4.1.1: {}
 
+  commander@6.2.1: {}
+
+  comment-parser@1.4.1: {}
+
+  commondir@1.0.1: {}
+
+  compatx@0.2.0: {}
+
+  compress-commons@6.0.2:
+    dependencies:
+      crc-32: 1.2.2
+      crc32-stream: 6.0.0
+      is-stream: 2.0.1
+      normalize-path: 3.0.0
+      readable-stream: 4.7.0
+
   concat-map@0.0.1: {}
 
+  confbox@0.1.8: {}
+
+  confbox@0.2.2: {}
+
+  consola@3.4.2: {}
+
+  content-disposition@0.5.4:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  content-type@1.0.5: {}
+
+  convert-source-map@2.0.0: {}
+
+  cookie-es@1.2.2: {}
+
+  cookie-es@2.0.0: {}
+
+  cookie@1.0.2: {}
+
+  cookies@0.9.1:
+    dependencies:
+      depd: 2.0.0
+      keygrip: 1.1.0
+
   copy-anything@3.0.5:
     dependencies:
       is-what: 4.1.16
 
+  core-js-compat@3.46.0:
+    dependencies:
+      browserslist: 4.27.0
+
+  core-util-is@1.0.3: {}
+
   crc-32@1.2.2: {}
 
+  crc32-stream@6.0.0:
+    dependencies:
+      crc-32: 1.2.2
+      readable-stream: 4.7.0
+
   create-require@1.1.1:
     optional: true
 
+  croner@9.1.0: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
 
+  crossws@0.3.5:
+    dependencies:
+      uncrypto: 0.1.3
+
+  css-declaration-sorter@7.3.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-tree@2.2.1:
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.1
+
+  css-tree@3.1.0:
+    dependencies:
+      mdn-data: 2.12.2
+      source-map-js: 1.2.1
+
+  css-what@6.2.2: {}
+
   cssesc@3.0.0: {}
 
+  cssnano-preset-default@7.0.9(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.27.0
+      css-declaration-sorter: 7.3.0(postcss@8.5.6)
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-calc: 10.1.1(postcss@8.5.6)
+      postcss-colormin: 7.0.4(postcss@8.5.6)
+      postcss-convert-values: 7.0.7(postcss@8.5.6)
+      postcss-discard-comments: 7.0.4(postcss@8.5.6)
+      postcss-discard-duplicates: 7.0.2(postcss@8.5.6)
+      postcss-discard-empty: 7.0.1(postcss@8.5.6)
+      postcss-discard-overridden: 7.0.1(postcss@8.5.6)
+      postcss-merge-longhand: 7.0.5(postcss@8.5.6)
+      postcss-merge-rules: 7.0.6(postcss@8.5.6)
+      postcss-minify-font-values: 7.0.1(postcss@8.5.6)
+      postcss-minify-gradients: 7.0.1(postcss@8.5.6)
+      postcss-minify-params: 7.0.4(postcss@8.5.6)
+      postcss-minify-selectors: 7.0.5(postcss@8.5.6)
+      postcss-normalize-charset: 7.0.1(postcss@8.5.6)
+      postcss-normalize-display-values: 7.0.1(postcss@8.5.6)
+      postcss-normalize-positions: 7.0.1(postcss@8.5.6)
+      postcss-normalize-repeat-style: 7.0.1(postcss@8.5.6)
+      postcss-normalize-string: 7.0.1(postcss@8.5.6)
+      postcss-normalize-timing-functions: 7.0.1(postcss@8.5.6)
+      postcss-normalize-unicode: 7.0.4(postcss@8.5.6)
+      postcss-normalize-url: 7.0.1(postcss@8.5.6)
+      postcss-normalize-whitespace: 7.0.1(postcss@8.5.6)
+      postcss-ordered-values: 7.0.2(postcss@8.5.6)
+      postcss-reduce-initial: 7.0.4(postcss@8.5.6)
+      postcss-reduce-transforms: 7.0.1(postcss@8.5.6)
+      postcss-svgo: 7.1.0(postcss@8.5.6)
+      postcss-unique-selectors: 7.0.4(postcss@8.5.6)
+
+  cssnano-utils@5.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  cssnano@7.1.1(postcss@8.5.6):
+    dependencies:
+      cssnano-preset-default: 7.0.9(postcss@8.5.6)
+      lilconfig: 3.1.3
+      postcss: 8.5.6
+
+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
   csstype@3.1.3: {}
 
   data-view-buffer@1.0.2:
@@ -3716,7 +8962,7 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
-  de-indent@1.0.2: {}
+  db0@0.3.4: {}
 
   debug@3.2.7:
     dependencies:
@@ -3726,9 +8972,24 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  decamelize@1.2.0: {}
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decamelize@1.2.0: {}
+
+  deep-equal@1.0.1: {}
+
+  deep-is@0.1.4: {}
+
+  deepmerge@4.3.1: {}
+
+  default-browser-id@5.0.0: {}
 
-  deep-is@0.1.4: {}
+  default-browser@5.2.1:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.0
 
   define-data-property@1.1.4:
     dependencies:
@@ -3736,6 +8997,10 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  define-lazy-prop@2.0.0: {}
+
+  define-lazy-prop@3.0.0: {}
+
   define-properties@1.2.1:
     dependencies:
       define-data-property: 1.1.4
@@ -3744,13 +9009,33 @@ snapshots:
 
   defu@6.1.4: {}
 
+  delegates@1.0.0: {}
+
+  denque@2.1.0: {}
+
+  depd@1.1.2: {}
+
+  depd@2.0.0: {}
+
+  destr@2.0.5: {}
+
+  destroy@1.2.0: {}
+
   detect-browser@5.3.0: {}
 
+  detect-libc@1.0.3: {}
+
+  detect-libc@2.1.2: {}
+
+  devalue@5.4.2: {}
+
   didyoumean@1.2.2: {}
 
   diff@4.0.2:
     optional: true
 
+  diff@8.0.2: {}
+
   dijkstrajs@1.0.3: {}
 
   dlv@1.1.3: {}
@@ -3759,22 +9044,62 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
+  dot-prop@10.1.0:
+    dependencies:
+      type-fest: 5.1.0
+
+  dotenv@16.6.1: {}
+
+  dotenv@17.2.3: {}
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  duplexer@0.1.2: {}
+
   eastasianwidth@0.2.0: {}
 
+  ee-first@1.1.1: {}
+
   electron-to-chromium@1.5.109: {}
 
+  electron-to-chromium@1.5.241: {}
+
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
 
+  encodeurl@1.0.2: {}
+
+  encodeurl@2.0.0: {}
+
   entities@4.5.0: {}
 
+  error-stack-parser-es@1.0.5: {}
+
+  errx@0.1.0: {}
+
   es-abstract@1.24.0:
     dependencies:
       array-buffer-byte-length: 1.0.2
@@ -3836,6 +9161,8 @@ snapshots:
 
   es-errors@1.3.0: {}
 
+  es-module-lexer@1.7.0: {}
+
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
@@ -3885,10 +9212,61 @@ snapshots:
       '@esbuild/win32-ia32': 0.25.0
       '@esbuild/win32-x64': 0.25.0
 
+  esbuild@0.25.11:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.11
+      '@esbuild/android-arm': 0.25.11
+      '@esbuild/android-arm64': 0.25.11
+      '@esbuild/android-x64': 0.25.11
+      '@esbuild/darwin-arm64': 0.25.11
+      '@esbuild/darwin-x64': 0.25.11
+      '@esbuild/freebsd-arm64': 0.25.11
+      '@esbuild/freebsd-x64': 0.25.11
+      '@esbuild/linux-arm': 0.25.11
+      '@esbuild/linux-arm64': 0.25.11
+      '@esbuild/linux-ia32': 0.25.11
+      '@esbuild/linux-loong64': 0.25.11
+      '@esbuild/linux-mips64el': 0.25.11
+      '@esbuild/linux-ppc64': 0.25.11
+      '@esbuild/linux-riscv64': 0.25.11
+      '@esbuild/linux-s390x': 0.25.11
+      '@esbuild/linux-x64': 0.25.11
+      '@esbuild/netbsd-arm64': 0.25.11
+      '@esbuild/netbsd-x64': 0.25.11
+      '@esbuild/openbsd-arm64': 0.25.11
+      '@esbuild/openbsd-x64': 0.25.11
+      '@esbuild/openharmony-arm64': 0.25.11
+      '@esbuild/sunos-x64': 0.25.11
+      '@esbuild/win32-arm64': 0.25.11
+      '@esbuild/win32-ia32': 0.25.11
+      '@esbuild/win32-x64': 0.25.11
+
   escalade@3.2.0: {}
 
+  escape-html@1.0.3: {}
+
+  escape-string-regexp@1.0.5: {}
+
   escape-string-regexp@4.0.0: {}
 
+  escape-string-regexp@5.0.0: {}
+
+  eslint-config-flat-gitignore@2.1.0(eslint@9.32.0(jiti@2.6.1)):
+    dependencies:
+      '@eslint/compat': 1.3.1(eslint@9.32.0(jiti@2.6.1))
+      eslint: 9.32.0(jiti@2.6.1)
+
+  eslint-flat-config-utils@2.1.4:
+    dependencies:
+      pathe: 2.0.3
+
+  eslint-import-context@0.1.9(unrs-resolver@1.11.1):
+    dependencies:
+      get-tsconfig: 4.13.0
+      stable-hash-x: 0.2.0
+    optionalDependencies:
+      unrs-resolver: 1.11.1
+
   eslint-import-resolver-node@0.3.9:
     dependencies:
       debug: 3.2.7
@@ -3897,17 +9275,47 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint@9.32.0(jiti@1.21.7)):
+  eslint-merge-processors@2.0.0(eslint@9.32.0(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.32.0(jiti@2.6.1)
+
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint@9.32.0(jiti@2.6.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
-      eslint: 9.32.0(jiti@1.21.7)
+      '@typescript-eslint/parser': 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      eslint: 9.32.0(jiti@2.6.1)
+      eslint-import-resolver-node: 0.3.9
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-import-lite@0.3.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.6.1))
+      '@typescript-eslint/types': 8.38.0
+      eslint: 9.32.0(jiti@2.6.1)
+    optionalDependencies:
+      typescript: 5.7.3
+
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint@9.32.0(jiti@2.6.1)):
+    dependencies:
+      '@typescript-eslint/types': 8.38.0
+      comment-parser: 1.4.1
+      debug: 4.4.3
+      eslint: 9.32.0(jiti@2.6.1)
+      eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.3
+      stable-hash-x: 0.2.0
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      '@typescript-eslint/utils': 8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint@9.32.0(jiti@1.21.7)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -3916,9 +9324,9 @@ snapshots:
       array.prototype.flatmap: 1.3.3
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 9.32.0(jiti@1.21.7)
+      eslint: 9.32.0(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint@9.32.0(jiti@1.21.7))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint@9.32.0(jiti@2.6.1))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -3930,37 +9338,111 @@ snapshots:
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
+      '@typescript-eslint/parser': 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-vue@10.3.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint@9.32.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@1.21.7))):
+  eslint-plugin-jsdoc@54.7.0(eslint@9.32.0(jiti@2.6.1)):
+    dependencies:
+      '@es-joy/jsdoccomment': 0.56.0
+      are-docs-informative: 0.0.2
+      comment-parser: 1.4.1
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint: 9.32.0(jiti@2.6.1)
+      espree: 10.4.0
+      esquery: 1.6.0
+      parse-imports-exports: 0.2.4
+      semver: 7.7.3
+      spdx-expression-parse: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-regexp@2.10.0(eslint@9.32.0(jiti@2.6.1)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.1
+      comment-parser: 1.4.1
+      eslint: 9.32.0(jiti@2.6.1)
+      jsdoc-type-pratt-parser: 4.8.0
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+      scslre: 0.3.0
+
+  eslint-plugin-unicorn@60.0.0(eslint@9.32.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@1.21.7))
-      eslint: 9.32.0(jiti@1.21.7)
+      '@babel/helper-validator-identifier': 7.28.5
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.6.1))
+      '@eslint/plugin-kit': 0.3.4
+      change-case: 5.4.4
+      ci-info: 4.3.1
+      clean-regexp: 1.0.0
+      core-js-compat: 3.46.0
+      eslint: 9.32.0(jiti@2.6.1)
+      esquery: 1.6.0
+      find-up-simple: 1.0.1
+      globals: 16.3.0
+      indent-string: 5.0.0
+      is-builtin-module: 5.0.0
+      jsesc: 3.1.0
+      pluralize: 8.0.0
+      regexp-tree: 0.1.27
+      regjsparser: 0.12.0
+      semver: 7.7.3
+      strip-indent: 4.1.1
+
+  eslint-plugin-vue@10.3.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@2.6.1))):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.6.1))
+      eslint: 9.32.0(jiti@2.6.1)
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.7.1
-      vue-eslint-parser: 10.2.0(eslint@9.32.0(jiti@1.21.7))
+      vue-eslint-parser: 10.2.0(eslint@9.32.0(jiti@2.6.1))
+      xml-name-validator: 4.0.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+
+  eslint-plugin-vue@10.5.1(@stylistic/eslint-plugin@5.5.0(eslint@9.32.0(jiti@2.6.1)))(@typescript-eslint/parser@8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@2.6.1))):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.6.1))
+      eslint: 9.32.0(jiti@2.6.1)
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.1.2
+      semver: 7.7.3
+      vue-eslint-parser: 10.2.0(eslint@9.32.0(jiti@2.6.1))
       xml-name-validator: 4.0.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
+      '@stylistic/eslint-plugin': 5.5.0(eslint@9.32.0(jiti@2.6.1))
+      '@typescript-eslint/parser': 8.46.2(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+
+  eslint-processor-vue-blocks@2.0.0(@vue/compiler-sfc@3.5.22)(eslint@9.32.0(jiti@2.6.1)):
+    dependencies:
+      '@vue/compiler-sfc': 3.5.22
+      eslint: 9.32.0(jiti@2.6.1)
 
   eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
+  eslint-typegen@2.3.0(eslint@9.32.0(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.32.0(jiti@2.6.1)
+      json-schema-to-typescript-lite: 15.0.0
+      ohash: 2.0.11
+
   eslint-visitor-keys@3.4.3: {}
 
   eslint-visitor-keys@4.2.1: {}
 
-  eslint@9.32.0(jiti@1.21.7):
+  eslint@9.32.0(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.21.0
       '@eslint/config-helpers': 0.3.0
@@ -3996,7 +9478,7 @@ snapshots:
       natural-compare: 1.4.0
       optionator: 0.9.4
     optionalDependencies:
-      jiti: 1.21.7
+      jiti: 2.6.1
     transitivePeerDependencies:
       - supports-color
 
@@ -4018,8 +9500,14 @@ snapshots:
 
   estree-walker@2.0.2: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.6
+
   esutils@2.0.3: {}
 
+  etag@1.8.1: {}
+
   ethereum-cryptography@2.2.1:
     dependencies:
       '@noble/curves': 1.4.2
@@ -4029,8 +9517,43 @@ snapshots:
 
   event-target-shim@5.0.1: {}
 
+  events-universal@1.0.1:
+    dependencies:
+      bare-events: 2.8.1
+    transitivePeerDependencies:
+      - bare-abort-controller
+
   events@3.3.0: {}
 
+  execa@8.0.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+
+  execa@9.6.0:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.1
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.3.0
+      signal-exit: 4.1.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.1.2
+
+  exsolve@1.0.7: {}
+
   extension-port-stream@3.0.0:
     dependencies:
       readable-stream: 4.7.0
@@ -4043,6 +9566,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-fifo@1.3.2: {}
+
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -4055,20 +9580,34 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
+  fast-npm-meta@0.4.7: {}
+
   fast-safe-stringify@2.1.1: {}
 
   fastq@1.19.1:
     dependencies:
       reusify: 1.1.0
 
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
 
+  file-uri-to-path@1.0.0: {}
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
+  find-up-simple@1.0.1: {}
+
   find-up@4.1.0:
     dependencies:
       locate-path: 5.0.0
@@ -4079,6 +9618,12 @@ snapshots:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
+  find-up@7.0.0:
+    dependencies:
+      locate-path: 7.2.0
+      path-exists: 5.0.0
+      unicorn-magic: 0.1.0
+
   flat-cache@4.0.1:
     dependencies:
       flatted: 3.3.3
@@ -4097,6 +9642,23 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
+  fresh@0.5.2: {}
+
+  fresh@2.0.0: {}
+
+  fs-extra@9.1.0:
+    dependencies:
+      at-least-node: 1.0.0
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs-minipass@2.1.0:
+    dependencies:
+      minipass: 3.3.6
+
+  fs.realpath@1.0.0: {}
+
   fsevents@2.3.3:
     optional: true
 
@@ -4113,6 +9675,10 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
+  fuse.js@7.1.0: {}
+
+  gensync@1.0.0-beta.2: {}
+
   get-caller-file@2.0.5: {}
 
   get-intrinsic@1.3.0:
@@ -4128,21 +9694,57 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
+  get-port-please@3.2.0: {}
+
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
+  get-stream@8.0.1: {}
+
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
+
   get-symbol-description@1.1.0:
     dependencies:
       call-bound: 1.0.4
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
 
-  get-tsconfig@4.10.0:
+  get-tsconfig@4.13.0:
     dependencies:
       resolve-pkg-maps: 1.0.0
-    optional: true
+
+  giget@1.2.5:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      defu: 6.1.4
+      node-fetch-native: 1.6.7
+      nypm: 0.5.4
+      pathe: 2.0.3
+      tar: 6.2.1
+
+  giget@2.0.0:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      defu: 6.1.4
+      node-fetch-native: 1.6.7
+      nypm: 0.6.2
+      pathe: 2.0.3
+
+  git-up@8.1.1:
+    dependencies:
+      is-ssh: 1.4.1
+      parse-url: 9.2.0
+
+  git-url-parse@16.1.0:
+    dependencies:
+      git-up: 8.1.1
 
   glob-parent@5.1.2:
     dependencies:
@@ -4161,6 +9763,19 @@ snapshots:
       package-json-from-dist: 1.0.1
       path-scurry: 1.11.1
 
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  global-directory@4.0.1:
+    dependencies:
+      ini: 4.1.1
+
   globals@14.0.0: {}
 
   globals@16.3.0: {}
@@ -4170,10 +9785,37 @@ snapshots:
       define-properties: 1.2.1
       gopd: 1.2.0
 
+  globby@15.0.0:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      fast-glob: 3.3.3
+      ignore: 7.0.5
+      path-type: 6.0.0
+      slash: 5.1.0
+      unicorn-magic: 0.3.0
+
   gopd@1.2.0: {}
 
+  graceful-fs@4.2.11: {}
+
   graphemer@1.4.0: {}
 
+  gzip-size@7.0.0:
+    dependencies:
+      duplexer: 0.1.2
+
+  h3@1.15.4:
+    dependencies:
+      cookie-es: 1.2.2
+      crossws: 0.3.5
+      defu: 6.1.4
+      destr: 2.0.5
+      iron-webcrypto: 1.2.1
+      node-mock-http: 1.0.3
+      radix3: 1.1.2
+      ufo: 1.6.1
+      uncrypto: 0.1.3
+
   has-bigints@1.1.0: {}
 
   has-flag@4.0.0: {}
@@ -4196,31 +9838,109 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
-  he@1.2.0: {}
-
   hookable@5.5.3: {}
 
+  http-assert@1.5.0:
+    dependencies:
+      deep-equal: 1.0.1
+      http-errors: 1.8.1
+
+  http-errors@1.6.3:
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.3
+      setprototypeof: 1.1.0
+      statuses: 1.5.0
+
+  http-errors@1.8.1:
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 1.5.0
+      toidentifier: 1.0.1
+
+  http-errors@2.0.0:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.1
+      toidentifier: 1.0.1
+
+  http-shutdown@1.2.2: {}
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  httpxy@0.1.7: {}
+
+  human-signals@5.0.0: {}
+
+  human-signals@8.0.1: {}
+
   ieee754@1.2.1: {}
 
   ignore@5.3.2: {}
 
   ignore@7.0.5: {}
 
+  image-meta@0.2.2: {}
+
   import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
+  impound@1.0.0:
+    dependencies:
+      exsolve: 1.0.7
+      mocked-exports: 0.1.1
+      pathe: 2.0.3
+      unplugin: 2.3.10
+      unplugin-utils: 0.2.5
+
   imurmurhash@0.1.4: {}
 
+  indent-string@5.0.0: {}
+
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+
+  inherits@2.0.3: {}
+
   inherits@2.0.4: {}
 
+  ini@4.1.1: {}
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  ioredis@5.8.2:
+    dependencies:
+      '@ioredis/commands': 1.4.0
+      cluster-key-slot: 1.1.2
+      debug: 4.4.3
+      denque: 2.1.0
+      lodash.defaults: 4.2.0
+      lodash.isarguments: 3.1.0
+      redis-errors: 1.2.0
+      redis-parser: 3.0.0
+      standard-as-callback: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  iron-webcrypto@1.2.1: {}
+
   is-array-buffer@3.0.5:
     dependencies:
       call-bind: 1.0.8
@@ -4248,6 +9968,10 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
+  is-builtin-module@5.0.0:
+    dependencies:
+      builtin-modules: 5.0.0
+
   is-callable@1.2.7: {}
 
   is-core-module@2.16.1:
@@ -4265,6 +9989,10 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
+  is-docker@2.2.1: {}
+
+  is-docker@3.0.0: {}
+
   is-extglob@2.1.1: {}
 
   is-finalizationregistry@1.1.1:
@@ -4284,8 +10012,19 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
+  is-installed-globally@1.0.0:
+    dependencies:
+      global-directory: 4.0.1
+      is-path-inside: 4.0.0
+
   is-map@2.0.3: {}
 
+  is-module@1.0.0: {}
+
   is-negative-zero@2.0.3: {}
 
   is-number-object@1.1.1:
@@ -4295,6 +10034,14 @@ snapshots:
 
   is-number@7.0.0: {}
 
+  is-path-inside@4.0.0: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-reference@1.2.1:
+    dependencies:
+      '@types/estree': 1.0.8
+
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -4308,8 +10055,16 @@ snapshots:
     dependencies:
       call-bound: 1.0.4
 
+  is-ssh@1.4.1:
+    dependencies:
+      protocols: 2.0.2
+
   is-stream@2.0.1: {}
 
+  is-stream@3.0.0: {}
+
+  is-stream@4.0.1: {}
+
   is-string@1.1.1:
     dependencies:
       call-bound: 1.0.4
@@ -4325,6 +10080,10 @@ snapshots:
     dependencies:
       which-typed-array: 1.1.19
 
+  is-unicode-supported@2.1.0: {}
+
+  is-wayland@0.1.0: {}
+
   is-weakmap@2.0.2: {}
 
   is-weakref@1.1.1:
@@ -4338,10 +10097,26 @@ snapshots:
 
   is-what@4.1.16: {}
 
+  is-wsl@2.2.0:
+    dependencies:
+      is-docker: 2.2.1
+
+  is-wsl@3.1.0:
+    dependencies:
+      is-inside-container: 1.0.0
+
+  is64bit@2.0.0:
+    dependencies:
+      system-architecture: 0.1.0
+
+  isarray@1.0.0: {}
+
   isarray@2.0.5: {}
 
   isexe@2.0.0: {}
 
+  isexe@3.1.1: {}
+
   jackspeak@3.4.3:
     dependencies:
       '@isaacs/cliui': 8.0.2
@@ -4350,12 +10125,31 @@ snapshots:
 
   jiti@1.21.7: {}
 
+  jiti@2.6.1: {}
+
+  js-tokens@4.0.0: {}
+
+  js-tokens@9.0.1: {}
+
   js-yaml@4.1.0:
     dependencies:
       argparse: 2.0.1
 
+  jsdoc-type-pratt-parser@4.8.0: {}
+
+  jsdoc-type-pratt-parser@5.1.1: {}
+
+  jsesc@3.0.2: {}
+
+  jsesc@3.1.0: {}
+
   json-buffer@3.0.1: {}
 
+  json-schema-to-typescript-lite@15.0.0:
+    dependencies:
+      '@apidevtools/json-schema-ref-parser': 14.2.1(@types/json-schema@7.0.15)
+      '@types/json-schema': 7.0.15
+
   json-schema-traverse@0.4.1: {}
 
   json-stable-stringify-without-jsonify@1.0.1: {}
@@ -4364,10 +10158,89 @@ snapshots:
     dependencies:
       minimist: 1.2.8
 
+  json5@2.2.3: {}
+
+  jsonfile@6.2.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  keygrip@1.1.0:
+    dependencies:
+      tsscmp: 1.0.6
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
 
+  kleur@3.0.3: {}
+
+  kleur@4.1.5: {}
+
+  klona@2.0.6: {}
+
+  knitwork@1.2.0: {}
+
+  koa-compose@4.1.0: {}
+
+  koa-convert@2.0.0:
+    dependencies:
+      co: 4.6.0
+      koa-compose: 4.1.0
+
+  koa-send@5.0.1:
+    dependencies:
+      debug: 4.4.3
+      http-errors: 1.8.1
+      resolve-path: 1.4.0
+    transitivePeerDependencies:
+      - supports-color
+
+  koa-static@5.0.0:
+    dependencies:
+      debug: 3.2.7
+      koa-send: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  koa@2.16.3:
+    dependencies:
+      accepts: 1.3.8
+      cache-content-type: 1.0.1
+      content-disposition: 0.5.4
+      content-type: 1.0.5
+      cookies: 0.9.1
+      debug: 4.4.3
+      delegates: 1.0.0
+      depd: 2.0.0
+      destroy: 1.2.0
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      fresh: 0.5.2
+      http-assert: 1.5.0
+      http-errors: 1.8.1
+      is-generator-function: 1.1.0
+      koa-compose: 4.1.0
+      koa-convert: 2.0.0
+      on-finished: 2.4.1
+      only: 0.0.2
+      parseurl: 1.3.3
+      statuses: 1.5.0
+      type-is: 1.6.18
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  launch-editor@2.12.0:
+    dependencies:
+      picocolors: 1.1.1
+      shell-quote: 1.8.3
+
+  lazystream@1.0.1:
+    dependencies:
+      readable-stream: 2.3.8
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -4377,6 +10250,35 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  listhen@1.9.0:
+    dependencies:
+      '@parcel/watcher': 2.5.1
+      '@parcel/watcher-wasm': 2.5.1
+      citty: 0.1.6
+      clipboardy: 4.0.0
+      consola: 3.4.2
+      crossws: 0.3.5
+      defu: 6.1.4
+      get-port-please: 3.2.0
+      h3: 1.15.4
+      http-shutdown: 1.2.2
+      jiti: 2.6.1
+      mlly: 1.8.0
+      node-forge: 1.3.1
+      pathe: 1.1.2
+      std-env: 3.10.0
+      ufo: 1.6.1
+      untun: 0.1.3
+      uqr: 0.1.2
+
+  load-tsconfig@0.2.5: {}
+
+  local-pkg@1.1.2:
+    dependencies:
+      mlly: 1.8.0
+      pkg-types: 2.3.0
+      quansync: 0.2.11
+
   locate-path@5.0.0:
     dependencies:
       p-locate: 4.1.0
@@ -4385,27 +10287,79 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
+  locate-path@7.2.0:
+    dependencies:
+      p-locate: 6.0.0
+
+  lodash.defaults@4.2.0: {}
+
+  lodash.isarguments@3.1.0: {}
+
+  lodash.memoize@4.1.2: {}
+
   lodash.merge@4.6.2: {}
 
+  lodash.uniq@4.5.0: {}
+
+  lodash@4.17.21: {}
+
   long@5.3.2: {}
 
   lru-cache@10.4.3: {}
 
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
   lucide-vue-next@0.477.0(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       vue: 3.5.13(typescript@5.7.3)
 
+  magic-regexp@0.10.0:
+    dependencies:
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      regexp-tree: 0.1.27
+      type-level-regexp: 0.1.17
+      ufo: 1.6.1
+      unplugin: 2.3.10
+
+  magic-string-ast@1.0.3:
+    dependencies:
+      magic-string: 0.30.21
+
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  magicast@0.3.5:
+    dependencies:
+      '@babel/parser': 7.26.9
+      '@babel/types': 7.26.9
+      source-map-js: 1.2.1
+
   make-error@1.3.6:
     optional: true
 
   math-intrinsics@1.1.0: {}
 
+  mdn-data@2.0.28: {}
+
+  mdn-data@2.12.2: {}
+
+  media-typer@0.3.0: {}
+
+  merge-stream@2.0.0: {}
+
   merge2@1.4.1: {}
 
+  methods@1.1.2: {}
+
   micro-ftch@0.3.1: {}
 
   micromatch@4.0.8:
@@ -4413,20 +10367,70 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mime-db@1.52.0: {}
+
+  mime-db@1.54.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mime-types@3.0.1:
+    dependencies:
+      mime-db: 1.54.0
+
+  mime@3.0.0: {}
+
+  mime@4.1.0: {}
+
+  mimic-fn@4.0.0: {}
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.12
 
+  minimatch@5.1.6:
+    dependencies:
+      brace-expansion: 2.0.1
+
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.1
 
   minimist@1.2.8: {}
 
+  minipass@3.3.6:
+    dependencies:
+      yallist: 4.0.0
+
+  minipass@5.0.0: {}
+
   minipass@7.1.2: {}
 
+  minizlib@2.1.2:
+    dependencies:
+      minipass: 3.3.6
+      yallist: 4.0.0
+
+  minizlib@3.1.0:
+    dependencies:
+      minipass: 7.1.2
+
   mitt@3.0.1: {}
 
+  mkdirp@1.0.4: {}
+
+  mlly@1.8.0:
+    dependencies:
+      acorn: 8.15.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.1
+
+  mocked-exports@0.1.1: {}
+
+  mrmime@2.0.1: {}
+
   ms@2.1.3: {}
 
   muggle-string@0.4.1: {}
@@ -4437,20 +10441,298 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
+  nanoid@3.3.11: {}
+
   nanoid@3.3.8: {}
 
+  nanoid@5.1.6: {}
+
+  nanotar@0.2.0: {}
+
+  napi-postinstall@0.3.4: {}
+
   natural-compare@1.4.0: {}
 
+  negotiator@0.6.3: {}
+
+  nitropack@2.12.8:
+    dependencies:
+      '@cloudflare/kv-asset-handler': 0.4.0
+      '@rollup/plugin-alias': 5.1.1(rollup@4.52.5)
+      '@rollup/plugin-commonjs': 28.0.9(rollup@4.52.5)
+      '@rollup/plugin-inject': 5.0.5(rollup@4.52.5)
+      '@rollup/plugin-json': 6.1.0(rollup@4.52.5)
+      '@rollup/plugin-node-resolve': 16.0.3(rollup@4.52.5)
+      '@rollup/plugin-replace': 6.0.2(rollup@4.52.5)
+      '@rollup/plugin-terser': 0.4.4(rollup@4.52.5)
+      '@vercel/nft': 0.30.3(rollup@4.52.5)
+      archiver: 7.0.1
+      c12: 3.3.1(magicast@0.3.5)
+      chokidar: 4.0.3
+      citty: 0.1.6
+      compatx: 0.2.0
+      confbox: 0.2.2
+      consola: 3.4.2
+      cookie-es: 2.0.0
+      croner: 9.1.0
+      crossws: 0.3.5
+      db0: 0.3.4
+      defu: 6.1.4
+      destr: 2.0.5
+      dot-prop: 10.1.0
+      esbuild: 0.25.11
+      escape-string-regexp: 5.0.0
+      etag: 1.8.1
+      exsolve: 1.0.7
+      globby: 15.0.0
+      gzip-size: 7.0.0
+      h3: 1.15.4
+      hookable: 5.5.3
+      httpxy: 0.1.7
+      ioredis: 5.8.2
+      jiti: 2.6.1
+      klona: 2.0.6
+      knitwork: 1.2.0
+      listhen: 1.9.0
+      magic-string: 0.30.21
+      magicast: 0.3.5
+      mime: 4.1.0
+      mlly: 1.8.0
+      node-fetch-native: 1.6.7
+      node-mock-http: 1.0.3
+      ofetch: 1.5.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 2.0.0
+      pkg-types: 2.3.0
+      pretty-bytes: 7.1.0
+      radix3: 1.1.2
+      rollup: 4.52.5
+      rollup-plugin-visualizer: 6.0.5(rollup@4.52.5)
+      scule: 1.3.0
+      semver: 7.7.3
+      serve-placeholder: 2.0.2
+      serve-static: 2.2.0
+      source-map: 0.7.6
+      std-env: 3.10.0
+      ufo: 1.6.1
+      ultrahtml: 1.6.0
+      uncrypto: 0.1.3
+      unctx: 2.4.1
+      unenv: 2.0.0-rc.21
+      unimport: 5.5.0
+      unplugin-utils: 0.3.1
+      unstorage: 1.17.1(db0@0.3.4)(ioredis@5.8.2)
+      untyped: 2.0.0
+      unwasm: 0.3.11
+      youch: 4.1.0-beta.11
+      youch-core: 0.3.3
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bare-abort-controller
+      - better-sqlite3
+      - drizzle-orm
+      - encoding
+      - idb-keyval
+      - mysql2
+      - react-native-b4a
+      - rolldown
+      - sqlite3
+      - supports-color
+      - uploadthing
+
+  node-addon-api@7.1.1: {}
+
+  node-fetch-native@1.6.7: {}
+
+  node-fetch@2.7.0:
+    dependencies:
+      whatwg-url: 5.0.0
+
+  node-forge@1.3.1: {}
+
+  node-gyp-build@4.8.4: {}
+
+  node-mock-http@1.0.3: {}
+
   node-releases@2.0.19: {}
 
+  node-releases@2.0.26: {}
+
+  nopt@8.1.0:
+    dependencies:
+      abbrev: 3.0.1
+
   normalize-path@3.0.0: {}
 
   normalize-range@0.1.2: {}
 
+  npm-run-path@5.3.0:
+    dependencies:
+      path-key: 4.0.0
+
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
 
+  nuxt@4.2.0(@parcel/watcher@2.5.1)(@types/node@22.13.9)(@vue/compiler-sfc@3.5.22)(db0@0.3.4)(eslint@9.32.0(jiti@2.6.1))(ioredis@5.8.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.5)(terser@5.39.0)(tsx@4.19.3)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue-tsc@3.1.2(typescript@5.7.3))(yaml@2.8.1):
+    dependencies:
+      '@dxup/nuxt': 0.2.0(magicast@0.3.5)
+      '@nuxt/cli': 3.29.3(magicast@0.3.5)
+      '@nuxt/devtools': 2.7.0(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.22(typescript@5.7.3))
+      '@nuxt/kit': 4.2.0(magicast@0.3.5)
+      '@nuxt/nitro-server': 4.2.0(db0@0.3.4)(ioredis@5.8.2)(magicast@0.3.5)(nuxt@4.2.0(@parcel/watcher@2.5.1)(@types/node@22.13.9)(@vue/compiler-sfc@3.5.22)(db0@0.3.4)(eslint@9.32.0(jiti@2.6.1))(ioredis@5.8.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.5)(terser@5.39.0)(tsx@4.19.3)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue-tsc@3.1.2(typescript@5.7.3))(yaml@2.8.1))(typescript@5.7.3)
+      '@nuxt/schema': 4.2.0
+      '@nuxt/telemetry': 2.6.6(magicast@0.3.5)
+      '@nuxt/vite-builder': 4.2.0(@types/node@22.13.9)(eslint@9.32.0(jiti@2.6.1))(magicast@0.3.5)(nuxt@4.2.0(@parcel/watcher@2.5.1)(@types/node@22.13.9)(@vue/compiler-sfc@3.5.22)(db0@0.3.4)(eslint@9.32.0(jiti@2.6.1))(ioredis@5.8.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.5)(terser@5.39.0)(tsx@4.19.3)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue-tsc@3.1.2(typescript@5.7.3))(yaml@2.8.1))(optionator@0.9.4)(rollup@4.52.5)(terser@5.39.0)(tsx@4.19.3)(typescript@5.7.3)(vue-tsc@3.1.2(typescript@5.7.3))(vue@3.5.22(typescript@5.7.3))(yaml@2.8.1)
+      '@unhead/vue': 2.0.19(vue@3.5.22(typescript@5.7.3))
+      '@vue/shared': 3.5.22
+      c12: 3.3.1(magicast@0.3.5)
+      chokidar: 4.0.3
+      compatx: 0.2.0
+      consola: 3.4.2
+      cookie-es: 2.0.0
+      defu: 6.1.4
+      destr: 2.0.5
+      devalue: 5.4.2
+      errx: 0.1.0
+      escape-string-regexp: 5.0.0
+      exsolve: 1.0.7
+      h3: 1.15.4
+      hookable: 5.5.3
+      ignore: 7.0.5
+      impound: 1.0.0
+      jiti: 2.6.1
+      klona: 2.0.6
+      knitwork: 1.2.0
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      nanotar: 0.2.0
+      nypm: 0.6.2
+      ofetch: 1.5.0
+      ohash: 2.0.11
+      on-change: 6.0.1
+      oxc-minify: 0.95.0
+      oxc-parser: 0.95.0
+      oxc-transform: 0.95.0
+      oxc-walker: 0.5.2(oxc-parser@0.95.0)
+      pathe: 2.0.3
+      perfect-debounce: 2.0.0
+      pkg-types: 2.3.0
+      radix3: 1.1.2
+      scule: 1.3.0
+      semver: 7.7.3
+      std-env: 3.10.0
+      tinyglobby: 0.2.15
+      ufo: 1.6.1
+      ultrahtml: 1.6.0
+      uncrypto: 0.1.3
+      unctx: 2.4.1
+      unimport: 5.5.0
+      unplugin: 2.3.10
+      unplugin-vue-router: 0.16.0(@vue/compiler-sfc@3.5.22)(typescript@5.7.3)(vue-router@4.6.3(vue@3.5.22(typescript@5.7.3)))(vue@3.5.22(typescript@5.7.3))
+      untyped: 2.0.0
+      vue: 3.5.22(typescript@5.7.3)
+      vue-router: 4.6.3(vue@3.5.22(typescript@5.7.3))
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+      '@types/node': 22.13.9
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@biomejs/biome'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - '@vue/compiler-sfc'
+      - aws4fetch
+      - bare-abort-controller
+      - better-sqlite3
+      - bufferutil
+      - db0
+      - drizzle-orm
+      - encoding
+      - eslint
+      - idb-keyval
+      - ioredis
+      - less
+      - lightningcss
+      - magicast
+      - meow
+      - mysql2
+      - optionator
+      - oxlint
+      - react-native-b4a
+      - rolldown
+      - rollup
+      - sass
+      - sass-embedded
+      - sqlite3
+      - stylelint
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - vite
+      - vls
+      - vti
+      - vue-tsc
+      - xml2js
+      - yaml
+
+  nypm@0.5.4:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      tinyexec: 0.3.2
+      ufo: 1.6.1
+
+  nypm@0.6.2:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      tinyexec: 1.0.1
+
   object-assign@4.1.1: {}
 
   object-hash@3.0.0: {}
@@ -4488,12 +10770,50 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  ofetch@1.5.0:
+    dependencies:
+      destr: 2.0.5
+      node-fetch-native: 1.6.7
+      ufo: 1.6.1
+
   ohash@1.1.6: {}
 
+  ohash@2.0.11: {}
+
+  on-change@6.0.1: {}
+
+  on-finished@2.4.1:
+    dependencies:
+      ee-first: 1.1.1
+
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
 
+  onetime@6.0.0:
+    dependencies:
+      mimic-fn: 4.0.0
+
+  only@0.0.2: {}
+
+  open@10.2.0:
+    dependencies:
+      default-browser: 5.2.1
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      wsl-utils: 0.1.0
+
+  open@7.4.2:
+    dependencies:
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+
+  open@8.4.2:
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -4509,6 +10829,67 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
+  oxc-minify@0.95.0:
+    optionalDependencies:
+      '@oxc-minify/binding-android-arm64': 0.95.0
+      '@oxc-minify/binding-darwin-arm64': 0.95.0
+      '@oxc-minify/binding-darwin-x64': 0.95.0
+      '@oxc-minify/binding-freebsd-x64': 0.95.0
+      '@oxc-minify/binding-linux-arm-gnueabihf': 0.95.0
+      '@oxc-minify/binding-linux-arm-musleabihf': 0.95.0
+      '@oxc-minify/binding-linux-arm64-gnu': 0.95.0
+      '@oxc-minify/binding-linux-arm64-musl': 0.95.0
+      '@oxc-minify/binding-linux-riscv64-gnu': 0.95.0
+      '@oxc-minify/binding-linux-s390x-gnu': 0.95.0
+      '@oxc-minify/binding-linux-x64-gnu': 0.95.0
+      '@oxc-minify/binding-linux-x64-musl': 0.95.0
+      '@oxc-minify/binding-wasm32-wasi': 0.95.0
+      '@oxc-minify/binding-win32-arm64-msvc': 0.95.0
+      '@oxc-minify/binding-win32-x64-msvc': 0.95.0
+
+  oxc-parser@0.95.0:
+    dependencies:
+      '@oxc-project/types': 0.95.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm64': 0.95.0
+      '@oxc-parser/binding-darwin-arm64': 0.95.0
+      '@oxc-parser/binding-darwin-x64': 0.95.0
+      '@oxc-parser/binding-freebsd-x64': 0.95.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.95.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.95.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.95.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.95.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.95.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.95.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.95.0
+      '@oxc-parser/binding-linux-x64-musl': 0.95.0
+      '@oxc-parser/binding-wasm32-wasi': 0.95.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.95.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.95.0
+
+  oxc-transform@0.95.0:
+    optionalDependencies:
+      '@oxc-transform/binding-android-arm64': 0.95.0
+      '@oxc-transform/binding-darwin-arm64': 0.95.0
+      '@oxc-transform/binding-darwin-x64': 0.95.0
+      '@oxc-transform/binding-freebsd-x64': 0.95.0
+      '@oxc-transform/binding-linux-arm-gnueabihf': 0.95.0
+      '@oxc-transform/binding-linux-arm-musleabihf': 0.95.0
+      '@oxc-transform/binding-linux-arm64-gnu': 0.95.0
+      '@oxc-transform/binding-linux-arm64-musl': 0.95.0
+      '@oxc-transform/binding-linux-riscv64-gnu': 0.95.0
+      '@oxc-transform/binding-linux-s390x-gnu': 0.95.0
+      '@oxc-transform/binding-linux-x64-gnu': 0.95.0
+      '@oxc-transform/binding-linux-x64-musl': 0.95.0
+      '@oxc-transform/binding-wasm32-wasi': 0.95.0
+      '@oxc-transform/binding-win32-arm64-msvc': 0.95.0
+      '@oxc-transform/binding-win32-x64-msvc': 0.95.0
+
+  oxc-walker@0.5.2(oxc-parser@0.95.0):
+    dependencies:
+      magic-regexp: 0.10.0
+      oxc-parser: 0.95.0
+
   p-limit@2.3.0:
     dependencies:
       p-try: 2.2.0
@@ -4517,6 +10898,10 @@ snapshots:
     dependencies:
       yocto-queue: 0.1.0
 
+  p-limit@4.0.0:
+    dependencies:
+      yocto-queue: 1.2.1
+
   p-locate@4.1.0:
     dependencies:
       p-limit: 2.3.0
@@ -4525,20 +10910,51 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
+  p-locate@6.0.0:
+    dependencies:
+      p-limit: 4.0.0
+
   p-try@2.2.0: {}
 
   package-json-from-dist@1.0.1: {}
 
+  package-manager-detector@1.5.0: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
 
+  parse-imports-exports@0.2.4:
+    dependencies:
+      parse-statements: 1.0.11
+
+  parse-ms@4.0.0: {}
+
+  parse-path@7.1.0:
+    dependencies:
+      protocols: 2.0.2
+
+  parse-statements@1.0.11: {}
+
+  parse-url@9.2.0:
+    dependencies:
+      '@types/parse-path': 7.1.0
+      parse-path: 7.1.0
+
+  parseurl@1.3.3: {}
+
   path-browserify@1.0.1: {}
 
   path-exists@4.0.0: {}
 
+  path-exists@5.0.0: {}
+
+  path-is-absolute@1.0.1: {}
+
   path-key@3.1.1: {}
 
+  path-key@4.0.0: {}
+
   path-parse@1.0.7: {}
 
   path-scurry@1.11.1:
@@ -4546,8 +10962,18 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
+  path-to-regexp@6.3.0: {}
+
+  path-type@6.0.0: {}
+
+  pathe@1.1.2: {}
+
+  pathe@2.0.3: {}
+
   perfect-debounce@1.0.0: {}
 
+  perfect-debounce@2.0.0: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -4556,7 +10982,7 @@ snapshots:
 
   pify@2.3.0: {}
 
-  pinia@3.0.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)):
+  pinia@3.0.3(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@vue/devtools-api': 7.7.2
       vue: 3.5.13(typescript@5.7.3)
@@ -4565,12 +10991,70 @@ snapshots:
 
   pirates@4.0.6: {}
 
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.0
+      pathe: 2.0.3
+
+  pkg-types@2.3.0:
+    dependencies:
+      confbox: 0.2.2
+      exsolve: 1.0.7
+      pathe: 2.0.3
+
+  pluralize@8.0.0: {}
+
   pngjs@5.0.0: {}
 
   pony-cause@2.1.11: {}
 
+  portfinder@1.0.38:
+    dependencies:
+      async: 3.2.6
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   possible-typed-array-names@1.1.0: {}
 
+  postcss-calc@10.1.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+      postcss-value-parser: 4.2.0
+
+  postcss-colormin@7.0.4(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.27.0
+      caniuse-api: 3.0.0
+      colord: 2.9.3
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-convert-values@7.0.7(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.27.0
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-discard-comments@7.0.4(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+
+  postcss-discard-duplicates@7.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-discard-empty@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-discard-overridden@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
   postcss-import@15.1.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
@@ -4591,16 +11075,140 @@ snapshots:
       postcss: 8.5.3
       ts-node: 10.9.2(@swc/core@1.3.78(@swc/helpers@0.5.15))(@types/node@22.13.9)(typescript@5.7.3)
 
+  postcss-merge-longhand@7.0.5(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      stylehacks: 7.0.6(postcss@8.5.6)
+
+  postcss-merge-rules@7.0.6(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.27.0
+      caniuse-api: 3.0.0
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+
+  postcss-minify-font-values@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-gradients@7.0.1(postcss@8.5.6):
+    dependencies:
+      colord: 2.9.3
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-params@7.0.4(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.27.0
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-selectors@7.0.5(postcss@8.5.6):
+    dependencies:
+      cssesc: 3.0.0
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+
   postcss-nested@6.2.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
       postcss-selector-parser: 6.1.2
 
+  postcss-nesting@13.0.2(postcss@8.5.6):
+    dependencies:
+      '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.0)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0)
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+
+  postcss-normalize-charset@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-normalize-display-values@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-positions@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-repeat-style@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-string@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-timing-functions@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-unicode@7.0.4(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.27.0
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-url@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-whitespace@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-ordered-values@7.0.2(postcss@8.5.6):
+    dependencies:
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-reduce-initial@7.0.4(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.27.0
+      caniuse-api: 3.0.0
+      postcss: 8.5.6
+
+  postcss-reduce-transforms@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
   postcss-selector-parser@6.1.2:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  postcss-selector-parser@7.1.0:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-svgo@7.1.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      svgo: 4.0.0
+
+  postcss-unique-selectors@7.0.4(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+
   postcss-value-parser@4.2.0: {}
 
   postcss@8.5.3:
@@ -4609,10 +11217,29 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   prelude-ls@1.2.1: {}
 
+  pretty-bytes@7.1.0: {}
+
+  pretty-ms@9.3.0:
+    dependencies:
+      parse-ms: 4.0.0
+
+  process-nextick-args@2.0.1: {}
+
   process@0.11.10: {}
 
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
   protobufjs@7.2.5:
     dependencies:
       '@protobufjs/aspromise': 1.1.2
@@ -4628,6 +11255,8 @@ snapshots:
       '@types/node': 22.13.9
       long: 5.3.2
 
+  protocols@2.0.2: {}
+
   punycode@2.3.1: {}
 
   qrcode@1.5.4:
@@ -4636,12 +11265,37 @@ snapshots:
       pngjs: 5.0.0
       yargs: 15.4.1
 
+  quansync@0.2.11: {}
+
   queue-microtask@1.2.3: {}
 
+  radix3@1.1.2: {}
+
+  randombytes@2.1.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  range-parser@1.2.1: {}
+
+  rc9@2.1.2:
+    dependencies:
+      defu: 6.1.4
+      destr: 2.0.5
+
   read-cache@1.0.0:
     dependencies:
       pify: 2.3.0
 
+  readable-stream@2.3.8:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+
   readable-stream@3.6.2:
     dependencies:
       inherits: 2.0.4
@@ -4656,10 +11310,26 @@ snapshots:
       process: 0.11.10
       string_decoder: 1.3.0
 
+  readdir-glob@1.1.3:
+    dependencies:
+      minimatch: 5.1.6
+
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.1
 
+  readdirp@4.1.2: {}
+
+  redis-errors@1.2.0: {}
+
+  redis-parser@3.0.0:
+    dependencies:
+      redis-errors: 1.2.0
+
+  refa@0.12.1:
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -4671,6 +11341,13 @@ snapshots:
       get-proto: 1.0.1
       which-builtin-type: 1.2.1
 
+  regexp-ast-analysis@0.7.1:
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      refa: 0.12.1
+
+  regexp-tree@0.1.27: {}
+
   regexp.prototype.flags@1.5.4:
     dependencies:
       call-bind: 1.0.8
@@ -4680,6 +11357,10 @@ snapshots:
       gopd: 1.2.0
       set-function-name: 2.0.2
 
+  regjsparser@0.12.0:
+    dependencies:
+      jsesc: 3.0.2
+
   reka-ui@2.0.2(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@floating-ui/dom': 1.6.13
@@ -4697,14 +11378,26 @@ snapshots:
       - '@vue/composition-api'
       - typescript
 
+  replace-in-file@6.3.5:
+    dependencies:
+      chalk: 4.1.2
+      glob: 7.2.3
+      yargs: 17.7.2
+
   require-directory@2.1.1: {}
 
   require-main-filename@2.0.0: {}
 
   resolve-from@4.0.0: {}
 
-  resolve-pkg-maps@1.0.0:
-    optional: true
+  resolve-from@5.0.0: {}
+
+  resolve-path@1.4.0:
+    dependencies:
+      http-errors: 1.6.3
+      path-is-absolute: 1.0.1
+
+  resolve-pkg-maps@1.0.0: {}
 
   resolve@1.22.10:
     dependencies:
@@ -4716,6 +11409,15 @@ snapshots:
 
   rfdc@1.4.1: {}
 
+  rollup-plugin-visualizer@6.0.5(rollup@4.52.5):
+    dependencies:
+      open: 8.4.2
+      picomatch: 4.0.3
+      source-map: 0.7.6
+      yargs: 17.7.2
+    optionalDependencies:
+      rollup: 4.52.5
+
   rollup@4.34.9:
     dependencies:
       '@types/estree': 1.0.6
@@ -4741,6 +11443,36 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.34.9
       fsevents: 2.3.3
 
+  rollup@4.52.5:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.52.5
+      '@rollup/rollup-android-arm64': 4.52.5
+      '@rollup/rollup-darwin-arm64': 4.52.5
+      '@rollup/rollup-darwin-x64': 4.52.5
+      '@rollup/rollup-freebsd-arm64': 4.52.5
+      '@rollup/rollup-freebsd-x64': 4.52.5
+      '@rollup/rollup-linux-arm-gnueabihf': 4.52.5
+      '@rollup/rollup-linux-arm-musleabihf': 4.52.5
+      '@rollup/rollup-linux-arm64-gnu': 4.52.5
+      '@rollup/rollup-linux-arm64-musl': 4.52.5
+      '@rollup/rollup-linux-loong64-gnu': 4.52.5
+      '@rollup/rollup-linux-ppc64-gnu': 4.52.5
+      '@rollup/rollup-linux-riscv64-gnu': 4.52.5
+      '@rollup/rollup-linux-riscv64-musl': 4.52.5
+      '@rollup/rollup-linux-s390x-gnu': 4.52.5
+      '@rollup/rollup-linux-x64-gnu': 4.52.5
+      '@rollup/rollup-linux-x64-musl': 4.52.5
+      '@rollup/rollup-openharmony-arm64': 4.52.5
+      '@rollup/rollup-win32-arm64-msvc': 4.52.5
+      '@rollup/rollup-win32-ia32-msvc': 4.52.5
+      '@rollup/rollup-win32-x64-gnu': 4.52.5
+      '@rollup/rollup-win32-x64-msvc': 4.52.5
+      fsevents: 2.3.3
+
+  run-applescript@7.1.0: {}
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -4753,6 +11485,8 @@ snapshots:
       has-symbols: 1.1.0
       isarray: 2.0.5
 
+  safe-buffer@5.1.2: {}
+
   safe-buffer@5.2.1: {}
 
   safe-push-apply@1.0.0:
@@ -4766,10 +11500,57 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
+  sax@1.4.1: {}
+
+  scslre@0.3.0:
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+
+  scule@1.3.0: {}
+
   semver@6.3.1: {}
 
   semver@7.7.1: {}
 
+  semver@7.7.3: {}
+
+  send@1.2.0:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.0
+      mime-types: 3.0.1
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  serialize-javascript@6.0.2:
+    dependencies:
+      randombytes: 2.1.0
+
+  seroval@1.3.2: {}
+
+  serve-placeholder@2.0.2:
+    dependencies:
+      defu: 6.1.4
+
+  serve-static@2.2.0:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.0
+    transitivePeerDependencies:
+      - supports-color
+
   set-blocking@2.0.0: {}
 
   set-function-length@1.2.2:
@@ -4794,12 +11575,18 @@ snapshots:
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
 
+  setprototypeof@1.1.0: {}
+
+  setprototypeof@1.2.0: {}
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
   shebang-regex@3.0.0: {}
 
+  shell-quote@1.8.3: {}
+
   side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -4830,24 +11617,76 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  simple-git@3.28.0:
+    dependencies:
+      '@kwsites/file-exists': 1.1.1
+      '@kwsites/promise-deferred': 1.1.1
+      debug: 4.4.0
+    transitivePeerDependencies:
+      - supports-color
+
+  sirv@3.0.2:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
+  sisteransi@1.0.5: {}
+
+  slash@5.1.0: {}
+
+  smob@1.5.0: {}
+
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
     dependencies:
       buffer-from: 1.1.2
       source-map: 0.6.1
-    optional: true
 
-  source-map@0.6.1:
-    optional: true
+  source-map@0.6.1: {}
+
+  source-map@0.7.6: {}
+
+  spdx-exceptions@2.5.0: {}
+
+  spdx-expression-parse@4.0.0:
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.22
+
+  spdx-license-ids@3.0.22: {}
 
   speakingurl@14.0.1: {}
 
+  srvx@0.8.16: {}
+
+  stable-hash-x@0.2.0: {}
+
+  standard-as-callback@2.1.0: {}
+
+  statuses@1.5.0: {}
+
+  statuses@2.0.1: {}
+
+  statuses@2.0.2: {}
+
+  std-env@3.10.0: {}
+
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
+  streamx@2.23.0:
+    dependencies:
+      events-universal: 1.0.1
+      fast-fifo: 1.3.2
+      text-decoder: 1.2.3
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -4883,6 +11722,10 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  string_decoder@1.1.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
   string_decoder@1.3.0:
     dependencies:
       safe-buffer: 5.2.1
@@ -4897,8 +11740,26 @@ snapshots:
 
   strip-bom@3.0.0: {}
 
+  strip-final-newline@3.0.0: {}
+
+  strip-final-newline@4.0.0: {}
+
+  strip-indent@4.1.1: {}
+
   strip-json-comments@3.1.1: {}
 
+  strip-literal@3.1.0:
+    dependencies:
+      js-tokens: 9.0.1
+
+  structured-clone-es@1.0.0: {}
+
+  stylehacks@7.0.6(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.27.0
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.8
@@ -4913,12 +11774,42 @@ snapshots:
     dependencies:
       copy-anything: 3.0.5
 
+  supports-color@10.2.2: {}
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svgo@4.0.0:
+    dependencies:
+      commander: 11.1.0
+      css-select: 5.2.2
+      css-tree: 3.1.0
+      css-what: 6.2.2
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.4.1
+
+  system-architecture@0.1.0: {}
+
+  tagged-tag@1.0.0: {}
+
+  tailwind-config-viewer@2.0.4(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.3.78(@swc/helpers@0.5.15))(@types/node@22.13.9)(typescript@5.7.3))):
+    dependencies:
+      '@koa/router': 12.0.2
+      commander: 6.2.1
+      fs-extra: 9.1.0
+      koa: 2.16.3
+      koa-static: 5.0.0
+      open: 7.4.2
+      portfinder: 1.0.38
+      replace-in-file: 6.3.5
+      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.3.78(@swc/helpers@0.5.15))(@types/node@22.13.9)(typescript@5.7.3))
+    transitivePeerDependencies:
+      - supports-color
+
   tailwind-merge@3.0.2: {}
 
   tailwindcss-animate@1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.3.78(@swc/helpers@0.5.15))(@types/node@22.13.9)(typescript@5.7.3))):
@@ -4952,13 +11843,44 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
+  tar-stream@3.1.7:
+    dependencies:
+      b4a: 1.7.3
+      fast-fifo: 1.3.2
+      streamx: 2.23.0
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
+  tar@6.2.1:
+    dependencies:
+      chownr: 2.0.0
+      fs-minipass: 2.1.0
+      minipass: 5.0.0
+      minizlib: 2.1.2
+      mkdirp: 1.0.4
+      yallist: 4.0.0
+
+  tar@7.5.1:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.1.0
+      yallist: 5.0.0
+
   terser@5.39.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
       acorn: 8.15.0
       commander: 2.20.3
       source-map-support: 0.5.21
-    optional: true
+
+  text-decoder@1.2.3:
+    dependencies:
+      b4a: 1.7.3
+    transitivePeerDependencies:
+      - react-native-b4a
 
   thenify-all@1.6.0:
     dependencies:
@@ -4968,10 +11890,27 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  tiny-invariant@1.3.3: {}
+
+  tinyexec@0.3.2: {}
+
+  tinyexec@1.0.1: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
 
+  toidentifier@1.0.1: {}
+
+  totalist@3.0.1: {}
+
+  tr46@0.0.3: {}
+
   ts-api-utils@2.1.0(typescript@5.7.3):
     dependencies:
       typescript: 5.7.3
@@ -5008,10 +11947,12 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  tsscmp@1.0.6: {}
+
   tsx@4.19.3:
     dependencies:
-      esbuild: 0.25.0
-      get-tsconfig: 4.10.0
+      esbuild: 0.25.11
+      get-tsconfig: 4.13.0
     optionalDependencies:
       fsevents: 2.3.3
     optional: true
@@ -5020,6 +11961,17 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
+  type-fest@5.1.0:
+    dependencies:
+      tagged-tag: 1.0.0
+
+  type-is@1.6.18:
+    dependencies:
+      media-typer: 0.3.0
+      mime-types: 2.1.35
+
+  type-level-regexp@0.1.17: {}
+
   typed-array-buffer@1.0.3:
     dependencies:
       call-bound: 1.0.4
@@ -5053,19 +12005,23 @@ snapshots:
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
-  typescript-eslint@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3):
+  typescript-eslint@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.38.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3))(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
-      '@typescript-eslint/parser': 8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
+      '@typescript-eslint/eslint-plugin': 8.38.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      '@typescript-eslint/parser': 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
       '@typescript-eslint/typescript-estree': 8.38.0(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.38.0(eslint@9.32.0(jiti@1.21.7))(typescript@5.7.3)
-      eslint: 9.32.0(jiti@1.21.7)
+      '@typescript-eslint/utils': 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
+      eslint: 9.32.0(jiti@2.6.1)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
   typescript@5.7.3: {}
 
+  ufo@1.6.1: {}
+
+  ultrahtml@1.6.0: {}
+
   unbox-primitive@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -5073,14 +12029,176 @@ snapshots:
       has-symbols: 1.1.0
       which-boxed-primitive: 1.1.1
 
+  uncrypto@0.1.3: {}
+
+  unctx@2.4.1:
+    dependencies:
+      acorn: 8.15.0
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+      unplugin: 2.3.10
+
   undici-types@6.20.0: {}
 
+  undici@7.16.0: {}
+
+  unenv@2.0.0-rc.21:
+    dependencies:
+      defu: 6.1.4
+      exsolve: 1.0.7
+      ohash: 2.0.11
+      pathe: 2.0.3
+      ufo: 1.6.1
+
+  unenv@2.0.0-rc.23:
+    dependencies:
+      pathe: 2.0.3
+
+  unhead@2.0.19:
+    dependencies:
+      hookable: 5.5.3
+
+  unicorn-magic@0.1.0: {}
+
+  unicorn-magic@0.3.0: {}
+
+  unimport@5.5.0:
+    dependencies:
+      acorn: 8.15.0
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      pkg-types: 2.3.0
+      scule: 1.3.0
+      strip-literal: 3.1.0
+      tinyglobby: 0.2.15
+      unplugin: 2.3.10
+      unplugin-utils: 0.3.1
+
+  universalify@2.0.1: {}
+
+  unplugin-utils@0.2.5:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.3
+
+  unplugin-utils@0.3.1:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.3
+
+  unplugin-vue-router@0.16.0(@vue/compiler-sfc@3.5.22)(typescript@5.7.3)(vue-router@4.6.3(vue@3.5.22(typescript@5.7.3)))(vue@3.5.22(typescript@5.7.3)):
+    dependencies:
+      '@babel/generator': 7.28.5
+      '@vue-macros/common': 3.1.1(vue@3.5.22(typescript@5.7.3))
+      '@vue/compiler-sfc': 3.5.22
+      '@vue/language-core': 3.1.2(typescript@5.7.3)
+      ast-walker-scope: 0.8.3
+      chokidar: 4.0.3
+      json5: 2.2.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      muggle-string: 0.4.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      scule: 1.3.0
+      tinyglobby: 0.2.15
+      unplugin: 2.3.10
+      unplugin-utils: 0.3.1
+      yaml: 2.8.1
+    optionalDependencies:
+      vue-router: 4.6.3(vue@3.5.22(typescript@5.7.3))
+    transitivePeerDependencies:
+      - typescript
+      - vue
+
+  unplugin@2.3.10:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.15.0
+      picomatch: 4.0.3
+      webpack-virtual-modules: 0.6.2
+
+  unrs-resolver@1.11.1:
+    dependencies:
+      napi-postinstall: 0.3.4
+    optionalDependencies:
+      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
+      '@unrs/resolver-binding-android-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-x64': 1.11.1
+      '@unrs/resolver-binding-freebsd-x64': 1.11.1
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
+      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+
+  unstorage@1.17.1(db0@0.3.4)(ioredis@5.8.2):
+    dependencies:
+      anymatch: 3.1.3
+      chokidar: 4.0.3
+      destr: 2.0.5
+      h3: 1.15.4
+      lru-cache: 10.4.3
+      node-fetch-native: 1.6.7
+      ofetch: 1.5.0
+      ufo: 1.6.1
+    optionalDependencies:
+      db0: 0.3.4
+      ioredis: 5.8.2
+
+  untun@0.1.3:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      pathe: 1.1.2
+
+  untyped@2.0.0:
+    dependencies:
+      citty: 0.1.6
+      defu: 6.1.4
+      jiti: 2.6.1
+      knitwork: 1.2.0
+      scule: 1.3.0
+
+  unwasm@0.3.11:
+    dependencies:
+      knitwork: 1.2.0
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      unplugin: 2.3.10
+
   update-browserslist-db@1.1.3(browserslist@4.24.4):
     dependencies:
       browserslist: 4.24.4
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  update-browserslist-db@1.1.4(browserslist@4.27.0):
+    dependencies:
+      browserslist: 4.27.0
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  uqr@0.1.2: {}
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
@@ -5092,7 +12210,96 @@ snapshots:
   v8-compile-cache-lib@3.0.1:
     optional: true
 
-  vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0):
+  vary@1.1.2: {}
+
+  vite-dev-rpc@1.1.0(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)):
+    dependencies:
+      birpc: 2.6.1
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+      vite-hot-client: 2.1.0(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
+
+  vite-hot-client@2.1.0(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)):
+    dependencies:
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+
+  vite-node@3.2.4(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vite-plugin-checker@0.11.0(eslint@9.32.0(jiti@2.6.1))(optionator@0.9.4)(typescript@5.7.3)(vite@7.1.12(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue-tsc@3.1.2(typescript@5.7.3)):
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      chokidar: 4.0.3
+      npm-run-path: 6.0.0
+      picocolors: 1.1.1
+      picomatch: 4.0.3
+      tiny-invariant: 1.3.3
+      tinyglobby: 0.2.15
+      vite: 7.1.12(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+      vscode-uri: 3.1.0
+    optionalDependencies:
+      eslint: 9.32.0(jiti@2.6.1)
+      optionator: 0.9.4
+      typescript: 5.7.3
+      vue-tsc: 3.1.2(typescript@5.7.3)
+
+  vite-plugin-eslint2@5.0.4(@types/eslint@9.6.1)(eslint@9.32.0(jiti@2.6.1))(rollup@4.52.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)):
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      debug: 4.4.3
+      eslint: 9.32.0(jiti@2.6.1)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+    optionalDependencies:
+      '@types/eslint': 9.6.1
+      rollup: 4.52.5
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-inspect@11.3.3(@nuxt/kit@3.20.0(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)):
+    dependencies:
+      ansis: 4.2.0
+      debug: 4.4.3
+      error-stack-parser-es: 1.0.5
+      ohash: 2.0.11
+      open: 10.2.0
+      perfect-debounce: 2.0.0
+      sirv: 3.0.2
+      unplugin-utils: 0.3.1
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+      vite-dev-rpc: 1.1.0(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
+    optionalDependencies:
+      '@nuxt/kit': 3.20.0(magicast@0.3.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-vue-tracer@1.0.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.22(typescript@5.7.3)):
+    dependencies:
+      estree-walker: 3.0.3
+      exsolve: 1.0.7
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      source-map-js: 1.2.1
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
+      vue: 3.5.22(typescript@5.7.3)
+
+  vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.0
       postcss: 8.5.3
@@ -5100,21 +12307,43 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.13.9
       fsevents: 2.3.3
-      jiti: 1.21.7
+      jiti: 2.6.1
       terser: 5.39.0
       tsx: 4.19.3
-      yaml: 2.7.0
+      yaml: 2.8.1
+
+  vite@7.1.12(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1):
+    dependencies:
+      esbuild: 0.25.11
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.52.5
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 22.13.9
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      terser: 5.39.0
+      tsx: 4.19.3
+      yaml: 2.8.1
 
   vscode-uri@3.1.0: {}
 
+  vue-bundle-renderer@2.2.0:
+    dependencies:
+      ufo: 1.6.1
+
   vue-demi@0.14.10(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       vue: 3.5.13(typescript@5.7.3)
 
-  vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@1.21.7)):
+  vue-devtools-stub@0.1.0: {}
+
+  vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@2.6.1)):
     dependencies:
       debug: 4.4.0
-      eslint: 9.32.0(jiti@1.21.7)
+      eslint: 9.32.0(jiti@2.6.1)
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
@@ -5128,12 +12357,17 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.13(typescript@5.7.3)
 
+  vue-router@4.6.3(vue@3.5.22(typescript@5.7.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.22(typescript@5.7.3)
+
   vue-sonner@1.3.0: {}
 
-  vue-tsc@2.2.8(typescript@5.7.3):
+  vue-tsc@3.1.2(typescript@5.7.3):
     dependencies:
-      '@volar/typescript': 2.4.11
-      '@vue/language-core': 2.2.8(typescript@5.7.3)
+      '@volar/typescript': 2.4.23
+      '@vue/language-core': 3.1.2(typescript@5.7.3)
       typescript: 5.7.3
 
   vue@3.5.13(typescript@5.7.3):
@@ -5146,10 +12380,29 @@ snapshots:
     optionalDependencies:
       typescript: 5.7.3
 
+  vue@3.5.22(typescript@5.7.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.22
+      '@vue/compiler-sfc': 3.5.22
+      '@vue/runtime-dom': 3.5.22
+      '@vue/server-renderer': 3.5.22(vue@3.5.22(typescript@5.7.3))
+      '@vue/shared': 3.5.22
+    optionalDependencies:
+      typescript: 5.7.3
+
   webextension-polyfill@0.10.0: {}
 
   webextension-polyfill@0.12.0: {}
 
+  webidl-conversions@3.0.1: {}
+
+  webpack-virtual-modules@0.6.2: {}
+
+  whatwg-url@5.0.0:
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+
   which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0
@@ -5197,6 +12450,10 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  which@5.0.0:
+    dependencies:
+      isexe: 3.1.1
+
   word-wrap@1.2.5: {}
 
   wrap-ansi@6.2.0:
@@ -5219,17 +12476,35 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  ws@8.18.3: {}
+
+  wsl-utils@0.1.0:
+    dependencies:
+      is-wsl: 3.1.0
+
   xml-name-validator@4.0.0: {}
 
   y18n@4.0.3: {}
 
+  y18n@5.0.8: {}
+
+  yallist@3.1.1: {}
+
+  yallist@4.0.0: {}
+
+  yallist@5.0.0: {}
+
   yaml@2.7.0: {}
 
+  yaml@2.8.1: {}
+
   yargs-parser@18.1.3:
     dependencies:
       camelcase: 5.3.1
       decamelize: 1.2.0
 
+  yargs-parser@21.1.1: {}
+
   yargs@15.4.1:
     dependencies:
       cliui: 6.0.0
@@ -5244,7 +12519,42 @@ snapshots:
       y18n: 4.0.3
       yargs-parser: 18.1.3
 
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
+  ylru@1.4.0: {}
+
   yn@3.1.1:
     optional: true
 
   yocto-queue@0.1.0: {}
+
+  yocto-queue@1.2.1: {}
+
+  yoctocolors@2.1.2: {}
+
+  youch-core@0.3.3:
+    dependencies:
+      '@poppinss/exception': 1.2.2
+      error-stack-parser-es: 1.0.5
+
+  youch@4.1.0-beta.11:
+    dependencies:
+      '@poppinss/colors': 4.1.5
+      '@poppinss/dumper': 0.6.4
+      '@speed-highlight/core': 1.2.8
+      cookie: 1.0.2
+      youch-core: 0.3.3
+
+  zip-stream@6.0.1:
+    dependencies:
+      archiver-utils: 5.0.2
+      compress-commons: 6.0.2
+      readable-stream: 4.7.0
diff --git a/src/style.css b/src/assets/css/tailwind.css
similarity index 100%
rename from src/style.css
rename to src/assets/css/tailwind.css
diff --git a/src/components/navigation/AppSidebar.vue b/src/components/navigation/AppSidebar.vue
index 8e34030..8ca9574 100644
--- a/src/components/navigation/AppSidebar.vue
+++ b/src/components/navigation/AppSidebar.vue
@@ -9,7 +9,8 @@ import { Sidebar, SidebarContent, SidebarHeader, SidebarFooter, SidebarGroup, Si
 import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
-import { defaultSnapOrigin, defaultSnapVersion } from '@/utils/wallet/metamask/snap';
+
+const { public: { commitHash, snapOrigin, snapVersion } } = useRuntimeConfig();
 
 const props = defineProps({
   forceTokenView: {
@@ -156,8 +157,11 @@ const navigateTo = (url: string) => {
 };
 
 const waxVersion = ref('');
+
+const defaultSnapOrigin = snapOrigin || 'npm:@hiveio/metamask-snap'; // local:http://localhost:8080
+const defaultSnapVersion: string | undefined = snapVersion || '1.6.0';
+
 const metamaskVersion = `${defaultSnapOrigin}@${defaultSnapVersion}`;
-const commitHash = __COMMIT_HASH__;
 
 onMounted(async () => {
   try {
diff --git a/src/components/onboarding/wallets/metamask/MetamaskConnect.vue b/src/components/onboarding/wallets/metamask/MetamaskConnect.vue
index fce8a03..365397c 100644
--- a/src/components/onboarding/wallets/metamask/MetamaskConnect.vue
+++ b/src/components/onboarding/wallets/metamask/MetamaskConnect.vue
@@ -79,7 +79,7 @@ const onAccountNameValidationChange = (isValid: boolean) => {
   accountNameValid.value = isValid;
 };
 
-const generateAccountUpdateTransaction = async (): Promise<string | void> => {
+const generateAccountUpdateTransaction = async (): Promise<string | undefined> => {
   try {
     const wax = await getWax();
     const tx = await wax.createTransaction();
diff --git a/src/components/ui/round-progress/Progress.vue b/src/components/ui/round-progress/Progress.vue
index 998e429..847f494 100644
--- a/src/components/ui/round-progress/Progress.vue
+++ b/src/components/ui/round-progress/Progress.vue
@@ -102,7 +102,7 @@ const primaryCircleStyle = computed(() => ({
     </svg>
     <span
       :data-current-value="currentPercent"
-      class="duration-[var(--transition-length)] delay-[var(--delay)] absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
+      class="[transition-duration:var(--transition-length)] [transition-delay:var(--delay)] absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
     >
       {{ currentPercent.toFixed(2) }}%
     </span>
diff --git a/src/components/utilcards/MemoEncryptCard.vue b/src/components/utilcards/MemoEncryptCard.vue
index 1b7fe89..94dcae6 100644
--- a/src/components/utilcards/MemoEncryptCard.vue
+++ b/src/components/utilcards/MemoEncryptCard.vue
@@ -25,7 +25,7 @@ const encryptForKey = ref('');
 const inputData = ref('');
 const outputData = ref('');
 
-const getMemoKeyForUser = async (user: string): Promise<string | void> => {
+const getMemoKeyForUser = async (user: string): Promise<string | undefined> => {
   const accountName = user.startsWith('@') ? user.slice(1) : user;
   try {
     const wax = await getWax();
@@ -33,7 +33,7 @@ const getMemoKeyForUser = async (user: string): Promise<string | void> => {
       accounts: [accountName],
       delayed_votes_active: true
     });
-    return response.accounts[0].memo_key;
+    return response.accounts[0]?.memo_key;
   } catch (error) {
     toastError(`Error retrieving memo key for account: @${accountName}`, error);
   }
@@ -70,7 +70,7 @@ const encryptOrDecrypt = async () => {
 
     if (isEncrypt.value) {
       let publicKey: string;
-      let accountOrKey = encryptForKey.value;
+      const accountOrKey = encryptForKey.value;
       if (accountOrKey.startsWith('STM'))
         publicKey = accountOrKey;
       else {
diff --git a/src/components/utilcards/RequestAccountCreateManual.vue b/src/components/utilcards/RequestAccountCreateManual.vue
index 5d686b2..284ab31 100644
--- a/src/components/utilcards/RequestAccountCreateManual.vue
+++ b/src/components/utilcards/RequestAccountCreateManual.vue
@@ -30,6 +30,8 @@ import { toastError } from '@/utils/parse-error';
 import packageJson from '../../../package.json';
 import AccountCreationActionButtons from '../ui/hive/AccountCreationActionButtons.vue';
 
+const { public: { commitHash } } = useRuntimeConfig();
+
 const { version } = packageJson;
 const accountName = ref('');
 const accountNameValid = ref(false);
@@ -202,7 +204,7 @@ const downloadAuthorityData = () => {
       }
     },
     _note: 'KEEP THIS FILE SAFE! This master key is the key to your entire account. Store it in a secure location and never share it with anyone.',
-    generator: `Hive Bridge v${version} #${__COMMIT_HASH__}`
+    generator: `Hive Bridge v${version} #${commitHash}`
   };
 
   const dataStr = JSON.stringify(authorityFile, null, 2);
diff --git a/src/components/wallet/HTMProvidePassword.vue b/src/components/wallet/HTMProvidePassword.vue
index cc17536..257e3f6 100644
--- a/src/components/wallet/HTMProvidePassword.vue
+++ b/src/components/wallet/HTMProvidePassword.vue
@@ -50,13 +50,12 @@ const connect = async () => {
         await walletStore.createWalletFor(settingsStore.settings, 'posting');
         await userStore.parseUserData(settingsStore.settings!.account!);
       }
+
+      toast.success('Logged in successfully!');
+      close(false);
     } catch (error) {
       toastError('Failed to create wallet', error);
     }
-
-    toast.success('Logged in successfully!');
-
-    close(false);
   } catch (error) {
     toastError('Failed to connect to HTM', error);
   } finally {
diff --git a/src/App.vue b/src/layouts/default.vue
similarity index 53%
rename from src/App.vue
rename to src/layouts/default.vue
index a3385e4..8b89d13 100644
--- a/src/App.vue
+++ b/src/layouts/default.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, defineAsyncComponent } from 'vue';
-import { Toaster , toast } from 'vue-sonner';
+import { toast } from 'vue-sonner';
 
 import AppSidebar from '@/components/navigation';
 import AppHeader from '@/components/navigation/AppHeader.vue';
@@ -10,9 +10,7 @@ import type { UsedWallet } from '@/stores/settings.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
-
-import ErrorDialog from './components/ErrorDialog.vue';
-import { toastError } from './utils/parse-error';
+import { toastError } from '@/utils/parse-error';
 
 const WalletOnboarding = defineAsyncComponent(() => import('@/components/onboarding/index'));
 
@@ -51,58 +49,28 @@ const complete = async (data: { account: string; wallet: UsedWallet }) => {
 </script>
 
 <template>
-  <div id="shadcn-root">
-    <div id="app-main">
-      <SidebarProvider>
-        <RouterView
-          v-slot="{ Component }"
-          name="sidebar"
-        >
-          <component
-            :is="Component"
-            v-if="Component"
-          />
-          <AppSidebar v-else />
-        </RouterView>
-        <div class="w-full">
-          <RouterView name="header">
-            <AppHeader />
-          </RouterView>
-          <main class="w-full h-[calc(100%-60px)] bg-background">
-            <RouterView />
-          </main>
-        </div>
-        <aside
-          v-if="walletStore.isWalletSelectModalOpen"
-          class="fixed inset-0 flex items-center justify-center z-20"
-        >
-          <WalletOnboarding
-            @close="walletStore.closeWalletSelectModal()"
-            @complete="complete"
-          />
-        </aside>
-        <aside
-          v-if="walletStore.isProvideWalletPasswordModalOpen"
-          class="fixed inset-0 flex items-center justify-center z-20"
-        >
-          <HTMProvidePassword />
-        </aside>
-      </SidebarProvider>
-      <Toaster
-        theme="dark"
-        close-button
-        rich-colors
-      />
-      <ErrorDialog />
+  <SidebarProvider>
+    <AppSidebar />
+    <div class="w-full">
+      <AppHeader />
+      <main class="w-full h-[calc(100%-60px)] bg-background">
+        <slot />
+      </main>
     </div>
-  </div>
+    <aside
+      v-if="walletStore.isWalletSelectModalOpen"
+      class="fixed inset-0 flex items-center justify-center z-20"
+    >
+      <WalletOnboarding
+        @close="walletStore.closeWalletSelectModal()"
+        @complete="complete"
+      />
+    </aside>
+    <aside
+      v-if="walletStore.isProvideWalletPasswordModalOpen"
+      class="fixed inset-0 flex items-center justify-center z-20"
+    >
+      <HTMProvidePassword />
+    </aside>
+  </SidebarProvider>
 </template>
-
-<style scoped>
-#shadcn-root {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
-  overflow: hidden;
-  font-family: Verdana, sans-serif;
-}
-</style>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 4c51992..60a7402 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,15 +1,13 @@
-import type { Updater } from '@tanstack/vue-table'
-import type { Ref } from 'vue'
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import type { Updater } from '@tanstack/vue-table';
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import type { Ref } from 'vue';
 
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
 
-export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+export const valueUpdater = <T extends Updater<unknown>>(updaterOrValue: T, ref: Ref) => {
   ref.value
     = typeof updaterOrValue === 'function'
       ? updaterOrValue(ref.value)
-      : updaterOrValue
-}
+      : updaterOrValue;
+};
diff --git a/src/main.ts b/src/main.ts
deleted file mode 100644
index 1c1be02..0000000
--- a/src/main.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createPinia } from 'pinia';
-import { createApp } from 'vue';
-import './style.css';
-import { createWebHistory, createRouter } from 'vue-router';
-
-import App from './App.vue';
-import { routes } from './utils/router';
-
-const pinia = createPinia();
-const router = createRouter({
-  routes: routes,
-  history: createWebHistory()
-});
-
-createApp(App).use(pinia).use(router).mount('#app');
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index d8a5783..111569d 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -166,7 +166,7 @@ const formatAmount = (amount: string, precision: number): string => {
 
     // Format with precision and add thousand separators
     const parts = num.toFixed(precision).split('.');
-    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    parts[0] = parts[0]!.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     return parts.join('.');
   } catch {
     return amount;
@@ -221,7 +221,7 @@ const loadTokenDetails = async () => {
     if (!tokens || tokens.length === 0)
       throw new Error(`Token with NAI ${nai.value} not found`);
 
-    token.value = tokens[0];
+    token.value = tokens[0]!;
 
     isStaked.value = isVesting(token.value.nai!, token.value.precision || 0);
 
diff --git a/src/stores/metamask.store.ts b/src/stores/metamask.store.ts
index 4b1ba32..212d47b 100644
--- a/src/stores/metamask.store.ts
+++ b/src/stores/metamask.store.ts
@@ -3,8 +3,6 @@ import MetamaskProvider from '@hiveio/wax-signers-metamask';
 import { defineStore } from 'pinia';
 import { shallowRef } from 'vue';
 
-import { defaultSnapOrigin, defaultSnapVersion } from '@/utils/wallet/metamask/snap';
-
 // Do not watch for changes inside the metamask wallet - its only a tool we call functions from
 const metamaskWallet = shallowRef<MetamaskProvider | undefined>(undefined);
 
@@ -34,6 +32,10 @@ export const useMetamaskStore = defineStore('metamask', {
       try {
         this.performingOperation = true;
 
+        const { public: { snapOrigin } } = useRuntimeConfig();
+
+        const defaultSnapOrigin = snapOrigin || 'npm:@hiveio/metamask-snap';
+
         metamaskWallet.value = await MetamaskProvider.for(accountIndex, role, defaultSnapOrigin);
       } finally {
         this.performingOperation = false;
@@ -46,6 +48,10 @@ export const useMetamaskStore = defineStore('metamask', {
         if (!this.metamask)
           throw new Error('Install: Metamask not connected');
 
+        const { public: { snapVersion } } = useRuntimeConfig();
+
+        const defaultSnapVersion: string | undefined = snapVersion || '1.6.0';
+
         await this.metamask.installSnap(defaultSnapVersion);
       } finally {
         this.performingOperation = false;
diff --git a/src/stores/wax.store.ts b/src/stores/wax.store.ts
index 0515620..a422925 100644
--- a/src/stores/wax.store.ts
+++ b/src/stores/wax.store.ts
@@ -1,7 +1,6 @@
 import type { NaiAsset, TWaxRestExtended, TWaxExtended, asset } from '@hiveio/wax/vite';
 
 import CTokensApi from '@/utils/wallet/ctokens/api';
-import { DEFAULT_CTOKENS_API_URL } from '@/utils/wallet/ctokens/signer';
 
 export interface WaxApi {
   database_api: {
@@ -142,10 +141,17 @@ let chain: TWaxRestExtended<typeof CTokensApi, TWaxExtended<WaxApi>>;
 
 export const getWax = async () => {
   if (!chain) {
-    chain = (await (await import('@hiveio/wax/vite')).createHiveChain({ apiEndpoint: import.meta.env.VITE_HIVE_NODE_ENDPOINT, chainId: import.meta.env.VITE_HIVE_CHAIN_ID })).extend<WaxApi>().extendRest(CTokensApi);
+    const { public: { hiveNodeEndpoint, hiveChainId, ctokensApiUrl } } = useRuntimeConfig();
+
+    const chainId = hiveChainId.length > 0 ? hiveChainId : undefined;
+    const apiEndpoint = hiveNodeEndpoint.length > 0 ? hiveNodeEndpoint : undefined;
+
+    console.log(chainId, apiEndpoint);
+
+    chain = (await (await import('@hiveio/wax/vite')).createHiveChain({ apiEndpoint, chainId })).extend<WaxApi>().extendRest(CTokensApi);
 
     // These steps are repeated in the CtokensProvider constructor, but we need them here too as for now - maybe find a better way of handling this?
-    chain.restApi.ctokensApi.endpointUrl = import.meta.env.VITE_CTOKENS_API_URL || DEFAULT_CTOKENS_API_URL;
+    chain.restApi.ctokensApi.endpointUrl = ctokensApiUrl || 'http://192.168.6.7';
   }
 
   return chain;
diff --git a/src/utils/router.ts b/src/utils/router.ts
deleted file mode 100644
index b9d9e7f..0000000
--- a/src/utils/router.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { Component } from 'vue';
-
-import AppSidebar from '@/components/navigation/AppSidebar.vue';
-import AccountCreate from '@/pages/account/create.vue';
-import RequestCreate from '@/pages/account/request.vue';
-import AccountUpdate from '@/pages/account/update.vue';
-import DappAuthorize from '@/pages/automation/authorize.vue';
-import Index from '@/pages/index.vue';
-import SignMessage from '@/pages/sign/message.vue';
-import SignTransaction from '@/pages/sign/transaction.vue';
-import CreateToken from '@/pages/tokens/create.vue';
-import EditToken from '@/pages/tokens/edit.vue';
-import TokensList from '@/pages/tokens/list.vue';
-import AccountBalances from '@/pages/tokens/my-balance.vue';
-import TokenDefinitions from '@/pages/tokens/my-tokens.vue';
-import RegisterHTMAccount from '@/pages/tokens/register-account.vue';
-import SendToken from '@/pages/tokens/send-token.vue';
-import TokenDetail from '@/pages/tokens/token.vue';
-
-const standardPath = (path: string, component: Component) => ({ path, component });
-
-const tokensPath = (path: string, component: Component) => ({
-  path,
-  components: {
-    default: component,
-    sidebar: AppSidebar
-  },
-  props: {
-    sidebar: { forceTokenView: true }
-  }
-});
-
-export const routes = [
-  standardPath('/', Index),
-  standardPath('/sign/transaction', SignTransaction),
-  standardPath('/sign/message', SignMessage),
-  standardPath('/account/create', AccountCreate),
-  standardPath('/account/request', RequestCreate),
-  standardPath('/account/update', AccountUpdate),
-  standardPath('/automation/authorize', DappAuthorize),
-  tokensPath('/tokens/register-account', RegisterHTMAccount),
-  tokensPath('/tokens/create', CreateToken),
-  tokensPath('/tokens/edit', EditToken),
-  tokensPath('/tokens/send-token', SendToken),
-  tokensPath('/tokens/my-tokens', TokenDefinitions),
-  tokensPath('/tokens/my-balance', AccountBalances),
-  tokensPath('/tokens/list', TokensList),
-  tokensPath('/tokens/token', TokenDetail)
-];
diff --git a/src/utils/wallet/ctokens/api/index.d.ts b/src/utils/wallet/ctokens/api/index.d.ts
index 85fb991..a64aef0 100644
--- a/src/utils/wallet/ctokens/api/index.d.ts
+++ b/src/utils/wallet/ctokens/api/index.d.ts
@@ -184,5 +184,5 @@ type TWaxExtended = {
     }
   }
 }
-declare let WaxExtendedData: TWaxExtended;
+declare const WaxExtendedData: TWaxExtended;
 export default WaxExtendedData;
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index b18aaaf..34e38d2 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -1,4 +1,4 @@
-import { type IBeekeeperInstance, type IBeekeeperOptions, type IBeekeeperUnlockedWallet } from '@hiveio/beekeeper/vite';
+import type { IBeekeeperInstance, IBeekeeperOptions, IBeekeeperUnlockedWallet } from '@hiveio/beekeeper/vite';
 import type { IHiveChainInterface, ISignatureTransaction, TPublicKey, TRole, TSignature, TWaxRestExtended } from '@hiveio/wax/vite';
 import { AEncryptionProvider } from '@hiveio/wax/vite';
 
@@ -6,7 +6,6 @@ import RestApi from './api';
 
 export class WaxCTokensEncryptionProviderError extends Error {
   public constructor (message: string, cause?: Error) {
-    // @ts-expect-error - TODO: cause not working for some reason - maybe update tsconfig
     super(message, { cause });
   }
 }
@@ -19,8 +18,6 @@ const LOCAL_STORAGE_WALLET_INDEX_DEFAULT = 0;
 const LOCAL_STORAGE_OPERATIONAL_PUBLIC_KEY = 'ctokens_operational_public_key';
 const LOCAL_STORAGE_MANAGEMENT_PUBLIC_KEY = 'ctokens_management_public_key';
 
-export const DEFAULT_CTOKENS_API_URL = 'http://192.168.6.7';
-
 export class CTokensProvider extends AEncryptionProvider {
   static #beekeeper: IBeekeeperInstance | undefined;
 
@@ -179,7 +176,7 @@ export class CTokensProvider extends AEncryptionProvider {
     return { management, operational };
   }
 
-  public static async for (chain: IHiveChainInterface, role: TRole, onlineCheckKeys = true, ctokensUrl: string = (import.meta.env.VITE_CTOKENS_API_URL || DEFAULT_CTOKENS_API_URL)): Promise<CTokensProvider> {
+  public static async for (chain: IHiveChainInterface, role: TRole, onlineCheckKeys = true, ctokensUrl?: string): Promise<CTokensProvider> {
     CTokensProvider.ensurePublicKeysLoaded();
 
     if (role === 'owner') {
@@ -193,6 +190,11 @@ export class CTokensProvider extends AEncryptionProvider {
     if (!CTokensProvider.#beekeeper)
       await CTokensProvider.prepareBeekeeper();
 
+    const { public: { ctokensApiUrl } } = useRuntimeConfig();
+
+    if (!ctokensUrl)
+      ctokensUrl = ctokensApiUrl || 'http://192.168.6.7';
+
     const instance = new CTokensProvider(chain, role, ctokensUrl);
 
     if (onlineCheckKeys) {
diff --git a/src/utils/wallet/metamask/snap.ts b/src/utils/wallet/metamask/snap.ts
deleted file mode 100644
index c7629c8..0000000
--- a/src/utils/wallet/metamask/snap.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * The snap origin to use.
- * Will default to the local hosted snap if no value is provided in environment.
- *
- * You may be tempted to change this to the URL where your production snap is hosted, but please
- * don't. Instead, rename `.env.production.dist` to `.env.production` and set the production URL
- * there. Running `yarn build` will automatically use the production environment variables.
- */
-export const defaultSnapOrigin = import.meta.env.VITE_SNAP_ORIGIN || 'npm:@hiveio/metamask-snap'; // local:http://localhost:8080
-
-export const defaultSnapVersion: string | undefined = import.meta.env.VITE_SNAP_VERSION ?? '1.6.0';
-
-/**
- * Check if a snap ID is a local snap ID.
- *
- * @param snapId - The snap ID.
- * @returns True if it's a local Snap, or false otherwise.
- */
-export const isLocalSnap = (snapId: string) => snapId.startsWith('local:');
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index a3c9ad1..8ab1155 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,10 +1,8 @@
 /// <reference types="vite/client" />
 
-import type { MetaMaskInpageProvider, EIP6963AnnounceProviderEvent } from "@metamask/providers";
+import type { MetaMaskInpageProvider, EIP6963AnnounceProviderEvent } from '@metamask/providers';
 
 declare global {
-  const __COMMIT_HASH__: string;
-
   interface Window {
     ethereum?: MetaMaskInpageProvider & {
       detected?: MetaMaskInpageProvider[];
@@ -18,6 +16,7 @@ declare global {
     }
   }
   interface WindowEventMap {
+    /* eslint-disable-next-line @typescript-eslint/naming-convention */
     'eip6963:announceProvider': EIP6963AnnounceProviderEvent;
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index aec2411..22079e1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,9 @@
+/* eslint-disable import/no-commonjs */
+
 /** @type {import('tailwindcss').Config} */
 export default {
-    darkMode: ['class'],
-    content: ['./index.html', './src/**/*.{ts,js,vue}'],
+  darkMode: ['class'],
+  content: ['./src/**/*.{ts,js,vue}'],
   theme: {
   	extend: {
   		borderRadius: {
@@ -63,6 +65,5 @@ export default {
   		}
   	}
   },
-  plugins: [require("tailwindcss-animate")],
-}
-
+  plugins: [require('tailwindcss-animate')]
+};
diff --git a/tsconfig.app.json b/tsconfig.app.json
deleted file mode 100644
index 614668b..0000000
--- a/tsconfig.app.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-
-    "baseUrl": ".",
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
-}
diff --git a/tsconfig.json b/tsconfig.json
index fec8c8e..6ae5970 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,13 +1,17 @@
 {
   "files": [],
   "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
     }
-  }
+  ]
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
deleted file mode 100644
index db0becc..0000000
--- a/tsconfig.node.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}
diff --git a/vite.config.ts b/vite.config.ts
deleted file mode 100644
index 7c4e399..0000000
--- a/vite.config.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import path from 'node:path'
-import fs from 'node:fs'
-import vue from '@vitejs/plugin-vue'
-import eslint from '@nabla/vite-plugin-eslint'
-import autoprefixer from 'autoprefixer'
-import tailwind from 'tailwindcss'
-import { defineConfig, loadEnv } from 'vite'
-
-const getCommitHash = () => {
-  const rev = fs.readFileSync('.git/HEAD').toString().trim();
-
-  if (!rev.includes(':'))
-    return rev;
-  else
-    return fs.readFileSync(`.git/${rev.substring(5)}`).toString().trim();
-};
-
-// https://vite.dev/config/
-export default defineConfig(({ mode }) => {
-  // Load environment variables based on the current mode
-  const env = loadEnv(mode, process.cwd(), '')
-  
-  // Define default values that can be overridden by environment variables
-  const envDefaults = {
-    VITE_CTOKENS_API_URL: env.VITE_CTOKENS_API_URL || 'http://localhost:3000',
-    VITE_HIVE_NODE_ENDPOINT: env.VITE_HIVE_NODE_ENDPOINT || 'https://api.hive.blog',
-    VITE_HIVE_CHAIN_ID: env.VITE_HIVE_CHAIN_ID || '42'
-  }
-
-  return {
-    css: {
-      postcss: {
-        plugins: [tailwind(), autoprefixer()],
-      },
-    },
-    plugins: [
-      vue(),
-      eslint({
-        shouldLint: (path) => path.includes('src/') && (path.endsWith('.vue') || path.endsWith('.ts') || path.endsWith('.js'))
-      })
-    ],
-    resolve: {
-      alias: {
-        '@': path.resolve(import.meta.dirname, './src'),
-      },
-    },
-    server: {
-      allowedHosts: [
-        '15.bc.fqdn.pl'
-      ]
-    },
-    define: {
-      __COMMIT_HASH__: JSON.stringify(getCommitHash()),
-      // Make environment variables available in the application
-      ...Object.keys(envDefaults).reduce((acc, key) => {
-        acc[`import.meta.env.${key}`] = JSON.stringify(envDefaults[key as keyof typeof envDefaults])
-        return acc
-      }, {} as Record<string, string>)
-    },
-  }
-})
-- 
GitLab


From e2f7b16b2b34abe1a935a5db912da792e0b999e4 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Tue, 28 Oct 2025 16:43:56 +0100
Subject: [PATCH 059/102] Bump dependencies & 3rd party API definitions

---
 package.json                            | 12 ++--
 pnpm-lock.yaml                          | 62 ++++++++++----------
 src/utils/wallet/ctokens/api/index.d.ts | 78 ++++++++++++++++++++-----
 src/utils/wallet/ctokens/api/index.js   | 36 ++++++------
 4 files changed, 117 insertions(+), 71 deletions(-)

diff --git a/package.json b/package.json
index e4ae217..e3f68a0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hiveio/wallet-dapp",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "private": false,
   "description": "Metamask Wallet dApp",
   "homepage": "https://gitlab.syncad.com/hive/wallet-dapp#readme",
@@ -30,13 +30,13 @@
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.32.0",
     "@hiveio/beekeeper": "1.28.0",
-    "@hiveio/wax": "1.27.12-rc2-251027102101",
-    "@hiveio/wax-signers-keychain": "1.27.12-rc2-251027102101",
-    "@hiveio/wax-signers-metamask": "1.27.12-rc2-251027102101",
-    "@hiveio/wax-signers-peakvault": "1.27.12-rc2-251027102101",
+    "@hiveio/wax": "1.27.12-rc3",
+    "@hiveio/wax-signers-keychain": "1.27.12-rc3",
+    "@hiveio/wax-signers-metamask": "1.27.12-rc3",
+    "@hiveio/wax-signers-peakvault": "1.27.12-rc3",
     "@mdi/js": "^7.4.47",
     "@metamask/providers": "^16.0.0",
-    "@mtyszczak-cargo/htm": "^1.0.1",
+    "@mtyszczak-cargo/htm": "^1.1.0",
     "@nabla/vite-plugin-eslint": "^2.0.6",
     "@nuxt/eslint": "1.9.0",
     "@nuxtjs/color-mode": "^3.5.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a8b39f..598dfc1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,17 +25,17 @@ importers:
         specifier: 1.28.0
         version: 1.28.0
       '@hiveio/wax':
-        specifier: 1.27.12-rc2-251027102101
-        version: 1.27.12-rc2-251027102101
+        specifier: 1.27.12-rc3
+        version: 1.27.12-rc3
       '@hiveio/wax-signers-keychain':
-        specifier: 1.27.12-rc2-251027102101
-        version: 1.27.12-rc2-251027102101
+        specifier: 1.27.12-rc3
+        version: 1.27.12-rc3
       '@hiveio/wax-signers-metamask':
-        specifier: 1.27.12-rc2-251027102101
-        version: 1.27.12-rc2-251027102101(webextension-polyfill@0.12.0)
+        specifier: 1.27.12-rc3
+        version: 1.27.12-rc3(webextension-polyfill@0.12.0)
       '@hiveio/wax-signers-peakvault':
-        specifier: 1.27.12-rc2-251027102101
-        version: 1.27.12-rc2-251027102101
+        specifier: 1.27.12-rc3
+        version: 1.27.12-rc3
       '@mdi/js':
         specifier: ^7.4.47
         version: 7.4.47
@@ -43,8 +43,8 @@ importers:
         specifier: ^16.0.0
         version: 16.1.0
       '@mtyszczak-cargo/htm':
-        specifier: ^1.0.1
-        version: 1.0.1(@hiveio/wax@1.27.12-rc2-251027102101)
+        specifier: ^1.1.0
+        version: 1.1.0(@hiveio/wax@1.27.12-rc3)
       '@nabla/vite-plugin-eslint':
         specifier: ^2.0.6
         version: 2.0.6(eslint@9.32.0(jiti@2.6.1))(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
@@ -752,17 +752,17 @@ packages:
     resolution: {integrity: sha1-jhzjl4rv49r45D8o4sQymoSn98o=, tarball: https://gitlab.syncad.com/api/v4/projects/198/packages/npm/@hiveio/beekeeper/-/@hiveio/beekeeper-1.28.0.tgz}
     engines: {node: ^20.11 || >= 21.2}
 
-  '@hiveio/wax-signers-keychain@1.27.12-rc2-251027102101':
-    resolution: {integrity: sha1-7ghI01Oz4hBfpfU9XeACvbps7DU=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-keychain/-/@hiveio/wax-signers-keychain-1.27.12-rc2-251027102101.tgz}
+  '@hiveio/wax-signers-keychain@1.27.12-rc3':
+    resolution: {integrity: sha1-MXmiu/sxr+y+3ls/lcP/o6njycE=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-keychain/-/@hiveio/wax-signers-keychain-1.27.12-rc3.tgz}
 
-  '@hiveio/wax-signers-metamask@1.27.12-rc2-251027102101':
-    resolution: {integrity: sha1-IufjffEpz0u+OSCjliUkSqcaxoI=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-metamask/-/@hiveio/wax-signers-metamask-1.27.12-rc2-251027102101.tgz}
+  '@hiveio/wax-signers-metamask@1.27.12-rc3':
+    resolution: {integrity: sha1-vzAb08khTPEQiC0BXqTVJfhAdX0=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-metamask/-/@hiveio/wax-signers-metamask-1.27.12-rc3.tgz}
 
-  '@hiveio/wax-signers-peakvault@1.27.12-rc2-251027102101':
-    resolution: {integrity: sha1-ZnD8kHfWM2ObZ3lPJzY9EaNhkRg=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-peakvault/-/@hiveio/wax-signers-peakvault-1.27.12-rc2-251027102101.tgz}
+  '@hiveio/wax-signers-peakvault@1.27.12-rc3':
+    resolution: {integrity: sha1-EhNJNiGUy9f/KQmvJzLKtaaJnmc=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-peakvault/-/@hiveio/wax-signers-peakvault-1.27.12-rc3.tgz}
 
-  '@hiveio/wax@1.27.12-rc2-251027102101':
-    resolution: {integrity: sha1-XedOcD9INaE5yXpzvesrW2klftk=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax/-/@hiveio/wax-1.27.12-rc2-251027102101.tgz}
+  '@hiveio/wax@1.27.12-rc3':
+    resolution: {integrity: sha1-zq62YrSQGjkVhuNlh9MJ6g3xatg=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax/-/@hiveio/wax-1.27.12-rc3.tgz}
     engines: {node: ^20.11 || >= 21.2}
 
   '@humanfs/core@0.19.1':
@@ -914,8 +914,8 @@ packages:
     resolution: {integrity: sha512-w8CVbdkDrVXFJbfBSlDfafDR6BAkpDmv1bC1UJVCoVny5tW2RKAdn9i68Xf7asYT4TnUhl/hN4zfUiKQq9II4g==}
     engines: {node: '>=16.0.0'}
 
-  '@mtyszczak-cargo/htm@1.0.1':
-    resolution: {integrity: sha1-GGCQ3iWyOR6r5/2sr3jY44fwQTY=, tarball: https://gitlab.syncad.com/api/v4/projects/541/packages/npm/@mtyszczak-cargo/htm/-/@mtyszczak-cargo/htm-1.0.1.tgz}
+  '@mtyszczak-cargo/htm@1.1.0':
+    resolution: {integrity: sha1-a42W27PC77UWYNGJeRpuwXeT5Mg=, tarball: https://gitlab.syncad.com/api/v4/projects/541/packages/npm/@mtyszczak-cargo/htm/-/@mtyszczak-cargo/htm-1.1.0.tgz}
     engines: {node: ^20.11 || >= 21.2}
     peerDependencies:
       '@hiveio/wax': '>=1.27.12-rc1-251007115925'
@@ -6525,23 +6525,23 @@ snapshots:
 
   '@hiveio/beekeeper@1.28.0': {}
 
-  '@hiveio/wax-signers-keychain@1.27.12-rc2-251027102101':
+  '@hiveio/wax-signers-keychain@1.27.12-rc3':
     dependencies:
-      '@hiveio/wax': 1.27.12-rc2-251027102101
+      '@hiveio/wax': 1.27.12-rc3
 
-  '@hiveio/wax-signers-metamask@1.27.12-rc2-251027102101(webextension-polyfill@0.12.0)':
+  '@hiveio/wax-signers-metamask@1.27.12-rc3(webextension-polyfill@0.12.0)':
     dependencies:
-      '@hiveio/wax': 1.27.12-rc2-251027102101
+      '@hiveio/wax': 1.27.12-rc3
       '@metamask/providers': 21.0.0(webextension-polyfill@0.12.0)
     transitivePeerDependencies:
       - supports-color
       - webextension-polyfill
 
-  '@hiveio/wax-signers-peakvault@1.27.12-rc2-251027102101':
+  '@hiveio/wax-signers-peakvault@1.27.12-rc3':
     dependencies:
-      '@hiveio/wax': 1.27.12-rc2-251027102101
+      '@hiveio/wax': 1.27.12-rc3
 
-  '@hiveio/wax@1.27.12-rc2-251027102101':
+  '@hiveio/wax@1.27.12-rc3':
     dependencies:
       events: 3.3.0
 
@@ -6757,9 +6757,9 @@ snapshots:
       '@noble/hashes': 1.7.1
       '@scure/base': 1.2.4
       '@types/debug': 4.1.12
-      debug: 4.4.0
+      debug: 4.4.3
       pony-cause: 2.1.11
-      semver: 7.7.1
+      semver: 7.7.3
       uuid: 9.0.1
     transitivePeerDependencies:
       - supports-color
@@ -6792,9 +6792,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mtyszczak-cargo/htm@1.0.1(@hiveio/wax@1.27.12-rc2-251027102101)':
+  '@mtyszczak-cargo/htm@1.1.0(@hiveio/wax@1.27.12-rc3)':
     dependencies:
-      '@hiveio/wax': 1.27.12-rc2-251027102101
+      '@hiveio/wax': 1.27.12-rc3
       protobufjs: 7.2.5
 
   '@nabla/vite-plugin-eslint@2.0.6(eslint@9.32.0(jiti@2.6.1))(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))':
diff --git a/src/utils/wallet/ctokens/api/index.d.ts b/src/utils/wallet/ctokens/api/index.d.ts
index a64aef0..f1907dc 100644
--- a/src/utils/wallet/ctokens/api/index.d.ts
+++ b/src/utils/wallet/ctokens/api/index.d.ts
@@ -6,17 +6,20 @@ export interface CtokensAppBalance {
   amount?: string;
   precision?: number;
   /** Key-value pairs with additional token metadata. */
-  metadata?: object;
+  metadata?: Record<string, any>;
 }
 
-export type CtokensAppArrayOfBalances = CtokensAppBalance[];
-
-export interface CtokensAppAccountBalance {
-  liquid?: CtokensAppBalance | null;
-  vesting?: CtokensAppBalance | null;
+export interface CtokensAppLiquidAndVestingBalance {
+  liquid?: CtokensAppBalance;
+  vesting?: CtokensAppBalance;
 }
 
-export type CtokensAppArrayOfAccountBalances = CtokensAppAccountBalance[];
+export type CtokensAppArrayOfBalances = CtokensAppLiquidAndVestingBalance[];
+
+export enum CtokensAppSortDirection {
+  Asc = "asc",
+  Desc = "desc",
+}
 
 export interface CtokensAppToken {
   /** Currency NAI */
@@ -38,10 +41,15 @@ export interface CtokensAppToken {
   /** Marks given asset as a NFT. */
   is_nft?: boolean;
   /** Key-value pairs with additional token metadata. */
-  metadata?: object;
+  metadata?: Record<string, any>;
 }
 
-export type CtokensAppArrayOfTokens = CtokensAppToken[];
+export interface CtokensAppLiquidAndVestingToken {
+  liquid?: CtokensAppToken;
+  vesting?: CtokensAppToken;
+}
+
+export type CtokensAppArrayOfTokens = CtokensAppLiquidAndVestingToken[];
 
 export interface CtokensAppUser {
   management_key?: string;
@@ -49,7 +57,7 @@ export interface CtokensAppUser {
   /** connected hive account */
   hive_account?: string | null;
   /** Key-value pairs with additional user metadata. */
-  metadata?: object;
+  metadata?: Record<string, any>;
 }
 
 export type CtokensAppArrayOfUsers = CtokensAppUser[];
@@ -69,7 +77,7 @@ export interface CtokensAppTopHolder {
   /** Amount of held tokens */
   amount?: string;
   /** Key-value pairs with additional user metadata. */
-  metadata?: object;
+  metadata?: Record<string, any>;
 }
 
 export type CtokensAppArrayOfTopHolders = CtokensAppTopHolder[];
@@ -105,12 +113,25 @@ export interface CtokensEndpointsGetTopHoldersParams {
 
 export interface CtokensEndpointsGetAccountBalancesParams {
   user: string;
+  /** @default null */
+  nai?: string;
+  /** @default null */
+  precision?: number;
   /**
    * 100 results per page (default `1`).
    * @min 1
    * @default 1
    */
   page?: number;
+  /**
+   * Sort order:
+   *
+   *  * `asc` - Ascending, from A to Z or smallest to largest
+   *
+   *  * `desc` - Descending, from Z to A or largest to smallest
+   * @default "desc"
+   */
+  direction?: CtokensAppSortDirection;
 }
 
 export interface CtokensEndpointsGetBalanceHistoryParams {
@@ -126,20 +147,45 @@ export interface CtokensEndpointsGetBalanceHistoryParams {
 }
 
 export interface CtokensEndpointsGetRegisteredTokensParams {
+  /**
+   * Filter by owner (accepts both operational and management keys).
+   * @default null
+   */
+  owner?: string;
   /** @default null */
   nai?: string;
   /** @default null */
   precision?: number;
+  /**
+   * 100 results per page (default `1`).
+   * @min 1
+   * @default 1
+   */
+  page?: number;
+  /**
+   * Sort order:
+   *
+   *  * `asc` - Ascending, from A to Z or smallest to largest
+   *
+   *  * `desc` - Descending, from Z to A or largest to smallest
+   * @default "desc"
+   */
+  direction?: CtokensAppSortDirection;
 }
 
 export interface CtokensEndpointsGetRegisteredUsersParams {
   /** @default null */
   user?: string;
+  /**
+   * 100 results per page (default `1`).
+   * @min 1
+   * @default 1
+   */
+  page?: number;
 }
 
 export interface CtokensEndpointsGetStatusParams {
-  /* eslint-disable-next-line @typescript-eslint/naming-convention */
-  'ref-id': string;
+  "ref-id": string;
 }
 
 type TWaxExtended = {
@@ -158,7 +204,7 @@ type TWaxExtended = {
       }
     },
     balances: {
-      result: CtokensAppArrayOfAccountBalances,
+      result: CtokensAppArrayOfBalances,
       params: CtokensEndpointsGetAccountBalancesParams & TEmptyReq & {
       }
     },
@@ -184,5 +230,5 @@ type TWaxExtended = {
     }
   }
 }
-declare const WaxExtendedData: TWaxExtended;
-export default WaxExtendedData;
+declare var WaxExtendedData: TWaxExtended
+export default WaxExtendedData
diff --git a/src/utils/wallet/ctokens/api/index.js b/src/utils/wallet/ctokens/api/index.js
index 72845ed..8af3481 100644
--- a/src/utils/wallet/ctokens/api/index.js
+++ b/src/utils/wallet/ctokens/api/index.js
@@ -1,37 +1,37 @@
 export default {
   ctokensApi: {
-    urlPath: 'ctokens-api',
+    urlPath: "ctokens-api",
     version: {
-      urlPath: 'version',
-      method: 'GET'
+      urlPath: "version",
+      method: "GET"
     },
     lastSyncedBlock: {
-      urlPath: 'last-synced-block',
-      method: 'GET'
+      urlPath: "last-synced-block",
+      method: "GET"
     },
     topHolders: {
-      urlPath: 'top-holders',
-      method: 'GET'
+      urlPath: "top-holders",
+      method: "GET"
     },
     balances: {
-      urlPath: 'balances',
-      method: 'GET'
+      urlPath: "balances",
+      method: "GET"
     },
     balanceHistory: {
-      urlPath: 'balance-history',
-      method: 'GET'
+      urlPath: "balance-history",
+      method: "GET"
     },
     registeredTokens: {
-      urlPath: 'registered-tokens',
-      method: 'GET'
+      urlPath: "registered-tokens",
+      method: "GET"
     },
     registeredUsers: {
-      urlPath: 'registered-users',
-      method: 'GET'
+      urlPath: "registered-users",
+      method: "GET"
     },
     status: {
-      urlPath: 'status',
-      method: 'GET'
+      urlPath: "status",
+      method: "GET"
     }
   }
-};
+}
-- 
GitLab


From 24458fa82307c74f2ae43e39985b77ee9a8f2e2b Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Tue, 28 Oct 2025 16:47:36 +0100
Subject: [PATCH 060/102] Adjust code to the new interface changes

---
 src/pages/tokens/edit.vue       | 12 +++---
 src/pages/tokens/my-balance.vue |  8 ++--
 src/pages/tokens/my-tokens.vue  | 74 ++++-----------------------------
 src/pages/tokens/send-token.vue | 11 ++---
 src/pages/tokens/token.vue      | 13 +++---
 src/stores/tokens.store.ts      | 34 ++++++++-------
 src/stores/user.store.ts        |  6 +++
 src/stores/wax.store.ts         |  4 +-
 src/utils/nai-tokens.ts         |  2 +-
 src/utils/transaction-status.ts | 14 ++-----
 10 files changed, 59 insertions(+), 119 deletions(-)

diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index 284b671..e4ddf1b 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -96,20 +96,18 @@ const loadTokenDetails = async () => {
     const wax = await getWax();
 
     // Fetch token details by NAI
-    let tokens = await wax.restApi.ctokensApi.registeredTokens({
+    const tokens = await wax.restApi.ctokensApi.registeredTokens({
       nai: nai.value,
       precision: Number(precision.value!)
     });
 
-    if (!tokens || tokens.length === 0) {
-      const allTokens = await wax.restApi.ctokensApi.registeredTokens({});
-      tokens = allTokens.filter(t => t.nai === nai.value);
-    }
-
     if (!tokens || tokens.length === 0)
       throw new Error(`Token with NAI ${nai.value} not found`);
 
-    token.value = tokens[0];
+    token.value = tokens[0]!.liquid?.nai === nai.value ? tokens[0]!.liquid! : tokens[0]?.vesting?.nai === nai.value ? tokens[0]!.vesting! : null;
+
+    if (!token.value)
+      throw new Error(`Token with NAI ${nai.value} not found`);
 
     // Populate form with existing metadata
     const metadata = token.value.metadata as {
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index e0a37a6..c68e576 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -291,6 +291,9 @@ const formatDisplayAmount = (amount: string | undefined, precision: number | und
     return '0';
 
   const [integerPart, decimalPart] = normalized.split('.');
+  if (!integerPart)
+    return '0';
+
   const withSeparators = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 
   if (!decimalPart)
@@ -433,8 +436,7 @@ const loadAccountStatistics = async () => {
     const wax = await getWax();
 
     // Get all tokens created by this user (owner field matches operational key)
-    const allTokens = await wax.restApi.ctokensApi.registeredTokens({});
-    const createdTokens = allTokens.filter(token => token.owner === operationalKey);
+    const createdTokens = await wax.restApi.ctokensApi.registeredTokens({ owner: operationalKey });
     createdTokensCount.value = createdTokens.length;
 
     // Get owned tokens (tokens with balance)
@@ -452,7 +454,7 @@ const loadAccountStatistics = async () => {
     ownedTokensCount.value = uniqueBalanceKeys.size;
 
     // Get NFT collections (created NFT tokens)
-    const nftTokens = createdTokens.filter(token => token.is_nft);
+    const nftTokens = createdTokens.filter(token => token.liquid?.is_nft);
     nftCollectionsCount.value = nftTokens.length;
 
     // Get staked tokens (tokens with vesting bit set)
diff --git a/src/pages/tokens/my-tokens.vue b/src/pages/tokens/my-tokens.vue
index 35d0c64..5bd6931 100644
--- a/src/pages/tokens/my-tokens.vue
+++ b/src/pages/tokens/my-tokens.vue
@@ -12,15 +12,13 @@ import HTMView from '@/components/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useSettingsStore } from '@/stores/settings.store';
-import type { CTokenDisplay } from '@/stores/tokens.store';
+import { transformTokenToDisplayFormat, type CTokenDisplay } from '@/stores/tokens.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 const router = useRouter();
-const settingsStore = useSettingsStore();
 
 // State
 const tokensFullList = ref<CTokenDisplay[]>([]);
@@ -28,31 +26,6 @@ const isLoading = ref(false);
 const currentPage = ref(0);
 const hasMorePages = ref(true);
 
-// Get user's public key for filtering
-const getUserPublicKey = async (): Promise<string | undefined> => {
-  try {
-    // First try to get from CTokens provider if logged in
-    if (CTokensProvider.isLoggedIn())
-      return CTokensProvider.getOperationalPublicKey();
-
-    // If no CTokens wallet, get from account data
-    if (settingsStore.account) {
-      const wax = await getWax();
-      const response = await wax.api.database_api.find_accounts({
-        accounts: [settingsStore.account],
-        delayed_votes_active: true
-      });
-      if (response.accounts.length > 0)
-        return response.accounts[0].posting.key_auths[0][0]; // Get the first posting key
-    }
-
-    return undefined;
-  } catch (error) {
-    console.error('Failed to get user public key:', error);
-    return undefined;
-  }
-};
-
 // Navigate to token detail page
 const viewTokenDetails = (token: CTokenDisplay) => {
   router.push(`/tokens/token?nai=${token.nai}&precision=${token.precision}`);
@@ -63,55 +36,26 @@ const loadTokens = async (page: number = 1) => {
   try {
     isLoading.value = true;
 
-    const userPublicKey = await getUserPublicKey();
+    const userPublicKey = CTokensProvider.getOperationalPublicKey();
     if (!userPublicKey) {
       toastError('Unable to determine your public key', 'Please make sure you are connected to a wallet');
       return;
     }
 
     const wax = await getWax();
-    const formatAsset = (value: string | bigint, precision: number, symbol?: string): string => {
-      const formatted = wax.formatter.formatNumber(value, precision);
-      return symbol ? `${formatted} ${symbol}` : formatted;
-    };
-
-    // Temporary naive implementation of vesting space check
-    const isVesting = (nai: string, precision: number) => (((Number(nai.slice(2, -1)) << 5) | 0x10 | precision) & 0x20) != 0;
-
-    const tokens = await wax.restApi.ctokensApi.registeredTokens({}) as Required<CtokensAppToken>[];
-
-    // Filter tokens by user's public key
-    const userTokens = tokens.filter(token => token.owner === userPublicKey);
+    const tokens = await wax.restApi.ctokensApi.registeredTokens({ owner: userPublicKey });
 
     if (page === 1)
       tokensFullList.value = [];
 
-    tokensFullList.value.push(...userTokens.map(token => {
-      const { name, symbol, description, website, image } = (token.metadata || {}) as Record<string, string>;
-
-      return {
-        nai: token.nai,
-        isStaked: isVesting(token.nai, token.precision),
-        displayMaxSupply: formatAsset(token.max_supply, token.precision, symbol || name),
-        ownerPublicKey: token.owner,
-        precision: token.precision,
-        displayTotalSupply: formatAsset(token.total_supply, token.precision, symbol || name),
-        totalSupply: BigInt(token.total_supply),
-        maxSupply: BigInt(token.max_supply),
-        capped: token.capped,
-        othersCanStake: token.others_can_stake,
-        othersCanUnstake: token.others_can_unstake,
-        isNft: token.is_nft,
-        metadata: token.metadata,
-        name,
-        symbol,
-        description,
-        website,
-        image
-      } as CTokenDisplay;
+    tokensFullList.value.push(...tokens.flatMap(token => {
+      return [
+        transformTokenToDisplayFormat(wax, token.liquid as Required<CtokensAppToken>),
+        transformTokenToDisplayFormat(wax, token.vesting as Required<CtokensAppToken>)
+      ];
     }));
 
-    hasMorePages.value = userTokens.length === 100; // API returns 100 results per page
+    hasMorePages.value = tokens.length === 100; // API returns 100 results per page
     currentPage.value = page;
   } catch (error) {
     toastError('Failed to load tokens', error);
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index 3764b61..afcdc1c 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -266,21 +266,18 @@ const loadTokenDetails = async () => {
     const wax = await getWax();
 
     // Fetch token details by NAI
-    let tokens = await wax.restApi.ctokensApi.registeredTokens({
+    const tokens = await wax.restApi.ctokensApi.registeredTokens({
       nai: nai.value,
       precision: Number(precision.value!)
     });
 
-    if (!tokens || tokens.length === 0) {
-      const allTokens = await wax.restApi.ctokensApi.registeredTokens({});
-      tokens = allTokens.filter(t => t.nai === nai.value);
-    }
-
     if (!tokens || tokens.length === 0)
       throw new Error(`Token with NAI ${nai.value} not found`);
 
-    token.value = tokens[0];
+    token.value = tokens[0]!.liquid?.nai === nai.value ? tokens[0]!.liquid! : tokens[0]?.vesting?.nai === nai.value ? tokens[0]!.vesting! : null;
 
+    if (!token.value)
+      throw new Error(`Token with NAI ${nai.value} not found`);
   } catch (error) {
     toastError('Failed to load token details', error);
     router.push('/tokens/list');
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 111569d..b6a3fc9 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -210,18 +210,15 @@ const loadTokenDetails = async () => {
 
     // Fetch token details by NAI
     // First try with just NAI, if that doesn't work, get all tokens and filter
-    let tokens = await wax.restApi.ctokensApi.registeredTokens({ nai: nai.value, precision: Number(precision.value!) });
-
-    // If no token found with just NAI, try getting all tokens and filtering
-    if (!tokens || tokens.length === 0) {
-      const allTokens = await wax.restApi.ctokensApi.registeredTokens({});
-      tokens = allTokens.filter(token => token.nai === nai.value);
-    }
+    const tokens = await wax.restApi.ctokensApi.registeredTokens({ nai: nai.value, precision: Number(precision.value!) });
 
     if (!tokens || tokens.length === 0)
       throw new Error(`Token with NAI ${nai.value} not found`);
 
-    token.value = tokens[0]!;
+    token.value = tokens[0]!.liquid?.nai === nai.value ? tokens[0]!.liquid! : tokens[0]?.vesting?.nai === nai.value ? tokens[0]!.vesting! : null;
+
+    if (!token.value)
+      throw new Error(`Token with NAI ${nai.value} not found`);
 
     isStaked.value = isVesting(token.value.nai!, token.value.precision || 0);
 
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 9c2aacd..dab01e6 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -1,11 +1,10 @@
+import type { IWaxBaseInterface } from '@hiveio/wax/vite';
 import { defineStore } from 'pinia';
 import { shallowRef } from 'vue';
 
 import { getWax } from '@/stores/wax.store';
 import { isVesting } from '@/utils/nai-tokens';
 import type {
-  CtokensAppArrayOfBalances,
-  CtokensAppArrayOfTokens,
   CtokensAppBalance,
   CtokensAppToken,
   CtokensAppBalanceHistory,
@@ -39,22 +38,21 @@ export interface CTokenDisplay {
 
 const cTokensProvider = shallowRef<CTokensProvider | undefined>(undefined);
 
-const formatAsset = async (value: string | bigint, precision: number, name?: string): Promise<string> => {
-  const wax = await getWax();
+const formatAsset = (wax: IWaxBaseInterface, value: string | bigint, precision: number, name?: string): string => {
   const formatted = wax.formatter.formatNumber(value, precision);
   return name ? `${formatted} ${name}` : formatted;
 };
 
-const transformTokenToDisplayFormat = async (token: Required<CtokensAppToken>): Promise<CTokenDisplay> => {
+export const transformTokenToDisplayFormat = (wax: IWaxBaseInterface, token: Required<CtokensAppToken>): CTokenDisplay => {
   const { name, symbol, description, website, image } = (token.metadata || {}) as Record<string, string>;
 
   return {
     nai: token.nai,
     isStaked: isVesting(token.nai, token.precision),
-    displayMaxSupply: await formatAsset(token.max_supply, token.precision, symbol || name),
+    displayMaxSupply: formatAsset(wax, token.max_supply, token.precision, symbol || name),
     ownerPublicKey: token.owner,
     precision: token.precision,
-    displayTotalSupply: await formatAsset(token.total_supply, token.precision, symbol || name),
+    displayTotalSupply: formatAsset(wax, token.total_supply, token.precision, symbol || name),
     totalSupply: BigInt(token.total_supply),
     maxSupply: BigInt(token.max_supply),
     capped: token.capped,
@@ -72,8 +70,8 @@ const transformTokenToDisplayFormat = async (token: Required<CtokensAppToken>):
 
 export const useTokensStore = defineStore('tokens', {
   state: () => ({
-    balances: [] as CtokensAppArrayOfBalances,
-    tokenDefinitions: [] as CtokensAppArrayOfTokens,
+    balances: [] as CtokensAppBalance[],
+    tokenDefinitions: [] as CtokensAppBalance[],
     registeredTokens: [] as CTokenDisplay[],
     isLoadingBalances: false,
     isLoadingTokens: false,
@@ -149,10 +147,15 @@ export const useTokensStore = defineStore('tokens', {
         const wax = await getWax();
 
         // Get registered tokens from ctokens-api
-        const tokens = await wax.restApi.ctokensApi.registeredTokens({ });
+        const tokens = await wax.restApi.ctokensApi.registeredTokens({ owner: creator });
 
         // Filter by creator if provided
-        this.tokenDefinitions = creator ? tokens.filter((token: CtokensAppToken) => token.owner === creator) : tokens;
+        this.tokenDefinitions = tokens.flatMap(token => {
+          const result: CtokensAppBalance[] = [];
+          if (token.liquid) result.push(token.liquid);
+          if (token.vesting) result.push(token.vesting);
+          return result;
+        });
       } catch (error) {
         console.error('Failed to load token definitions:', error);
         this.lastError = error instanceof Error ? error.message : 'Failed to load token definitions';
@@ -195,12 +198,13 @@ export const useTokensStore = defineStore('tokens', {
       try {
         const wax = await getWax();
         // Get raw tokens from API
-        const tokens = await wax.restApi.ctokensApi.registeredTokens({ nai, precision }) as Required<CtokensAppToken>[];
+        const tokens = await wax.restApi.ctokensApi.registeredTokens({ nai, precision });
 
         // Transform tokens to display format
-        const transformedTokens = await Promise.all(
-          tokens.map(token => transformTokenToDisplayFormat(token))
-        );
+        const transformedTokens = tokens.flatMap(token => ([
+          transformTokenToDisplayFormat(wax, token.liquid as Required<CtokensAppToken>),
+          transformTokenToDisplayFormat(wax, token.vesting as Required<CtokensAppToken>)
+        ]));
 
         // For pagination, we append or replace based on page
         if (page === 1)
diff --git a/src/stores/user.store.ts b/src/stores/user.store.ts
index 507f9bd..cd9b351 100644
--- a/src/stores/user.store.ts
+++ b/src/stores/user.store.ts
@@ -150,6 +150,9 @@ export const useUserStore = defineStore('user', {
         // Maybe adjust wax code so I don't have to do all of this manually:
         // (Currently I do this so wax does not call API multiple times for same data)
         const { rc_accounts: [rcData] } = await wax.api.rc_api.find_rc_accounts({ accounts: [data.name] });
+        if (!rcData)
+          throw new Error('RC data not found for account');
+
         const now = Math.floor(new Date(`${time}Z`).getTime() / 1000);
         const downvotePoolPercent = BigInt(downvote_pool_percent);
         let downVoteManabarMax = BigInt(data.post_voting_power.amount);
@@ -234,6 +237,9 @@ export const useUserStore = defineStore('user', {
       const wax = await getWax();
 
       const { accounts: [ data ] } = await wax.api.database_api.find_accounts({ accounts: [ accountName ], delayed_votes_active: false });
+      if (!data)
+        throw new Error('Account not found');
+
       try {
         this.parsedJsonMetadata = JSON.parse(data.json_metadata);
       } catch {}
diff --git a/src/stores/wax.store.ts b/src/stores/wax.store.ts
index a422925..21b1cc2 100644
--- a/src/stores/wax.store.ts
+++ b/src/stores/wax.store.ts
@@ -143,11 +143,9 @@ export const getWax = async () => {
   if (!chain) {
     const { public: { hiveNodeEndpoint, hiveChainId, ctokensApiUrl } } = useRuntimeConfig();
 
-    const chainId = hiveChainId.length > 0 ? hiveChainId : undefined;
+    const chainId = typeof hiveChainId === 'number' || hiveChainId.length > 0 ? String(hiveChainId) : undefined;
     const apiEndpoint = hiveNodeEndpoint.length > 0 ? hiveNodeEndpoint : undefined;
 
-    console.log(chainId, apiEndpoint);
-
     chain = (await (await import('@hiveio/wax/vite')).createHiveChain({ apiEndpoint, chainId })).extend<WaxApi>().extendRest(CTokensApi);
 
     // These steps are repeated in the CtokensProvider constructor, but we need them here too as for now - maybe find a better way of handling this?
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index af0a94a..c6dd9ee 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -30,7 +30,7 @@ const dammDigit = (str: string) => {
     if (Number.isNaN(col) || col < 0 || col > 9)
       throw new Error(`Invalid character '${str.charAt(i)}' in NAI string '${str}'`);
 
-    row = table[row][col];
+    row = table[row]![col]!;
   }
 
   return row.toString();
diff --git a/src/utils/transaction-status.ts b/src/utils/transaction-status.ts
index aa8c318..24f223f 100644
--- a/src/utils/transaction-status.ts
+++ b/src/utils/transaction-status.ts
@@ -6,6 +6,7 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
 
 /**
  * Poll transaction status until it's confirmed or failed
@@ -158,18 +159,11 @@ export const waitForTransactionStatus = async (
       toast.success(`${operationName} successful`, {
         description: result.message
       });
-    } else {
-      toast.error(`${operationName} failed`, {
-        description: result.details || result.message
-      });
-    }
+    } else
+      toastError(`${operationName} failed`, new Error(result.details || result.message));
   } catch (error: unknown) {
-    if (enableToasts) {
+    if (enableToasts)
       toast.dismiss(loadingToast);
-      toast.error(`${operationName} failed`, {
-        description: error instanceof Error ? error.message : 'Unknown error occurred'
-      });
-    }
 
     throw error;
   }
-- 
GitLab


From 2d92dced3cbd846067e415635a4c2c130abd310c Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Tue, 28 Oct 2025 17:02:04 +0100
Subject: [PATCH 061/102] Fix user account balance when it is not powering down

---
 src/stores/user.store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/user.store.ts b/src/stores/user.store.ts
index cd9b351..ae9dd01 100644
--- a/src/stores/user.store.ts
+++ b/src/stores/user.store.ts
@@ -133,7 +133,7 @@ export const useUserStore = defineStore('user', {
             received: new BalanceData(vestsToHp(BigInt(data.received_vesting_shares.amount)), data.balance.precision, hivePrice),
             delegated: new BalanceData(vestsToHp(BigInt(data.delegated_vesting_shares.amount)), data.balance.precision, hivePrice),
             unclaimed: new BalanceData(BigInt(data.reward_vesting_hive.amount), data.balance.precision, hivePrice),
-            poweringDown: new BalanceData(vestsToHp(BigInt(data.vesting_withdraw_rate.amount) * BigInt(new Date(data.next_vesting_withdrawal).getTime() - Date.now()) / BigInt(60 * 60 * 24 * 7 * 52)), data.balance.precision, hivePrice)
+            poweringDown: new BalanceData(vestsToHp(BigInt(data.vesting_withdraw_rate.amount) * BigInt(Math.max(0, new Date(data.next_vesting_withdrawal).getTime() - Date.now())) / BigInt(60 * 60 * 24 * 7 * 52)), data.balance.precision, hivePrice)
           },
           HBD: {
             liquid: new BalanceData(BigInt(data.hbd_balance.amount), data.hbd_balance.precision, 1),
-- 
GitLab


From f20370f864cfed5e5a53af2b17de7a048918ccac Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Tue, 28 Oct 2025 17:31:21 +0100
Subject: [PATCH 062/102] Add different layout for tokens view

---
 src/layouts/default.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 8b89d13..57bbafd 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -12,6 +12,12 @@ import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { toastError } from '@/utils/parse-error';
 
+const route = useRoute();
+
+const hasTokenInRoute = computed(() => {
+  return route.fullPath.includes('/tokens/');
+});
+
 const WalletOnboarding = defineAsyncComponent(() => import('@/components/onboarding/index'));
 
 const hasUser = ref(true);
@@ -50,7 +56,7 @@ const complete = async (data: { account: string; wallet: UsedWallet }) => {
 
 <template>
   <SidebarProvider>
-    <AppSidebar />
+    <AppSidebar :force-token-view="hasTokenInRoute" />
     <div class="w-full">
       <AppHeader />
       <main class="w-full h-[calc(100%-60px)] bg-background">
-- 
GitLab


From 8d6b693ef229c53484ecbaa30296e35c339f84f6 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 29 Oct 2025 09:22:02 +0100
Subject: [PATCH 063/102] Fix login state when scanning QR code

---
 src/pages/tokens/send-token.vue | 39 +++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index afcdc1c..506286b 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -201,8 +201,22 @@ const parseAssetAmount = (amountStr: string, precision: number): string => {
 
 // Handle send transaction
 const handleSend = async () => {
-  if (!token.value || !isLoggedIn.value) {
-    toastError('You must be logged in to send tokens', new Error('Not logged in'));
+  if (!token.value) {
+    toastError('Token not loaded', new Error('Token details not available'));
+    return;
+  }
+
+  // Check if user is logged in - if not, prompt them to log in first
+  if (!isLoggedIn.value || !CTokensProvider.getOperationalPublicKey()) {
+    toast.error('Please log in to your wallet first');
+    // Redirect to home page for login
+    router.push({
+      path: '/',
+      query: {
+        // Store the current URL to redirect back after login
+        redirect: route.fullPath
+      }
+    });
     return;
   }
 
@@ -294,7 +308,10 @@ const goBack = () => {
 
 // Initialize
 onMounted(async () => {
-  if (!isLoggedIn.value) {
+  // In receive mode (when someone scans QR code), allow viewing without login
+  // Login will be required when clicking "Send Token"
+  if (!isLoggedIn.value && !isReceiveMode.value) {
+    // Only require login immediately in send/generate QR mode
     toast.error('You must be logged in to use this feature');
     router.push('/');
     return;
@@ -313,8 +330,8 @@ onMounted(async () => {
 
   isLoading.value = false;
 
-  // Check ownership only if NOT in receive mode
-  if (!isReceiveMode.value && !isTokenOwner.value) {
+  // Check ownership only if NOT in receive mode AND user is logged in
+  if (!isReceiveMode.value && isLoggedIn.value && !isTokenOwner.value) {
     toast.error('You do not have permission to send this token');
     router.push({
       path: '/tokens/token',
@@ -323,8 +340,8 @@ onMounted(async () => {
     return;
   }
 
-  // Generate initial QR code if not in receive mode
-  if (!isReceiveMode.value)
+  // Generate initial QR code if not in receive mode and user is logged in
+  if (!isReceiveMode.value && isLoggedIn.value)
     await generateQRCode();
 });
 </script>
@@ -385,7 +402,7 @@ onMounted(async () => {
             {{ isReceiveMode ? 'Send Token' : 'Receive Token' }}
           </h1>
           <p class="text-muted-foreground">
-            {{ isReceiveMode ? 'Confirm and sned the token transfer.' : 'Scan the generated QR code and transfer the token.' }}
+            {{ isReceiveMode ? 'Confirm and send the token transfer.' : 'Scan the generated QR code and transfer the token.' }}
           </p>
         </div>
 
@@ -411,12 +428,12 @@ onMounted(async () => {
               </Label>
               <Input
                 id="sender"
-                :model-value="userOperationalKey"
+                :model-value="userOperationalKey || 'Not logged in'"
                 readonly
                 class="transition-colors bg-muted/50 cursor-not-allowed"
               />
               <p class="text-xs text-muted-foreground">
-                Sender operational public key
+                {{ userOperationalKey ? 'Sender operational public key' : 'You need to log in to send tokens' }}
               </p>
             </div>
 
@@ -543,7 +560,7 @@ onMounted(async () => {
                 :disabled="isSending || !isFormValid || (form.amount.trim() !== '' && !amountValidation.isValid)"
                 @click="handleSend"
               >
-                {{ isSending ? 'Sending...' : 'Send Token' }}
+                {{ isSending ? 'Sending...' : (isLoggedIn ? 'Send Token' : 'Log in to Send Token') }}
               </Button>
             </div>
           </CardContent>
-- 
GitLab


From d519760ea67ac85b0aae51cfe03f8a06f1b3f32c Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 29 Oct 2025 12:55:39 +0100
Subject: [PATCH 064/102] Add invoice generating

---
 src/pages/tokens/invoice.vue    | 353 ++++++++++++++++++++++++++++++++
 src/pages/tokens/send-token.vue |  96 +++++++--
 2 files changed, 429 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/tokens/invoice.vue

diff --git a/src/pages/tokens/invoice.vue b/src/pages/tokens/invoice.vue
new file mode 100644
index 0000000..e614871
--- /dev/null
+++ b/src/pages/tokens/invoice.vue
@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import { mdiArrowLeft, mdiDownload } from '@mdi/js';
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { toast } from 'vue-sonner';
+
+import HTMView from '@/components/HTMView.vue';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
+import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
+
+// Router
+const route = useRoute();
+const router = useRouter();
+
+// State
+const token = ref<CtokensAppToken | null>(null);
+const isLoading = ref(true);
+
+// Get params from route
+const fromName = computed(() => route.query.fromName as string | undefined);
+const fromPk = computed(() => route.query.fromPk as string);
+const toName = computed(() => route.query.toName as string | undefined);
+const toPk = computed(() => route.query.toPk as string);
+const amount = computed(() => route.query.amount as string);
+const nai = computed(() => route.query.nai as string);
+const precision = computed(() => route.query.precision as string);
+const memo = computed(() => route.query.memo as string | undefined);
+
+// Invoice metadata
+const invoiceNumber = computed(() => {
+  const timestamp = Date.now().toString().slice(-6);
+  return `INV-${timestamp}`;
+});
+
+const invoiceDate = computed(() => {
+  const now = new Date();
+  return now.toLocaleDateString('en-US', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric'
+  });
+});
+
+const tokenSymbol = computed(() => {
+  if (!token.value) return '';
+  const metadata = token.value.metadata as { symbol?: string } | undefined;
+  return metadata?.symbol || '';
+});
+
+// Format amount for display
+const formattedAmount = computed(() => {
+  if (!amount.value || !token.value) return '0.00';
+  const prec = token.value.precision || 0;
+  return parseFloat(amount.value).toFixed(prec);
+});
+
+// Mock download functions
+const downloadAsPDF = () => {
+  toast.success('PDF download functionality - coming soon!');
+  // TODO: Implement actual PDF generation
+};
+
+const downloadAsImage = () => {
+  toast.success('Image download functionality - coming soon!');
+  // TODO: Implement actual image generation
+};
+
+// Navigate back
+const goBack = () => {
+  router.back();
+};
+
+// Load token details
+const loadTokenDetails = async () => {
+  try {
+    const wax = await getWax();
+
+    // Fetch token details by NAI
+    const tokens = await wax.restApi.ctokensApi.registeredTokens({
+      nai: nai.value,
+      precision: Number(precision.value!)
+    });
+
+    if (!tokens || tokens.length === 0)
+      throw new Error(`Token with NAI ${nai.value} not found`);
+
+    token.value = tokens[0]!.liquid?.nai === nai.value ? tokens[0]!.liquid! : tokens[0]?.vesting?.nai === nai.value ? tokens[0]!.vesting! : null;
+
+    if (!token.value)
+      throw new Error(`Token with NAI ${nai.value} not found`);
+  } catch (error) {
+    toastError('Failed to load token details', error);
+    router.push('/tokens/list');
+  }
+};
+
+// Initialize
+onMounted(async () => {
+  // Validate required params
+  if (!fromPk.value || !toPk.value || !amount.value || !nai.value || !precision.value) {
+    toast.error('Missing required invoice parameters');
+    router.push('/tokens/list');
+    return;
+  }
+
+  isLoading.value = true;
+  await loadTokenDetails();
+  isLoading.value = false;
+});
+</script>
+
+<template>
+  <HTMView>
+    <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-2xl">
+      <!-- Header -->
+      <div class="flex items-center justify-between gap-4">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="gap-2 hover:bg-accent"
+          @click="goBack"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiArrowLeft"
+            />
+          </svg>
+          Back
+        </Button>
+      </div>
+
+      <!-- Loading State -->
+      <div
+        v-if="isLoading"
+        class="space-y-6"
+      >
+        <Card>
+          <CardContent class="p-8">
+            <Skeleton class="h-64 w-full" />
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Invoice -->
+      <div
+        v-else
+        class="space-y-6"
+      >
+        <!-- Invoice Card -->
+        <Card class="border-2">
+          <CardContent class="p-8 sm:p-12">
+            <div class="space-y-8">
+              <!-- Header Section -->
+              <div class="text-center border-b pb-6">
+                <div class="text-sm text-muted-foreground mb-1">
+                  {{ fromName || 'Sender' }}
+                </div>
+                <div
+                  v-if="fromPk"
+                  class="text-xs text-muted-foreground font-mono mb-4"
+                >
+                  {{ fromPk }}
+                </div>
+                <h1 class="text-3xl font-bold tracking-tight">
+                  INVOICE
+                </h1>
+              </div>
+
+              <!-- Invoice Details -->
+              <div class="flex justify-between text-sm">
+                <div>
+                  <div class="text-muted-foreground">
+                    Invoice#
+                  </div>
+                  <div class="font-medium">
+                    {{ invoiceNumber }}
+                  </div>
+                </div>
+                <div class="text-right">
+                  <div class="text-muted-foreground">
+                    Date
+                  </div>
+                  <div class="font-medium">
+                    {{ invoiceDate }}
+                  </div>
+                </div>
+              </div>
+
+              <Separator />
+
+              <!-- Items Table -->
+              <div class="space-y-4">
+                <div class="grid grid-cols-12 gap-4 text-sm font-medium text-muted-foreground border-b pb-2">
+                  <div class="col-span-1">
+                    #
+                  </div>
+                  <div class="col-span-5">
+                    Item
+                  </div>
+                  <div class="col-span-2 text-center">
+                    Qty
+                  </div>
+                  <div class="col-span-2 text-right">
+                    Rate
+                  </div>
+                  <div class="col-span-2 text-right">
+                    Amount
+                  </div>
+                </div>
+
+                <!-- Item Row -->
+                <div class="grid grid-cols-12 gap-4 text-sm">
+                  <div class="col-span-1">
+                    1
+                  </div>
+                  <div class="col-span-5">
+                    <div class="font-medium">
+                      Token Transfer
+                    </div>
+                    <div class="text-xs text-muted-foreground mt-1">
+                      {{ tokenSymbol }}
+                      <span
+                        v-if="!fromName || !toName"
+                        class="text-muted-foreground/70"
+                      >
+                        ({{ nai }})
+                      </span>
+                    </div>
+                  </div>
+                  <div class="col-span-2 text-center">
+                    1.00
+                  </div>
+                  <div class="col-span-2 text-right">
+                    {{ formattedAmount }}
+                  </div>
+                  <div class="col-span-2 text-right font-medium">
+                    {{ formattedAmount }}
+                  </div>
+                </div>
+
+                <Separator class="my-4" />
+
+                <!-- Subtotal -->
+                <div class="flex justify-end">
+                  <div class="w-64 space-y-2">
+                    <div class="flex justify-between text-sm">
+                      <span class="text-muted-foreground">Sub Total</span>
+                      <span class="font-medium">{{ formattedAmount }}</span>
+                    </div>
+                    <Separator />
+                    <div class="flex justify-between text-base font-bold">
+                      <span>TOTAL</span>
+                      <span>{{ formattedAmount }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <Separator />
+
+              <!-- Recipient Section -->
+              <div class="space-y-3">
+                <div class="bg-muted/30 p-4 rounded-lg space-y-2">
+                  <div class="text-sm font-medium">
+                    Recipient:
+                  </div>
+                  <div
+                    v-if="toPk"
+                    class="text-xs font-mono text-muted-foreground break-all"
+                  >
+                    {{ toPk }}
+                  </div>
+                </div>
+              </div>
+
+              <!-- Memo Section -->
+              <div
+                v-if="memo"
+                class="space-y-3"
+              >
+                <div class="text-sm font-medium">
+                  Memo:
+                </div>
+                <div class="bg-muted/30 p-4 rounded-lg">
+                  <p class="text-sm text-muted-foreground whitespace-pre-wrap">
+                    {{ memo }}
+                  </p>
+                </div>
+              </div>
+
+              <!-- Footer -->
+              <div class="text-center text-sm text-muted-foreground pt-6 border-t">
+                Thanks for your business.
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <!-- Action Buttons -->
+        <div class="flex flex-col sm:flex-row gap-3">
+          <Button
+            class="flex-1 gap-2"
+            @click="downloadAsPDF"
+          >
+            <svg
+              width="18"
+              height="18"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="flex-shrink-0"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiDownload"
+              />
+            </svg>
+            Download as PDF
+          </Button>
+          <Button
+            variant="outline"
+            class="flex-1 gap-2"
+            @click="downloadAsImage"
+          >
+            <svg
+              width="18"
+              height="18"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="flex-shrink-0"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiDownload"
+              />
+            </svg>
+            Download as Image
+          </Button>
+        </div>
+      </div>
+    </div>
+  </HTMView>
+</template>
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index 506286b..cdde8db 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { mdiArrowLeft, mdiArrowDown, mdiArrowUp } from '@mdi/js';
+import { mdiArrowLeft, mdiArrowDown, mdiArrowUp, mdiFileDocumentOutline } from '@mdi/js';
 import type { htm_operation } from '@mtyszczak-cargo/htm';
 import QRCode from 'qrcode';
 import { computed, onMounted, ref, watch } from 'vue';
@@ -62,10 +62,6 @@ const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKe
 const isLoggedIn = computed(() => !!settingsStore.settings.account);
 
 // Check if current user is the token owner
-const isTokenOwner = computed(() => {
-  if (!token.value?.owner || !CTokensProvider.getOperationalPublicKey()) return false;
-  return token.value.owner === CTokensProvider.getOperationalPublicKey();
-});
 
 const tokenName = computed(() => {
   if (!token.value) return 'Unknown Token';
@@ -306,6 +302,30 @@ const goBack = () => {
   });
 };
 
+// Generate invoice
+const generateInvoice = () => {
+  const params = new URLSearchParams({
+    fromPk: isReceiveMode.value ? userOperationalKey.value || '' : userOperationalKey.value || '',
+    toPk: isReceiveMode.value ? receiverKey.value || '' : userOperationalKey.value || '',
+    amount: form.value.amount || '0',
+    nai: nai.value,
+    precision: precision.value as string
+  });
+
+  // Add optional fields
+  if (form.value.memo)
+    params.append('memo', form.value.memo);
+
+  // You can add names if they are available from your stores/context
+  // params.append('fromName', 'Sender Name');
+  // params.append('toName', 'Receiver Name');
+
+  router.push({
+    path: '/tokens/invoice',
+    query: Object.fromEntries(params)
+  });
+};
+
 // Initialize
 onMounted(async () => {
   // In receive mode (when someone scans QR code), allow viewing without login
@@ -313,7 +333,6 @@ onMounted(async () => {
   if (!isLoggedIn.value && !isReceiveMode.value) {
     // Only require login immediately in send/generate QR mode
     toast.error('You must be logged in to use this feature');
-    router.push('/');
     return;
   }
 
@@ -330,16 +349,6 @@ onMounted(async () => {
 
   isLoading.value = false;
 
-  // Check ownership only if NOT in receive mode AND user is logged in
-  if (!isReceiveMode.value && isLoggedIn.value && !isTokenOwner.value) {
-    toast.error('You do not have permission to send this token');
-    router.push({
-      path: '/tokens/token',
-      query: { nai: nai.value, precision: precision.value }
-    });
-    return;
-  }
-
   // Generate initial QR code if not in receive mode and user is logged in
   if (!isReceiveMode.value && isLoggedIn.value)
     await generateQRCode();
@@ -393,7 +402,7 @@ onMounted(async () => {
 
       <!-- Send Form -->
       <div
-        v-else-if="token && (isTokenOwner || isReceiveMode)"
+        v-else-if="token && isLoggedIn"
         class="space-y-6"
       >
         <!-- Page Title -->
@@ -553,7 +562,7 @@ onMounted(async () => {
             <!-- Send Button (only in receive mode) -->
             <div
               v-if="isReceiveMode"
-              class="pt-4"
+              class="pt-4 space-y-3"
             >
               <Button
                 class="w-full"
@@ -562,12 +571,32 @@ onMounted(async () => {
               >
                 {{ isSending ? 'Sending...' : (isLoggedIn ? 'Send Token' : 'Log in to Send Token') }}
               </Button>
+              <Button
+                variant="outline"
+                class="w-full gap-2"
+                :disabled="!form.amount || !amountValidation.isValid"
+                @click="generateInvoice"
+              >
+                <svg
+                  width="18"
+                  height="18"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  class="flex-shrink-0"
+                >
+                  <path
+                    style="fill: currentColor"
+                    :d="mdiFileDocumentOutline"
+                  />
+                </svg>
+                Generate Invoice
+              </Button>
             </div>
           </CardContent>
         </Card>
 
-        <!-- QR Code Card (only in send mode) -->
-        <Card v-if="!isReceiveMode">
+        <!-- QR Code Card (always visible for logged in user) -->
+        <Card>
           <CardContent class="flex flex-col items-center">
             <div
               v-if="qrCodeDataUrl"
@@ -593,6 +622,33 @@ onMounted(async () => {
             </p>
           </CardContent>
         </Card>
+
+        <!-- Generate Invoice Button (only in send mode) -->
+        <div
+          v-if="!isReceiveMode"
+          class="flex justify-center"
+        >
+          <Button
+            variant="outline"
+            class="gap-2"
+            :disabled="!form.amount || !amountValidation.isValid"
+            @click="generateInvoice"
+          >
+            <svg
+              width="18"
+              height="18"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="flex-shrink-0"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiFileDocumentOutline"
+              />
+            </svg>
+            Generate Invoice
+          </Button>
+        </div>
       </div>
     </div>
   </HTMView>
-- 
GitLab


From c1ed95349cbe2044856f06a969c0cd283277c100 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 29 Oct 2025 13:40:29 +0100
Subject: [PATCH 065/102] Implement add to google wallet

---
 nuxt.config.ts                              |   3 +-
 package.json                                |   3 +
 pnpm-lock.yaml                              | 235 ++++++++++++++++++++
 server/api/google-wallet.ts                 | 101 +++++++++
 src/components/wallet/AddToGoogleWallet.vue |  54 +++++
 src/pages/tokens/register-account.vue       |  18 +-
 src/pages/tokens/send-token.vue             | 126 +++++++++--
 7 files changed, 513 insertions(+), 27 deletions(-)
 create mode 100644 server/api/google-wallet.ts
 create mode 100644 src/components/wallet/AddToGoogleWallet.vue

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1106371..14aab80 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -51,6 +51,7 @@ export default defineNuxtConfig({
       hiveChainId: '',
       snapOrigin: '',
       snapVersion: ''
-    }
+    },
+    googleApplicationCredentailsJson: {}
   }
 });
diff --git a/package.json b/package.json
index e3f68a0..5b4833a 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@pinia/nuxt": "0.11.2",
     "@stylistic/eslint-plugin": "^5.2.2",
     "@tanstack/vue-table": "^8.21.2",
+    "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^22.13.9",
     "@types/qrcode": "^1.5.6",
     "@typescript-eslint/eslint-plugin": "^8.38.0",
@@ -80,6 +81,8 @@
     "node": "^20.18.1 || >= 21.2"
   },
   "dependencies": {
+    "google-auth-library": "^10.4.2",
+    "jsonwebtoken": "^9.0.2",
     "qrcode": "^1.5.4"
   }
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 598dfc1..3fc3476 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      google-auth-library:
+        specifier: ^10.4.2
+        version: 10.4.2
+      jsonwebtoken:
+        specifier: ^9.0.2
+        version: 9.0.2
       qrcode:
         specifier: ^1.5.4
         version: 1.5.4
@@ -66,6 +72,9 @@ importers:
       '@tanstack/vue-table':
         specifier: ^8.21.2
         version: 8.21.2(vue@3.5.13(typescript@5.7.3))
+      '@types/jsonwebtoken':
+        specifier: ^9.0.10
+        version: 9.0.10
       '@types/node':
         specifier: ^22.13.9
         version: 22.13.9
@@ -1912,6 +1921,9 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/jsonwebtoken@9.0.10':
+    resolution: {integrity: sha512-asx5hIG9Qmf/1oStypjanR7iKTv0gXQ1Ov/jfrX6kS/EO0OFni8orbmGCn0672NHR3kXHwpAwR+B368ZGN/2rA==}
+
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
@@ -2506,6 +2518,9 @@ packages:
     resolution: {integrity: sha512-JMWsdF+O8Orq3EMukbUN1QfbLK9mX2CkUmQBcW2T0s8OmdAUL5LLM/6wFwSrqXzlXB13yhyK9gTKS1rIizOduQ==}
     hasBin: true
 
+  bignumber.js@9.3.1:
+    resolution: {integrity: sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ==}
+
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -2543,6 +2558,9 @@ packages:
     resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
     engines: {node: '>=8.0.0'}
 
+  buffer-equal-constant-time@1.0.1:
+    resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==}
+
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
@@ -2842,6 +2860,10 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  data-uri-to-buffer@4.0.1:
+    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
+    engines: {node: '>= 12'}
+
   data-view-buffer@1.0.2:
     resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
     engines: {node: '>= 0.4'}
@@ -3037,6 +3059,9 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  ecdsa-sig-formatter@1.0.11:
+    resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -3340,6 +3365,9 @@ packages:
   exsolve@1.0.7:
     resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
 
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
   extension-port-stream@3.0.0:
     resolution: {integrity: sha512-an2S5quJMiy5bnZKEf6AkfH/7r8CzHvhchU40gxN+OM6HPhe7Z9T1FUychcf2M9PpPOO0Hf7BAEfJkw2TDIBDw==}
     engines: {node: '>=12.0.0'}
@@ -3384,6 +3412,10 @@ packages:
       picomatch:
         optional: true
 
+  fetch-blob@3.2.0:
+    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
+    engines: {node: ^12.20 || >= 14.13}
+
   figures@6.1.0:
     resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
     engines: {node: '>=18'}
@@ -3430,6 +3462,10 @@ packages:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
+  formdata-polyfill@4.0.10:
+    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
+    engines: {node: '>=12.20.0'}
+
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
@@ -3471,6 +3507,14 @@ packages:
     resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
     engines: {node: '>=10'}
 
+  gaxios@7.1.2:
+    resolution: {integrity: sha512-/Szrn8nr+2TsQT1Gp8iIe/BEytJmbyfrbFh419DfGQSkEgNEhbPi7JRJuughjkTzPWgU9gBQf5AVu3DbHt0OXA==}
+    engines: {node: '>=18'}
+
+  gcp-metadata@8.1.1:
+    resolution: {integrity: sha512-dTCcAe9fRQf06ELwel6lWWFrEbstwjUBYEhr5VRGoC+iPDZQucHppCowaIp8b8v92tU1G4X4H3b/Y6zXZxkMsQ==}
+    engines: {node: '>=18'}
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -3555,6 +3599,14 @@ packages:
     resolution: {integrity: sha512-oB4vkQGqlMl682wL1IlWd02tXCbquGWM4voPEI85QmNKCaw8zGTm1f1rubFgkg3Eli2PtKlFgrnmUqasbQWlkw==}
     engines: {node: '>=20'}
 
+  google-auth-library@10.4.2:
+    resolution: {integrity: sha512-EKiQasw6aEdxSovPEf1oBxCEvxjFamZ6MPaVOSPXZMnqKFLo+rrYjHyjKlFfZcXiKi9qAH6cutr5WRqqa1jKhg==}
+    engines: {node: '>=18'}
+
+  google-logging-utils@1.1.1:
+    resolution: {integrity: sha512-rcX58I7nqpu4mbKztFeOAObbomBbHU2oIb/d3tJfF3dizGSApqtSwYJigGCooHdnMyQBIw8BrWyK96w3YXgr6A==}
+    engines: {node: '>=14'}
+
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -3565,6 +3617,10 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  gtoken@8.0.0:
+    resolution: {integrity: sha512-+CqsMbHPiSTdtSO14O51eMNlrp9N79gmeqmXeouJOhfucAedHw9noVe/n5uJk3tbKE6a+6ZCQg3RPhVhHByAIw==}
+    engines: {node: '>=18'}
+
   gzip-size@7.0.0:
     resolution: {integrity: sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -3927,6 +3983,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  json-bigint@1.0.0:
+    resolution: {integrity: sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==}
+
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
@@ -3951,6 +4010,22 @@ packages:
   jsonfile@6.2.0:
     resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
 
+  jsonwebtoken@9.0.2:
+    resolution: {integrity: sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==}
+    engines: {node: '>=12', npm: '>=6'}
+
+  jwa@1.4.2:
+    resolution: {integrity: sha512-eeH5JO+21J78qMvTIDdBXidBd6nG2kZjg5Ohz/1fpa28Z4CcsWUzJ1ZZyFq/3z3N17aZy+ZuBoHljASbL1WfOw==}
+
+  jwa@2.0.1:
+    resolution: {integrity: sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==}
+
+  jws@3.2.2:
+    resolution: {integrity: sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==}
+
+  jws@4.0.0:
+    resolution: {integrity: sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==}
+
   keygrip@1.1.0:
     resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}
     engines: {node: '>= 0.6'}
@@ -4037,15 +4112,36 @@ packages:
   lodash.defaults@4.2.0:
     resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
 
+  lodash.includes@4.3.0:
+    resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
+
   lodash.isarguments@3.1.0:
     resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
 
+  lodash.isboolean@3.0.3:
+    resolution: {integrity: sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==}
+
+  lodash.isinteger@4.0.4:
+    resolution: {integrity: sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==}
+
+  lodash.isnumber@3.0.3:
+    resolution: {integrity: sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.isstring@4.0.1:
+    resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
+
   lodash.memoize@4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
 
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  lodash.once@4.1.1:
+    resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
+
   lodash.uniq@4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
 
@@ -4251,6 +4347,11 @@ packages:
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
+  node-domexception@1.0.0:
+    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
+    engines: {node: '>=10.5.0'}
+    deprecated: Use your platform's native DOMException instead
+
   node-fetch-native@1.6.7:
     resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
 
@@ -4263,6 +4364,10 @@ packages:
       encoding:
         optional: true
 
+  node-fetch@3.3.2:
+    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   node-forge@1.3.1:
     resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
     engines: {node: '>= 6.13.0'}
@@ -5838,6 +5943,10 @@ packages:
       typescript:
         optional: true
 
+  web-streams-polyfill@3.3.3:
+    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
+    engines: {node: '>= 8'}
+
   webextension-polyfill@0.10.0:
     resolution: {integrity: sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g==}
 
@@ -7833,6 +7942,11 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
+  '@types/jsonwebtoken@9.0.10':
+    dependencies:
+      '@types/ms': 2.1.0
+      '@types/node': 22.13.9
+
   '@types/ms@2.1.0': {}
 
   '@types/node@22.13.9':
@@ -8576,6 +8690,8 @@ snapshots:
 
   baseline-browser-mapping@2.8.20: {}
 
+  bignumber.js@9.3.1: {}
+
   binary-extensions@2.3.0: {}
 
   bindings@1.5.0:
@@ -8616,6 +8732,8 @@ snapshots:
 
   buffer-crc32@1.0.0: {}
 
+  buffer-equal-constant-time@1.0.1: {}
+
   buffer-from@1.1.2: {}
 
   buffer@6.0.3:
@@ -8944,6 +9062,8 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  data-uri-to-buffer@4.0.1: {}
+
   data-view-buffer@1.0.2:
     dependencies:
       call-bound: 1.0.4
@@ -9080,6 +9200,10 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  ecdsa-sig-formatter@1.0.11:
+    dependencies:
+      safe-buffer: 5.2.1
+
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.109: {}
@@ -9554,6 +9678,8 @@ snapshots:
 
   exsolve@1.0.7: {}
 
+  extend@3.0.2: {}
+
   extension-port-stream@3.0.0:
     dependencies:
       readable-stream: 4.7.0
@@ -9592,6 +9718,11 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
+  fetch-blob@3.2.0:
+    dependencies:
+      node-domexception: 1.0.0
+      web-streams-polyfill: 3.3.3
+
   figures@6.1.0:
     dependencies:
       is-unicode-supported: 2.1.0
@@ -9640,6 +9771,10 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
+  formdata-polyfill@4.0.10:
+    dependencies:
+      fetch-blob: 3.2.0
+
   fraction.js@4.3.7: {}
 
   fresh@0.5.2: {}
@@ -9677,6 +9812,22 @@ snapshots:
 
   fuse.js@7.1.0: {}
 
+  gaxios@7.1.2:
+    dependencies:
+      extend: 3.0.2
+      https-proxy-agent: 7.0.6
+      node-fetch: 3.3.2
+    transitivePeerDependencies:
+      - supports-color
+
+  gcp-metadata@8.1.1:
+    dependencies:
+      gaxios: 7.1.2
+      google-logging-utils: 1.1.1
+      json-bigint: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
@@ -9794,12 +9945,33 @@ snapshots:
       slash: 5.1.0
       unicorn-magic: 0.3.0
 
+  google-auth-library@10.4.2:
+    dependencies:
+      base64-js: 1.5.1
+      ecdsa-sig-formatter: 1.0.11
+      gaxios: 7.1.2
+      gcp-metadata: 8.1.1
+      google-logging-utils: 1.1.1
+      gtoken: 8.0.0
+      jws: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  google-logging-utils@1.1.1: {}
+
   gopd@1.2.0: {}
 
   graceful-fs@4.2.11: {}
 
   graphemer@1.4.0: {}
 
+  gtoken@8.0.0:
+    dependencies:
+      gaxios: 7.1.2
+      jws: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   gzip-size@7.0.0:
     dependencies:
       duplexer: 0.1.2
@@ -10143,6 +10315,10 @@ snapshots:
 
   jsesc@3.1.0: {}
 
+  json-bigint@1.0.0:
+    dependencies:
+      bignumber.js: 9.3.1
+
   json-buffer@3.0.1: {}
 
   json-schema-to-typescript-lite@15.0.0:
@@ -10166,6 +10342,41 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  jsonwebtoken@9.0.2:
+    dependencies:
+      jws: 3.2.2
+      lodash.includes: 4.3.0
+      lodash.isboolean: 3.0.3
+      lodash.isinteger: 4.0.4
+      lodash.isnumber: 3.0.3
+      lodash.isplainobject: 4.0.6
+      lodash.isstring: 4.0.1
+      lodash.once: 4.1.1
+      ms: 2.1.3
+      semver: 7.7.3
+
+  jwa@1.4.2:
+    dependencies:
+      buffer-equal-constant-time: 1.0.1
+      ecdsa-sig-formatter: 1.0.11
+      safe-buffer: 5.2.1
+
+  jwa@2.0.1:
+    dependencies:
+      buffer-equal-constant-time: 1.0.1
+      ecdsa-sig-formatter: 1.0.11
+      safe-buffer: 5.2.1
+
+  jws@3.2.2:
+    dependencies:
+      jwa: 1.4.2
+      safe-buffer: 5.2.1
+
+  jws@4.0.0:
+    dependencies:
+      jwa: 2.0.1
+      safe-buffer: 5.2.1
+
   keygrip@1.1.0:
     dependencies:
       tsscmp: 1.0.6
@@ -10293,12 +10504,26 @@ snapshots:
 
   lodash.defaults@4.2.0: {}
 
+  lodash.includes@4.3.0: {}
+
   lodash.isarguments@3.1.0: {}
 
+  lodash.isboolean@3.0.3: {}
+
+  lodash.isinteger@4.0.4: {}
+
+  lodash.isnumber@3.0.3: {}
+
+  lodash.isplainobject@4.0.6: {}
+
+  lodash.isstring@4.0.1: {}
+
   lodash.memoize@4.1.2: {}
 
   lodash.merge@4.6.2: {}
 
+  lodash.once@4.1.1: {}
+
   lodash.uniq@4.5.0: {}
 
   lodash@4.17.21: {}
@@ -10559,12 +10784,20 @@ snapshots:
 
   node-addon-api@7.1.1: {}
 
+  node-domexception@1.0.0: {}
+
   node-fetch-native@1.6.7: {}
 
   node-fetch@2.7.0:
     dependencies:
       whatwg-url: 5.0.0
 
+  node-fetch@3.3.2:
+    dependencies:
+      data-uri-to-buffer: 4.0.1
+      fetch-blob: 3.2.0
+      formdata-polyfill: 4.0.10
+
   node-forge@1.3.1: {}
 
   node-gyp-build@4.8.4: {}
@@ -12390,6 +12623,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.7.3
 
+  web-streams-polyfill@3.3.3: {}
+
   webextension-polyfill@0.10.0: {}
 
   webextension-polyfill@0.12.0: {}
diff --git a/server/api/google-wallet.ts b/server/api/google-wallet.ts
new file mode 100644
index 0000000..84c574c
--- /dev/null
+++ b/server/api/google-wallet.ts
@@ -0,0 +1,101 @@
+import { GoogleAuth } from 'google-auth-library';
+import { defineEventHandler, readBody } from 'h3';
+import jwt from 'jsonwebtoken';
+
+const issuerId = '3388000000023034095';
+const classId = `${issuerId}.codelab_class`;
+
+const init = () => {
+  const config = useRuntimeConfig();
+
+  const credentials = config.googleApplicationCredentailsJson;
+
+  if (typeof credentials !== 'object')
+    throw new Error('Invalid Google Application Credentials');
+
+  new GoogleAuth({
+    credentials: credentials,
+    scopes: 'https://www.googleapis.com/auth/wallet_object.issuer'
+  });
+
+  return credentials;
+};
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event);
+  const operationalPublicKey = body.operationalPublicKey;
+
+  if (!operationalPublicKey)
+    return { error: 'Missing operationalPublicKey' };
+
+  const credentials = init();
+
+  // Use service account email for object suffix
+  const objectSuffix = `${credentials.client_email.replace(/[^\w.-]/g, '_')}`;
+  const objectId = `${issuerId}.${objectSuffix}`;
+  const barcodeValue = `${body.baseUrl}/tokens/send-token?to=${operationalPublicKey}`;
+
+  console.log(barcodeValue);
+
+  const genericObject = {
+    'id': `${objectId}`,
+    'classId': classId,
+    'genericType': 'GENERIC_TYPE_UNSPECIFIED',
+    'hexBackgroundColor': '#e62525',
+    'logo': {
+      'sourceUri': {
+        'uri': 'https://media.licdn.com/dms/image/v2/C560BAQEj8gDq4ohhoQ/company-logo_200_200/company-logo_200_200/0/1630629402152?e=2147483647&v=beta&t=WZow0_vCgExHDDmERSks6s_teABUIkfcaQDuA5oBegM'
+      }
+    },
+    'cardTitle': {
+      'defaultValue': {
+        'language': 'en',
+        'value': 'hallmann at HTM'
+      }
+    },
+    'subheader': {
+      'defaultValue': {
+        'language': 'en',
+        'value': 'HTM Account'
+      }
+    },
+    'header': {
+      'defaultValue': {
+        'language': 'en',
+        'value': 'hallmann'
+      }
+    },
+    'barcode': {
+      'type': 'QR_CODE',
+      'value': barcodeValue
+    },
+    'textModulesData': [
+      {
+        'header': 'Public Key',
+        'body': operationalPublicKey,
+        'id': 'publickey'
+      },
+      {
+        'header': 'Key',
+        'body': 'Operational',
+        'id': 'keytype'
+      }
+    ]
+  };
+
+  // JWT claims
+  const claims = {
+    iss: credentials.client_email,
+    aud: 'google',
+    origins: [],
+    typ: 'savetowallet',
+    payload: {
+      genericObjects: [genericObject]
+    }
+  };
+
+  const token = jwt.sign(claims, credentials.private_key, { algorithm: 'RS256' });
+  const saveUrl = `https://pay.google.com/gp/v/save/${token}`;
+
+  return { url: saveUrl };
+});
diff --git a/src/components/wallet/AddToGoogleWallet.vue b/src/components/wallet/AddToGoogleWallet.vue
new file mode 100644
index 0000000..8edb4d1
--- /dev/null
+++ b/src/components/wallet/AddToGoogleWallet.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { toast } from 'vue-sonner';
+
+import { Button } from '@/components/ui/button';
+
+import CTokensProvider from '~/src/utils/wallet/ctokens/signer';
+
+// Google Wallet integration
+const googleWalletLoading = ref(false);
+
+const addToGoogleWallet = async () => {
+  googleWalletLoading.value = true;
+
+  try {
+    const operationalPublicKey = CTokensProvider.getOperationalPublicKey();
+    const baseUrl = window.location.origin;
+    const res = await fetch('/api/google-wallet', {
+      method: 'POST',
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ operationalPublicKey, baseUrl })
+    });
+    const data = await res.json();
+    if (data.url)
+      window.open(data.url, '_blank');
+    else
+      toast.error('Failed to generate Google Wallet pass');
+  } catch (_err) {
+    toast.error('Error generating Google Wallet pass');
+  } finally {
+    googleWalletLoading.value = false;
+  }
+};
+</script>
+
+<template>
+  <Button
+    class="mt-2 w-full flex items-center justify-center gap-2 px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-md shadow hover:shadow-md transition-all duration-150 active:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
+    :disabled="googleWalletLoading"
+    @click="addToGoogleWallet"
+  >
+    <svg width="20" height="20" viewBox="0 0 48 48" class="mr-2">
+      <g>
+        <path fill="#4285F4" d="M24 9.5c3.54 0 6.73 1.22 9.24 3.22l6.9-6.9C36.16 2.36 30.4 0 24 0 14.82 0 6.73 5.48 2.69 13.44l8.06 6.27C12.7 13.13 17.89 9.5 24 9.5z"/>
+        <path fill="#34A853" d="M46.1 24.5c0-1.64-.15-3.22-.43-4.75H24v9.02h12.44c-.54 2.9-2.18 5.36-4.64 7.02l7.18 5.59C43.98 37.13 46.1 31.29 46.1 24.5z"/>
+        <path fill="#FBBC05" d="M10.75 28.71c-1.13-3.36-1.13-6.97 0-10.33l-8.06-6.27C.64 16.36 0 20.09 0 24c0 3.91.64 7.64 2.69 11.09l8.06-6.27z"/>
+        <path fill="#EA4335" d="M24 48c6.4 0 12.16-2.36 16.14-6.48l-7.18-5.59c-2.01 1.35-4.59 2.14-7.46 2.14-6.11 0-11.3-3.63-13.25-8.82l-8.06 6.27C6.73 42.52 14.82 48 24 48z"/>
+      </g>
+    </svg>
+    <span v-if="googleWalletLoading">Adding to Google Wallet...</span>
+    <span v-else>Add to Google Wallet</span>
+  </Button>
+</template>
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index fcd7fb7..a475d0f 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -18,6 +18,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
+import AddToGoogleWallet from '@/components/wallet/AddToGoogleWallet.vue';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
@@ -356,13 +357,16 @@ onMounted(() => {
           </div>
 
           <!-- Action Button -->
-          <Button
-            size="lg"
-            class="mt-4"
-            @click="goToMyAccount"
-          >
-            Go to My Account
-          </Button>
+          <div class="flex flex-col gap-4 w-full">
+            <Button
+              size="lg"
+              class="mt-4"
+              @click="goToMyAccount"
+            >
+              Go to My Account
+            </Button>
+            <AddToGoogleWallet />
+          </div>
         </div>
       </CardContent>
     </Card>
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index cdde8db..17f9903 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -41,17 +41,22 @@ const qrCodeDataUrl = ref<string>('');
 
 // Form state
 const form = ref({
+  nai: '',
+  precision: '',
   amount: '',
   memo: ''
 });
 
-// Get NAI and precision from route parameters
-const nai = computed(() => route.query.nai as string);
-const precision = computed(() => route.query.precision);
+// Get NAI and precision from route parameters or form
+const nai = computed(() => route.query.nai as string || form.value.nai);
+const precision = computed(() => route.query.precision as string || form.value.precision);
 const receiverKey = computed(() => route.query.to as string | undefined);
 const queryAmount = computed(() => route.query.amount as string | undefined);
 const queryMemo = computed(() => route.query.memo as string | undefined);
 
+// Check if NAI is provided in URL
+const hasNaiFromUrl = computed(() => !!route.query.nai);
+
 // Check if we're in receive mode (when 'to' is in query params)
 // When 'to' is present, we're actually sending (confirming a transfer request)
 const isReceiveMode = computed(() => !!receiverKey.value);
@@ -140,6 +145,13 @@ const validateAmountPrecision = (amount: string, precision: number): { isValid:
 
 // Form validation
 const isFormValid = computed(() => {
+  // NAI and precision are required if not provided in URL
+  if (!hasNaiFromUrl.value) {
+    if (!form.value.nai.trim() || !form.value.precision.trim()) return false;
+    const precisionNum = parseInt(form.value.precision);
+    if (isNaN(precisionNum) || precisionNum < 0 || precisionNum > 18) return false;
+  }
+
   // Amount is optional, but if provided, it must be valid
   if (form.value.amount.trim() === '')
     return true; // Valid when empty (amount is optional)
@@ -154,7 +166,7 @@ const generateQRCode = async () => {
     const baseUrl = window.location.origin;
     const params = new URLSearchParams({
       nai: nai.value,
-      precision: precision.value as string,
+      precision: precision.value,
       to: userOperationalKey.value || ''
     });
 
@@ -182,9 +194,26 @@ const generateQRCode = async () => {
   }
 };
 
-// Watch form changes and regenerate QR code (only in send mode)
+// Watch NAI and precision changes to load token details
+watch([() => form.value.nai, () => form.value.precision], async (newValues, oldValues) => {
+  const [newNai, newPrecision] = newValues;
+  const [oldNai, oldPrecision] = oldValues;
+
+  // Only load if both are provided and have changed
+  if (newNai && newPrecision && (newNai !== oldNai || newPrecision !== oldPrecision)) {
+    isLoading.value = true;
+    await loadTokenDetails();
+    isLoading.value = false;
+
+    // Generate QR code if in send mode and logged in
+    if (!isReceiveMode.value && isLoggedIn.value)
+      await generateQRCode();
+  }
+});
+
+// Watch form amount and memo changes to regenerate QR code
 watch([() => form.value.amount, () => form.value.memo, userOperationalKey], async () => {
-  if (!isReceiveMode.value)
+  if (!isReceiveMode.value && nai.value && precision.value && isLoggedIn.value)
     await generateQRCode();
 }, { immediate: false });
 
@@ -272,13 +301,15 @@ const handleSend = async () => {
 
 // Load token details
 const loadTokenDetails = async () => {
+  if (!nai.value || !precision.value) return;
+
   try {
     const wax = await getWax();
 
     // Fetch token details by NAI
     const tokens = await wax.restApi.ctokensApi.registeredTokens({
       nai: nai.value,
-      precision: Number(precision.value!)
+      precision: Number(precision.value)
     });
 
     if (!tokens || tokens.length === 0)
@@ -309,7 +340,7 @@ const generateInvoice = () => {
     toPk: isReceiveMode.value ? receiverKey.value || '' : userOperationalKey.value || '',
     amount: form.value.amount || '0',
     nai: nai.value,
-    precision: precision.value as string
+    precision: precision.value
   });
 
   // Add optional fields
@@ -337,7 +368,10 @@ onMounted(async () => {
   }
 
   isLoading.value = true;
-  await loadTokenDetails();
+
+  // Initialize form with query params
+  form.value.nai = route.query.nai as string || '';
+  form.value.precision = route.query.precision as string || '';
 
   // Initialize form with query params if in receive mode
   if (isReceiveMode.value) {
@@ -347,10 +381,14 @@ onMounted(async () => {
       addingMemo.value = true;
   }
 
+  // Load token details if NAI and precision are available
+  if (nai.value && precision.value)
+    await loadTokenDetails();
+
   isLoading.value = false;
 
-  // Generate initial QR code if not in receive mode and user is logged in
-  if (!isReceiveMode.value && isLoggedIn.value)
+  // Generate initial QR code if not in receive mode and user is logged in and has NAI/precision
+  if (!isReceiveMode.value && isLoggedIn.value && nai.value && precision.value)
     await generateQRCode();
 });
 </script>
@@ -402,16 +440,16 @@ onMounted(async () => {
 
       <!-- Send Form -->
       <div
-        v-else-if="token && isLoggedIn"
+        v-else-if="(token && isLoggedIn) || isReceiveMode"
         class="space-y-6"
       >
         <!-- Page Title -->
         <div>
           <h1 class="text-3xl font-bold text-foreground mb-2">
-            {{ isReceiveMode ? 'Send Token' : 'Receive Token' }}
+            {{ isReceiveMode ? 'Send Token' : (hasNaiFromUrl ? 'Receive Token' : 'Send/Receive Token') }}
           </h1>
           <p class="text-muted-foreground">
-            {{ isReceiveMode ? 'Confirm and send the token transfer.' : 'Scan the generated QR code and transfer the token.' }}
+            {{ isReceiveMode ? 'Confirm and send the token transfer.' : (hasNaiFromUrl ? 'Scan the generated QR code and transfer the token.' : 'Enter token details and generate a QR code for transfer.') }}
           </p>
         </div>
 
@@ -420,10 +458,60 @@ onMounted(async () => {
           <CardHeader>
             <CardTitle>Transfer details</CardTitle>
             <CardDescription>
-              {{ isReceiveMode ? 'Review the transfer details' : 'Specify the transfer amount' }}
+              {{ isReceiveMode ? 'Review the transfer details' : (hasNaiFromUrl ? 'Specify the transfer amount' : 'Enter token details and specify the transfer amount') }}
             </CardDescription>
           </CardHeader>
           <CardContent class="space-y-6">
+            <!-- NAI Input (only when not provided in URL) -->
+            <div
+              v-if="!hasNaiFromUrl"
+              class="space-y-2"
+            >
+              <Label
+                for="nai"
+                class="text-sm font-medium text-foreground"
+              >
+                Token NAI
+              </Label>
+              <Input
+                id="nai"
+                v-model="form.nai"
+                type="text"
+                placeholder="Enter token NAI"
+                class="transition-colors"
+              />
+              <p class="text-xs text-muted-foreground">
+                The Non-Fungible Asset Identifier of the token
+              </p>
+            </div>
+
+            <!-- Precision Input (only when not provided in URL) -->
+            <div
+              v-if="!hasNaiFromUrl"
+              class="space-y-2"
+            >
+              <Label
+                for="precision"
+                class="text-sm font-medium text-foreground"
+              >
+                Precision
+              </Label>
+              <Input
+                id="precision"
+                v-model="form.precision"
+                type="number"
+                placeholder="Enter precision (0-18)"
+                min="0"
+                max="18"
+                class="transition-colors"
+              />
+              <p class="text-xs text-muted-foreground">
+                Number of decimal places for the token (0-18)
+              </p>
+            </div>
+
+            <Separator v-if="!hasNaiFromUrl" />
+
             <!-- Sender -->
             <div
               v-if="isReceiveMode"
@@ -595,8 +683,8 @@ onMounted(async () => {
           </CardContent>
         </Card>
 
-        <!-- QR Code Card (always visible for logged in user) -->
-        <Card>
+        <!-- QR Code Card (visible when NAI and precision are available) -->
+        <Card v-if="nai && precision && !isReceiveMode">
           <CardContent class="flex flex-col items-center">
             <div
               v-if="qrCodeDataUrl"
@@ -623,9 +711,9 @@ onMounted(async () => {
           </CardContent>
         </Card>
 
-        <!-- Generate Invoice Button (only in send mode) -->
+        <!-- Generate Invoice Button (only in send mode when NAI/precision available) -->
         <div
-          v-if="!isReceiveMode"
+          v-if="!isReceiveMode && nai && precision"
           class="flex justify-center"
         >
           <Button
-- 
GitLab


From cf1da82b1e248816cd6156f599f51fe7190c65e4 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Wed, 29 Oct 2025 16:59:27 +0100
Subject: [PATCH 066/102] Improve error handling in google-wallet.ts

---
 .env.example                                |  1 +
 nuxt.config.ts                              |  2 +-
 server/api/google-wallet.ts                 | 11 +++++++----
 src/components/wallet/AddToGoogleWallet.vue | 18 +++++++++---------
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/.env.example b/.env.example
index 931b348..8abb5e1 100644
--- a/.env.example
+++ b/.env.example
@@ -11,6 +11,7 @@ NUXT_PUBLIC_SNAP_ORIGIN=
 NUXT_PUBLIC_CTOKENS_API_URL=
 NUXT_PUBLIC_HIVE_NODE_ENDPOINT=
 NUXT_PUBLIC_HIVE_CHAIN_ID=
+NUXT_GOOGLE_APPLICATION_CREDENTIALS_JSON=
 
 # For development, you can set a mock server URL
 # NUXT_PUBLIC_CTOKENS_API_URL=http://localhost:8080/mock-ctokens-api
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 14aab80..83cdb3e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -52,6 +52,6 @@ export default defineNuxtConfig({
       snapOrigin: '',
       snapVersion: ''
     },
-    googleApplicationCredentailsJson: {}
+    googleApplicationCredentialsJson: {}
   }
 });
diff --git a/server/api/google-wallet.ts b/server/api/google-wallet.ts
index 84c574c..6a49312 100644
--- a/server/api/google-wallet.ts
+++ b/server/api/google-wallet.ts
@@ -8,7 +8,7 @@ const classId = `${issuerId}.codelab_class`;
 const init = () => {
   const config = useRuntimeConfig();
 
-  const credentials = config.googleApplicationCredentailsJson;
+  const credentials = config.googleApplicationCredentialsJson;
 
   if (typeof credentials !== 'object')
     throw new Error('Invalid Google Application Credentials');
@@ -29,13 +29,16 @@ export default defineEventHandler(async (event) => {
     return { error: 'Missing operationalPublicKey' };
 
   const credentials = init();
+  const barcodeValue = `${body.baseUrl}/tokens/send-token?to=${operationalPublicKey}`;
+
+  console.log('Creating QR code leading to:', barcodeValue);
+
+  if (!credentials.client_email || !credentials.private_key)
+    throw createError({ statusCode: 500, message: 'Invalid service account credentials' });
 
   // Use service account email for object suffix
   const objectSuffix = `${credentials.client_email.replace(/[^\w.-]/g, '_')}`;
   const objectId = `${issuerId}.${objectSuffix}`;
-  const barcodeValue = `${body.baseUrl}/tokens/send-token?to=${operationalPublicKey}`;
-
-  console.log(barcodeValue);
 
   const genericObject = {
     'id': `${objectId}`,
diff --git a/src/components/wallet/AddToGoogleWallet.vue b/src/components/wallet/AddToGoogleWallet.vue
index 8edb4d1..99e6d13 100644
--- a/src/components/wallet/AddToGoogleWallet.vue
+++ b/src/components/wallet/AddToGoogleWallet.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { toast } from 'vue-sonner';
 
 import { Button } from '@/components/ui/button';
-
-import CTokensProvider from '~/src/utils/wallet/ctokens/signer';
+import { toastError } from '@/utils/parse-error';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 // Google Wallet integration
 const googleWalletLoading = ref(false);
@@ -21,13 +20,14 @@ const addToGoogleWallet = async () => {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ operationalPublicKey, baseUrl })
     });
-    const data = await res.json();
-    if (data.url)
-      window.open(data.url, '_blank');
+    const data = await res.text();
+    const parsed = JSON.parse(data);
+    if (parsed.url && !parsed.error)
+      window.open(parsed.url, '_blank');
     else
-      toast.error('Failed to generate Google Wallet pass');
-  } catch (_err) {
-    toast.error('Error generating Google Wallet pass');
+      toastError('Failed to generate Google Wallet pass', new Error(parsed.message || data, { cause: parsed }));
+  } catch (error) {
+    toastError('Error generating Google Wallet pass', error);
   } finally {
     googleWalletLoading.value = false;
   }
-- 
GitLab


From c9c5c9182dc24981504cad191e1d39d3b7d79835 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Thu, 30 Oct 2025 10:14:02 +0100
Subject: [PATCH 067/102] Hide memo input by default

---
 npm-common-config               |  2 +-
 src/pages/tokens/my-balance.vue | 51 ++++++++++++++++++++++++++++---
 src/pages/tokens/token.vue      | 54 +++++++++++++++++++++++++++++----
 3 files changed, 95 insertions(+), 12 deletions(-)

diff --git a/npm-common-config b/npm-common-config
index d5ec71a..5748d21 160000
--- a/npm-common-config
+++ b/npm-common-config
@@ -1 +1 @@
-Subproject commit d5ec71aeb45b9af6bd644bdc4bb2194d85e2be19
+Subproject commit 5748d218bce6541d4c7f932fbe65f8ef46a3df45
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index c68e576..58eef21 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -15,13 +15,13 @@ import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import HTMView from '@/components/HTMView.vue';
-import MemoInput from '@/components/MemoInput.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
+import { Textarea } from '@/components/ui/textarea';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useTokensStore } from '@/stores/tokens.store';
 import { getWax } from '@/stores/wax.store';
@@ -62,6 +62,7 @@ const isTransferDialogOpen = ref(false);
 const transferAmount = ref('');
 const transferRecipient = ref('');
 const transferMemo = ref('');
+const addingMemo = ref(false);
 const selectedTokenForTransfer = ref<CtokensAppBalance | null>(null);
 const isTransferLoading = ref(false);
 
@@ -1225,10 +1226,50 @@ onMounted(async () => {
               </p>
             </div>
 
-            <MemoInput
-              v-model="transferMemo"
-              :disabled="isTransferLoading"
-            />
+            <!-- memo -->
+            <div
+              v-if="addingMemo || (transferMemo && transferMemo.trim())"
+              class="space-y-2"
+            >
+              <Label
+                for="memo"
+                class="text-sm font-medium text-foreground"
+              >
+                Memo
+              </Label>
+              <Textarea
+                id="memo"
+                v-model="transferMemo"
+                placeholder="Add memo..."
+                rows="4"
+                :disabled="isTransferLoading"
+                class="resize-none"
+              />
+              <p class="text-xs text-muted-foreground">
+                A brief memo for token transfer
+              </p>
+            </div>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              class="gap-2"
+              @click="addingMemo = !addingMemo"
+            >
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="flex-shrink-0"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="addingMemo ? mdiArrowUp : mdiArrowDown"
+                />
+              </svg>
+              {{ addingMemo ? 'Collapse' : 'Add Memo' }}
+            </Button>
           </div>
 
           <div class="flex justify-end gap-2">
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index b6a3fc9..f26b485 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { mdiPencilOutline, mdiContentCopy, mdiCheck, mdiQrcodeScan } from '@mdi/js';
+import { mdiPencilOutline, mdiContentCopy, mdiCheck, mdiQrcodeScan, mdiArrowDown, mdiArrowUp } from '@mdi/js';
 import type { htm_operation } from '@mtyszczak-cargo/htm';
 import { onMounted, ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import HTMView from '@/components/HTMView.vue';
-import MemoInput from '@/components/MemoInput.vue';
 import { AlertDescription, Alert } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -14,6 +13,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
+import { Textarea } from '@/components/ui/textarea';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
@@ -55,6 +55,9 @@ const transferForm = ref({
   memo: ''
 });
 
+// Show/hide memo field
+const addingMemo = ref(false);
+
 // Stake/Unstake form
 const stakeForm = ref({
   amount: '',
@@ -1116,10 +1119,49 @@ onMounted(async () => {
                   </p>
                 </div>
 
-                <MemoInput
-                  v-model="transferForm.memo"
-                  :disabled="isTransferring"
-                />
+                <div
+                  v-if="addingMemo || (transferForm.memo && transferForm.memo.trim())"
+                  class="space-y-2"
+                >
+                  <Label
+                    for="memo"
+                    class="text-sm font-medium text-foreground"
+                  >
+                    Memo
+                  </Label>
+                  <Textarea
+                    id="memo"
+                    v-model="transferForm.memo"
+                    placeholder="Add memo..."
+                    rows="4"
+                    :disabled="isTransferring"
+                    class="resize-none"
+                  />
+                  <p class="text-xs text-muted-foreground">
+                    A brief memo for token transfer
+                  </p>
+                </div>
+
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  class="gap-2"
+                  @click="addingMemo = !addingMemo"
+                >
+                  <svg
+                    width="16"
+                    height="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="flex-shrink-0"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      :d="addingMemo ? mdiArrowUp : mdiArrowDown"
+                    />
+                  </svg>
+                  {{ addingMemo ? 'Collapse' : 'Add Memo' }}
+                </Button>
 
                 <Button
                   class="w-full"
-- 
GitLab


From 1b5aa2c69b89edf9429f35787d2e05bc1443bb1b Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Thu, 30 Oct 2025 11:14:54 +0100
Subject: [PATCH 068/102] Imeplement token selector component

---
 src/components/tokens/TokenSelector.vue | 172 ++++++++++++++++++++++++
 src/pages/tokens/send-token.vue         | 144 +++++++++++++-------
 2 files changed, 266 insertions(+), 50 deletions(-)
 create mode 100644 src/components/tokens/TokenSelector.vue

diff --git a/src/components/tokens/TokenSelector.vue b/src/components/tokens/TokenSelector.vue
new file mode 100644
index 0000000..7c73bb5
--- /dev/null
+++ b/src/components/tokens/TokenSelector.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { Check, Search } from 'lucide-vue-next';
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/components/ui/combobox';
+import { useTokensStore } from '@/stores/tokens.store';
+import type { CtokensAppBalance } from '@/utils/wallet/ctokens/api';
+
+interface TokenOption {
+  balance: CtokensAppBalance;
+  displayName: string;
+  displayBalance: string;
+}
+
+interface Props {
+  modelValue?: string; // Selected NAI
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: 'Select a token...'
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const tokensStore = useTokensStore();
+
+// Reactive state
+const searchQuery = ref('');
+const selectedValue = ref<string | null>(props.modelValue || null);
+
+// Watch selectedValue and emit changes
+watch(selectedValue, (newValue) => {
+  emit('update:modelValue', newValue);
+});
+
+// Watch props.modelValue and update selectedValue
+watch(() => props.modelValue, (newValue) => {
+  selectedValue.value = newValue || null;
+});
+
+// Get user's token balances with positive amounts
+const ownedTokens = computed((): TokenOption[] => {
+  return tokensStore.balances
+    .filter(balance => {
+      // Filter out zero balances
+      const amount = BigInt(balance.amount || '0');
+      return amount > 0;
+    })
+    .map(balance => {
+      // Get token metadata for display name
+      const tokenDef = tokensStore.getTokenDefinitionByNAI(balance.nai!);
+      const metadata = balance.metadata as Record<string, string> | undefined;
+      const tokenMetadata = tokenDef?.metadata as Record<string, string> | undefined;
+
+      // Use symbol from balance metadata, then token definition, then fallback to NAI
+      const symbol = metadata?.symbol || tokenMetadata?.symbol || balance.nai || 'Unknown';
+
+      // Format balance amount with proper precision
+      let formattedBalance = '0';
+      try {
+        const numAmount = parseFloat(balance.amount || '0');
+        const precision = balance.precision || 0;
+        formattedBalance = numAmount.toFixed(Math.min(precision, 6)); // Limit to 6 decimal places for display
+      } catch (error) {
+        console.warn('Failed to format balance:', error);
+        formattedBalance = balance.amount || '0';
+      }
+
+      return {
+        balance,
+        displayName: symbol,
+        displayBalance: formattedBalance
+      };
+    })
+    .sort((a, b) => a.displayName.localeCompare(b.displayName));
+});
+
+// Filtered tokens based on search query
+const filteredTokens = computed((): TokenOption[] => {
+  if (!searchQuery.value.trim())
+    return ownedTokens.value;
+
+  const query = searchQuery.value.toLowerCase();
+  return ownedTokens.value.filter(token =>
+    token.displayName.toLowerCase().includes(query) ||
+    token.balance.nai?.toLowerCase().includes(query)
+  );
+});
+
+// Selected token
+const selectedToken = computed(() => {
+  return ownedTokens.value.find(token => token.balance.nai === selectedValue.value);
+});
+
+// Watch for changes in balances to ensure we have the latest data
+watch(() => tokensStore.balances, () => {
+  // Balances updated, component will re-compute ownedTokens
+}, { deep: true, immediate: true });
+
+// Load balances on mount if not already loaded
+onMounted(async () => {
+  if (tokensStore.balances.length === 0)
+    await tokensStore.loadBalances();
+});
+</script>
+
+<template>
+  <Combobox v-model="selectedValue">
+    <ComboboxAnchor class="relative w-full">
+      <ComboboxTrigger class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
+        <div class="flex items-center gap-2 flex-1 min-w-0">
+          <Search class="h-4 w-4 shrink-0 text-muted-foreground" />
+          <div
+            v-if="selectedToken"
+            class="flex items-center gap-3 truncate flex-1 min-w-0"
+          >
+            <div class="flex flex-col items-start min-w-0 flex-1">
+              <span class="font-semibold text-foreground truncate">{{ selectedToken.displayName }}</span>
+              <span class="text-xs text-muted-foreground">Balance: {{ selectedToken.displayBalance }}</span>
+            </div>
+          </div>
+          <span
+            v-else
+            class="text-muted-foreground font-medium truncate"
+          >
+            {{ placeholder }}
+          </span>
+        </div>
+      </ComboboxTrigger>
+      <ComboboxList class="w-full mt-1 bg-popover border border-border rounded-lg shadow-lg p-0 max-h-64 overflow-hidden">
+        <div class="flex items-center border-b border-border px-4 py-2 bg-muted/50">
+          <Search class="mr-3 h-4 w-4 shrink-0 text-muted-foreground" />
+          <ComboboxInput
+            v-model="searchQuery"
+            class="flex h-8 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            placeholder="Search tokens..."
+          />
+        </div>
+        <ComboboxEmpty class="py-8 text-center text-sm text-muted-foreground">
+          <div class="flex flex-col items-center gap-2">
+            <Search class="h-8 w-8 opacity-40" />
+            <span>No tokens found.</span>
+          </div>
+        </ComboboxEmpty>
+        <ComboboxGroup class="max-h-48 overflow-y-auto">
+          <ComboboxItem
+            v-for="token in filteredTokens"
+            :key="token.balance.nai"
+            :value="token.balance.nai!"
+            class="cursor-pointer px-4 py-3 hover:bg-accent hover:text-accent-foreground transition-colors focus:bg-accent focus:text-accent-foreground"
+          >
+            <div class="flex w-full items-center justify-between gap-3">
+              <div class="flex flex-col items-start min-w-0 flex-1">
+                <span class="font-semibold text-foreground truncate">{{ token.displayName }}</span>
+                <span class="text-xs text-muted-foreground">
+                  Balance: {{ token.displayBalance }}
+                </span>
+              </div>
+              <ComboboxItemIndicator>
+                <div class="flex items-center justify-center w-5 h-5 rounded-full bg-primary">
+                  <Check class="h-3 w-3 text-primary-foreground" />
+                </div>
+              </ComboboxItemIndicator>
+            </div>
+          </ComboboxItem>
+        </ComboboxGroup>
+      </ComboboxList>
+    </ComboboxAnchor>
+  </Combobox>
+</template>
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index 17f9903..744e9f2 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -7,6 +7,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import HTMView from '@/components/HTMView.vue';
+import TokenSelector from '@/components/tokens/TokenSelector.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -38,6 +39,7 @@ const isUpdating = ref(false);
 const isSending = ref(false);
 const addingMemo = ref(false);
 const qrCodeDataUrl = ref<string>('');
+const transferCompleted = ref(false);
 
 // Form state
 const form = ref({
@@ -47,8 +49,15 @@ const form = ref({
   memo: ''
 });
 
-// Get NAI and precision from route parameters or form
-const nai = computed(() => route.query.nai as string || form.value.nai);
+// Selected token NAI from TokenSelector (used when only 'to' is provided)
+const selectedTokenNai = ref<string>('');
+
+// Get NAI and precision from route parameters or form or selected token
+const nai = computed(() => {
+  if (route.query.nai) return route.query.nai as string;
+  if (selectedTokenNai.value) return selectedTokenNai.value;
+  return form.value.nai;
+});
 const precision = computed(() => route.query.precision as string || form.value.precision);
 const receiverKey = computed(() => route.query.to as string | undefined);
 const queryAmount = computed(() => route.query.amount as string | undefined);
@@ -61,6 +70,11 @@ const hasNaiFromUrl = computed(() => !!route.query.nai);
 // When 'to' is present, we're actually sending (confirming a transfer request)
 const isReceiveMode = computed(() => !!receiverKey.value);
 
+// Check if we should show token selector (when only 'to' is provided)
+const shouldShowTokenSelector = computed(() => {
+  return isReceiveMode.value && !hasNaiFromUrl.value && isLoggedIn.value;
+});
+
 const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
 
 // Check if user is logged in
@@ -81,9 +95,14 @@ const tokenSymbol = computed(() => {
 });
 
 const amountValidation = computed(() => {
-  if (!form.value.amount || !token.value)
-    return { isValid: false, error: '' };
-
+  if (!form.value.amount) {
+    // Empty amount is valid (amount is optional)
+    return { isValid: true, error: '' };
+  }
+  if (!token.value) {
+    // If token is not loaded, don't validate amount
+    return { isValid: true, error: '' };
+  }
   return validateAmountPrecision(form.value.amount, token.value.precision || 0);
 });
 
@@ -145,17 +164,20 @@ const validateAmountPrecision = (amount: string, precision: number): { isValid:
 
 // Form validation
 const isFormValid = computed(() => {
-  // NAI and precision are required if not provided in URL
-  if (!hasNaiFromUrl.value) {
+  // Receive mode: only token and amount validation matter
+  if (isReceiveMode.value) {
+    if (!token.value) return false;
+    if (form.value.amount.trim() === '') return true;
+    return amountValidation.value.isValid;
+  }
+  // Send mode: NAI and precision required if not from URL or selector
+  if (!hasNaiFromUrl.value && !shouldShowTokenSelector.value) {
     if (!form.value.nai.trim() || !form.value.precision.trim()) return false;
     const precisionNum = parseInt(form.value.precision);
     if (isNaN(precisionNum) || precisionNum < 0 || precisionNum > 18) return false;
   }
-
-  // Amount is optional, but if provided, it must be valid
-  if (form.value.amount.trim() === '')
-    return true; // Valid when empty (amount is optional)
-
+  if (shouldShowTokenSelector.value && !selectedTokenNai.value) return false;
+  if (form.value.amount.trim() === '') return true;
   return amountValidation.value.isValid;
 });
 
@@ -217,6 +239,23 @@ watch([() => form.value.amount, () => form.value.memo, userOperationalKey], asyn
     await generateQRCode();
 }, { immediate: false });
 
+// Watch selected token NAI changes to load token details
+watch(selectedTokenNai, async (newNai, oldNai) => {
+  if (newNai && newNai !== oldNai && shouldShowTokenSelector.value) {
+    isLoading.value = true;
+    // Get precision from the selected token's balance
+    const balance = tokensStore.balances.find(b => b.nai === newNai);
+    if (balance) {
+      form.value.precision = balance.precision?.toString() || '';
+      form.value.nai = newNai;
+      await loadTokenDetails();
+    } else
+      token.value = null;
+
+    isLoading.value = false;
+  }
+});
+
 // Parse asset amount - convert decimal to base units (integer with precision zeros)
 const parseAssetAmount = (amountStr: string, precision: number): string => {
   const [integerPart, fractionalPart = ''] = amountStr.split('.');
@@ -284,6 +323,9 @@ const handleSend = async () => {
 
     toast.success('Token sent successfully!');
 
+    // Mark transfer as completed to show invoice generation option
+    transferCompleted.value = true;
+
     // Reload balances
     await tokensStore.loadBalances(true);
 
@@ -301,16 +343,15 @@ const handleSend = async () => {
 
 // Load token details
 const loadTokenDetails = async () => {
-  if (!nai.value || !precision.value) return;
+  if (!nai.value) return;
 
   try {
     const wax = await getWax();
 
     // Fetch token details by NAI
-    const tokens = await wax.restApi.ctokensApi.registeredTokens({
-      nai: nai.value,
-      precision: Number(precision.value)
-    });
+    const params: { nai: string; precision?: number } = { nai: nai.value };
+    if (precision.value) params.precision = Number(precision.value);
+    const tokens = await wax.restApi.ctokensApi.registeredTokens(params);
 
     if (!tokens || tokens.length === 0)
       throw new Error(`Token with NAI ${nai.value} not found`);
@@ -319,6 +360,10 @@ const loadTokenDetails = async () => {
 
     if (!token.value)
       throw new Error(`Token with NAI ${nai.value} not found`);
+
+    // Update precision if not set from balance
+    if (token.value && !form.value.precision)
+      form.value.precision = token.value.precision?.toString() || '';
   } catch (error) {
     toastError('Failed to load token details', error);
     router.push('/tokens/list');
@@ -369,6 +414,10 @@ onMounted(async () => {
 
   isLoading.value = true;
 
+  // Load user balances if logged in (needed for token selector)
+  if (isLoggedIn.value)
+    await tokensStore.loadBalances();
+
   // Initialize form with query params
   form.value.nai = route.query.nai as string || '';
   form.value.precision = route.query.precision as string || '';
@@ -462,9 +511,30 @@ onMounted(async () => {
             </CardDescription>
           </CardHeader>
           <CardContent class="space-y-6">
-            <!-- NAI Input (only when not provided in URL) -->
+            <!-- Token Selector (when only 'to' is provided) -->
+            <div
+              v-if="shouldShowTokenSelector"
+              class="space-y-2"
+            >
+              <Label
+                for="token-selector"
+                class="text-sm font-medium text-foreground"
+              >
+                Select Token
+              </Label>
+              <TokenSelector
+                id="token-selector"
+                v-model="selectedTokenNai"
+                placeholder="Choose a token to send"
+              />
+              <p class="text-xs text-muted-foreground">
+                Select from your owned tokens
+              </p>
+            </div>
+
+            <!-- NAI Input (only when not provided in URL and not using token selector) -->
             <div
-              v-if="!hasNaiFromUrl"
+              v-if="!hasNaiFromUrl && !shouldShowTokenSelector"
               class="space-y-2"
             >
               <Label
@@ -485,9 +555,9 @@ onMounted(async () => {
               </p>
             </div>
 
-            <!-- Precision Input (only when not provided in URL) -->
+            <!-- Precision Input (only when not provided in URL and not using token selector) -->
             <div
-              v-if="!hasNaiFromUrl"
+              v-if="!hasNaiFromUrl && !shouldShowTokenSelector"
               class="space-y-2"
             >
               <Label
@@ -653,16 +723,17 @@ onMounted(async () => {
               class="pt-4 space-y-3"
             >
               <Button
+                v-if="!transferCompleted"
                 class="w-full"
-                :disabled="isSending || !isFormValid || (form.amount.trim() !== '' && !amountValidation.isValid)"
+                :disabled="isSending || !isFormValid"
                 @click="handleSend"
               >
                 {{ isSending ? 'Sending...' : (isLoggedIn ? 'Send Token' : 'Log in to Send Token') }}
               </Button>
               <Button
+                v-if="transferCompleted"
                 variant="outline"
                 class="w-full gap-2"
-                :disabled="!form.amount || !amountValidation.isValid"
                 @click="generateInvoice"
               >
                 <svg
@@ -710,33 +781,6 @@ onMounted(async () => {
             </p>
           </CardContent>
         </Card>
-
-        <!-- Generate Invoice Button (only in send mode when NAI/precision available) -->
-        <div
-          v-if="!isReceiveMode && nai && precision"
-          class="flex justify-center"
-        >
-          <Button
-            variant="outline"
-            class="gap-2"
-            :disabled="!form.amount || !amountValidation.isValid"
-            @click="generateInvoice"
-          >
-            <svg
-              width="18"
-              height="18"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="flex-shrink-0"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiFileDocumentOutline"
-              />
-            </svg>
-            Generate Invoice
-          </Button>
-        </div>
       </div>
     </div>
   </HTMView>
-- 
GitLab


From bb1edc7ca5a73f1b5271f02c52b4c301da23f32b Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Thu, 30 Oct 2025 12:29:45 +0100
Subject: [PATCH 069/102] Fix back button on send-token page

---
 src/pages/tokens/send-token.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index 744e9f2..7e95b4b 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -448,6 +448,7 @@ onMounted(async () => {
       <!-- Header -->
       <div class="flex items-center justify-between gap-4">
         <Button
+          v-if="hasNaiFromUrl || selectedTokenNai"
           variant="ghost"
           size="sm"
           class="gap-2 hover:bg-accent"
-- 
GitLab


From 2fe961bc23e9785ecc454135134e0182c2bbd97b Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Thu, 30 Oct 2025 12:34:36 +0100
Subject: [PATCH 070/102] Implement add to google button also in my-balance
 view

---
 src/components/wallet/AddToGoogleWallet.vue | 2 +-
 src/pages/tokens/my-balance.vue             | 2 ++
 src/pages/tokens/register-account.vue       | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/wallet/AddToGoogleWallet.vue b/src/components/wallet/AddToGoogleWallet.vue
index 99e6d13..a77b6fc 100644
--- a/src/components/wallet/AddToGoogleWallet.vue
+++ b/src/components/wallet/AddToGoogleWallet.vue
@@ -36,7 +36,7 @@ const addToGoogleWallet = async () => {
 
 <template>
   <Button
-    class="mt-2 w-full flex items-center justify-center gap-2 px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-md shadow hover:shadow-md transition-all duration-150 active:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
+    class="w-full flex items-center justify-center gap-2 px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-md shadow hover:shadow-md transition-all duration-150 active:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
     :disabled="googleWalletLoading"
     @click="addToGoogleWallet"
   >
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 58eef21..609b4e8 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -23,6 +23,7 @@ import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Textarea } from '@/components/ui/textarea';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import AddToGoogleWallet from '@/components/wallet/AddToGoogleWallet.vue';
 import { useTokensStore } from '@/stores/tokens.store';
 import { getWax } from '@/stores/wax.store';
 import { toVesting } from '@/utils/nai-tokens';
@@ -676,6 +677,7 @@ onMounted(async () => {
             </svg>
             Refresh
           </Button>
+          <AddToGoogleWallet />
         </div>
       </div>
 
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index a475d0f..ca9cb3a 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -365,7 +365,7 @@ onMounted(() => {
             >
               Go to My Account
             </Button>
-            <AddToGoogleWallet />
+            <AddToGoogleWallet class="mt-2" />
           </div>
         </div>
       </CardContent>
-- 
GitLab


From f805ef45c7026dde48abd0353d18ff53115b9394 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 30 Oct 2025 16:25:38 +0100
Subject: [PATCH 071/102] Bump dependencies

---
 README.md      |  6 ++++++
 package.json   |  5 +++--
 pnpm-lock.yaml | 10 +++++-----
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 2dead3e..ea265a3 100644
--- a/README.md
+++ b/README.md
@@ -11,3 +11,9 @@ Metamask Wallet dApp
 1. Navigate to [http://localhost:5173](http://localhost:5173) and authorize to test
 
 > If you want to see metamask snap logs on Chrome, go to: [chrome://extensions](chrome://extensions) Details of "MetaMask Flask DEVELOPMENT BUILD" and inspect `offscreen.html` console
+
+## Regenerating ctokens api spec
+
+```bash
+pnpm regenerate-ctokens-api http://192.168.6.7/
+```
diff --git a/package.json b/package.json
index 5b4833a..94e9daf 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
     "preview": "nuxt preview",
     "lint": "npm run lint-ci -- --fix",
     "lint-ci": "eslint --max-warnings=0",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "regenerate-ctokens-api": "pnpm --package @hiveio/wax-spec-generator dlx generate-wax-spec -o src/utils/wallet/ctokens/api -i"
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.1",
@@ -36,7 +37,7 @@
     "@hiveio/wax-signers-peakvault": "1.27.12-rc3",
     "@mdi/js": "^7.4.47",
     "@metamask/providers": "^16.0.0",
-    "@mtyszczak-cargo/htm": "^1.1.0",
+    "@mtyszczak-cargo/htm": "^1.2.1",
     "@nabla/vite-plugin-eslint": "^2.0.6",
     "@nuxt/eslint": "1.9.0",
     "@nuxtjs/color-mode": "^3.5.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3fc3476..f36e42e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,8 +49,8 @@ importers:
         specifier: ^16.0.0
         version: 16.1.0
       '@mtyszczak-cargo/htm':
-        specifier: ^1.1.0
-        version: 1.1.0(@hiveio/wax@1.27.12-rc3)
+        specifier: ^1.2.1
+        version: 1.2.1(@hiveio/wax@1.27.12-rc3)
       '@nabla/vite-plugin-eslint':
         specifier: ^2.0.6
         version: 2.0.6(eslint@9.32.0(jiti@2.6.1))(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
@@ -923,8 +923,8 @@ packages:
     resolution: {integrity: sha512-w8CVbdkDrVXFJbfBSlDfafDR6BAkpDmv1bC1UJVCoVny5tW2RKAdn9i68Xf7asYT4TnUhl/hN4zfUiKQq9II4g==}
     engines: {node: '>=16.0.0'}
 
-  '@mtyszczak-cargo/htm@1.1.0':
-    resolution: {integrity: sha1-a42W27PC77UWYNGJeRpuwXeT5Mg=, tarball: https://gitlab.syncad.com/api/v4/projects/541/packages/npm/@mtyszczak-cargo/htm/-/@mtyszczak-cargo/htm-1.1.0.tgz}
+  '@mtyszczak-cargo/htm@1.2.1':
+    resolution: {integrity: sha1-n+Z2u7/X/JFLc3EYyCFZom+gjKo=, tarball: https://gitlab.syncad.com/api/v4/projects/541/packages/npm/@mtyszczak-cargo/htm/-/@mtyszczak-cargo/htm-1.2.1.tgz}
     engines: {node: ^20.11 || >= 21.2}
     peerDependencies:
       '@hiveio/wax': '>=1.27.12-rc1-251007115925'
@@ -6901,7 +6901,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mtyszczak-cargo/htm@1.1.0(@hiveio/wax@1.27.12-rc3)':
+  '@mtyszczak-cargo/htm@1.2.1(@hiveio/wax@1.27.12-rc3)':
     dependencies:
       '@hiveio/wax': 1.27.12-rc3
       protobufjs: 7.2.5
-- 
GitLab


From 3976a71e56830bd458723c3dd12da6f9ed681d17 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Fri, 31 Oct 2025 09:36:58 +0100
Subject: [PATCH 072/102] Make send token view more compact

---
 src/components/tokens/TokenSelector.vue |  21 +-
 src/pages/tokens/send-token.vue         | 486 ++++++++++++------------
 2 files changed, 253 insertions(+), 254 deletions(-)

diff --git a/src/components/tokens/TokenSelector.vue b/src/components/tokens/TokenSelector.vue
index 7c73bb5..d849221 100644
--- a/src/components/tokens/TokenSelector.vue
+++ b/src/components/tokens/TokenSelector.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { mdiArrowDown } from '@mdi/js';
 import { Check, Search } from 'lucide-vue-next';
 import { computed, onMounted, ref, watch } from 'vue';
 
@@ -109,16 +110,14 @@ onMounted(async () => {
 <template>
   <Combobox v-model="selectedValue">
     <ComboboxAnchor class="relative w-full">
-      <ComboboxTrigger class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
-        <div class="flex items-center gap-2 flex-1 min-w-0">
-          <Search class="h-4 w-4 shrink-0 text-muted-foreground" />
+      <ComboboxTrigger class="flex h-9 w-full items-center justify-between rounded-r-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
+        <div class="flex items-center justify-between flex-1 min-w-0">
           <div
             v-if="selectedToken"
             class="flex items-center gap-3 truncate flex-1 min-w-0"
           >
             <div class="flex flex-col items-start min-w-0 flex-1">
               <span class="font-semibold text-foreground truncate">{{ selectedToken.displayName }}</span>
-              <span class="text-xs text-muted-foreground">Balance: {{ selectedToken.displayBalance }}</span>
             </div>
           </div>
           <span
@@ -127,9 +126,21 @@ onMounted(async () => {
           >
             {{ placeholder }}
           </span>
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="flex-shrink-0 text-muted-foreground"
+            >
+            <path
+              style="fill: currentColor"
+              :d="mdiArrowDown"
+            />
+          </svg>
         </div>
       </ComboboxTrigger>
-      <ComboboxList class="w-full mt-1 bg-popover border border-border rounded-lg shadow-lg p-0 max-h-64 overflow-hidden">
+      <ComboboxList class="mt-1 bg-popover border border-border rounded-lg shadow-lg p-0 max-h-64 overflow-hidden">
         <div class="flex items-center border-b border-border px-4 py-2 bg-muted/50">
           <Search class="mr-3 h-4 w-4 shrink-0 text-muted-foreground" />
           <ComboboxInput
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index 7e95b4b..57913b6 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -1,22 +1,24 @@
 <script setup lang="ts">
-import { mdiArrowLeft, mdiArrowDown, mdiArrowUp, mdiFileDocumentOutline } from '@mdi/js';
+import { mdiArrowLeft, mdiArrowUp, mdiArrowDown } from '@mdi/js';
 import type { htm_operation } from '@mtyszczak-cargo/htm';
 import QRCode from 'qrcode';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
+
 import HTMView from '@/components/HTMView.vue';
 import TokenSelector from '@/components/tokens/TokenSelector.vue';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Separator } from '@/components/ui/separator';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Textarea } from '@/components/ui/textarea';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
+import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
@@ -24,6 +26,8 @@ import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent } from '~/src/components/ui/tooltip';
+
 // Router
 const route = useRoute();
 const router = useRouter();
@@ -31,6 +35,7 @@ const router = useRouter();
 const settingsStore = useSettingsStore();
 const tokensStore = useTokensStore();
 const walletStore = useWalletStore();
+const userStore = useUserStore();
 
 // State
 const token = ref<CtokensAppToken | null>(null);
@@ -41,6 +46,9 @@ const addingMemo = ref(false);
 const qrCodeDataUrl = ref<string>('');
 const transferCompleted = ref(false);
 
+// UI toggles for compact view
+const showDetails = ref(false);
+
 // Form state
 const form = ref({
   nai: '',
@@ -59,7 +67,7 @@ const nai = computed(() => {
   return form.value.nai;
 });
 const precision = computed(() => route.query.precision as string || form.value.precision);
-const receiverKey = computed(() => route.query.to as string | undefined);
+const receiverKey = computed(() => route.query.to as string || CTokensProvider.getOperationalPublicKey());
 const queryAmount = computed(() => route.query.amount as string | undefined);
 const queryMemo = computed(() => route.query.memo as string | undefined);
 
@@ -68,7 +76,23 @@ const hasNaiFromUrl = computed(() => !!route.query.nai);
 
 // Check if we're in receive mode (when 'to' is in query params)
 // When 'to' is present, we're actually sending (confirming a transfer request)
-const isReceiveMode = computed(() => !!receiverKey.value);
+const isReceiveMode = computed(() => !!route.query.to);
+
+const htmUserMetadata = ref<{
+  displayName: string;
+  about?: string;
+  name?: string;
+  profileImage?: string;
+  website?: string;
+} | undefined>(undefined);
+
+const fetchHTMUserData = async () => {
+  try {
+    htmUserMetadata.value = await tokensStore.getCurrentUserMetadata();
+  } catch (_error) {
+    // toastError('Error fetching HTM user data', error); // TODO: Reformat this code to better handle edge cases...
+  }
+};
 
 // Check if we should show token selector (when only 'to' is provided)
 const shouldShowTokenSelector = computed(() => {
@@ -94,6 +118,46 @@ const tokenSymbol = computed(() => {
   return metadata?.symbol || '';
 });
 
+// Receiver display helpers (compact UI)
+const receiverDisplayName = computed(() => {
+  // In receive mode the recipient is you — prefer parsed user name (L2 if available)
+  if (isReceiveMode.value) {
+    // userStore.name is a transformed display name if parseUserData ran
+    const name = userStore.name || settingsStore.settings.account || userOperationalKey.value || '';
+    if (name) return name;
+    return 'You';
+  }
+
+  // Otherwise prefer explicit name from query if present
+  const qName = route.query.toName as string | undefined;
+  if (qName && qName.trim()) return qName;
+
+  // Fall back to short key derived from receiverKey
+  const rk = receiverKey.value;
+  if (!rk) return '';
+  return `${rk.slice(0, 6)}…${rk.slice(-4)}`;
+});
+
+const receiverShortKey = computed(() =>
+  isReceiveMode.value
+    ? (userOperationalKey.value || '')
+    : (receiverKey.value ? `${receiverKey.value.slice(0, 8)}…` : '')
+);
+
+const tokenImage = computed(() => {
+  if (!token.value) return '';
+  const metadata = token.value.metadata as { image?: string } | undefined;
+  return metadata?.image || '';
+});
+
+const receiverAvatarLetter = computed(() => {
+  const name = receiverDisplayName.value;
+  if (!name) return '?';
+  // Use first non-space character as avatar letter
+  const ch = name.trim().charAt(0).toUpperCase();
+  return ch || '?';
+});
+
 const amountValidation = computed(() => {
   if (!form.value.amount) {
     // Empty amount is valid (amount is optional)
@@ -415,8 +479,10 @@ onMounted(async () => {
   isLoading.value = true;
 
   // Load user balances if logged in (needed for token selector)
-  if (isLoggedIn.value)
+  if (isLoggedIn.value) {
     await tokensStore.loadBalances();
+    await fetchHTMUserData();
+  }
 
   // Initialize form with query params
   form.value.nai = route.query.nai as string || '';
@@ -440,6 +506,57 @@ onMounted(async () => {
   if (!isReceiveMode.value && isLoggedIn.value && nai.value && precision.value)
     await generateQRCode();
 });
+
+// If the user logs in after the page mounted (for example after entering password),
+// reload balances, HTM user metadata, token details and QR code as needed.
+watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
+  // Only act when the user becomes logged in
+  if (!loggedIn || wasLoggedIn === loggedIn) return;
+
+  isLoading.value = true;
+
+  try {
+    // Load balances and HTM metadata now that we have an authenticated session
+    await tokensStore.loadBalances();
+    await fetchHTMUserData();
+
+    // If nai/precision available, load token details
+    if (nai.value && precision.value)
+      await loadTokenDetails();
+
+    // Regenerate QR code when appropriate
+    if (!isReceiveMode.value && nai.value && precision.value)
+      await generateQRCode();
+  } catch (e) {
+    // swallow - errors are handled inside the helpers (toastError)
+    console.error('Error reloading data after login', e);
+  } finally {
+    isLoading.value = false;
+  }
+});
+
+// Also watch the tokens store wallet instance - this changes when CTokensProvider is set
+// (e.g., user unlocked their HTM wallet). React to that to load HTM-related data.
+watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
+  if (!newWallet || newWallet === oldWallet) return;
+
+  isLoading.value = true;
+
+  try {
+    await tokensStore.loadBalances();
+    await fetchHTMUserData();
+
+    if (nai.value && precision.value)
+      await loadTokenDetails();
+
+    if (!isReceiveMode.value && nai.value && precision.value)
+      await generateQRCode();
+  } catch (e) {
+    console.error('Error reloading data after tokensStore.wallet changed', e);
+  } finally {
+    isLoading.value = false;
+  }
+});
 </script>
 
 <template>
@@ -511,246 +628,130 @@ onMounted(async () => {
               {{ isReceiveMode ? 'Review the transfer details' : (hasNaiFromUrl ? 'Specify the transfer amount' : 'Enter token details and specify the transfer amount') }}
             </CardDescription>
           </CardHeader>
-          <CardContent class="space-y-6">
-            <!-- Token Selector (when only 'to' is provided) -->
-            <div
-              v-if="shouldShowTokenSelector"
-              class="space-y-2"
-            >
-              <Label
-                for="token-selector"
-                class="text-sm font-medium text-foreground"
-              >
-                Select Token
-              </Label>
-              <TokenSelector
-                id="token-selector"
-                v-model="selectedTokenNai"
-                placeholder="Choose a token to send"
-              />
-              <p class="text-xs text-muted-foreground">
-                Select from your owned tokens
-              </p>
-            </div>
-
-            <!-- NAI Input (only when not provided in URL and not using token selector) -->
-            <div
-              v-if="!hasNaiFromUrl && !shouldShowTokenSelector"
-              class="space-y-2"
-            >
-              <Label
-                for="nai"
-                class="text-sm font-medium text-foreground"
-              >
-                Token NAI
-              </Label>
-              <Input
-                id="nai"
-                v-model="form.nai"
-                type="text"
-                placeholder="Enter token NAI"
-                class="transition-colors"
-              />
-              <p class="text-xs text-muted-foreground">
-                The Non-Fungible Asset Identifier of the token
-              </p>
+          <CardContent class="space-y-4">
+            <!-- Compact recipient + token summary -->
+            <div class="flex items-center justify-between gap-4">
+              <div>
+                <span class="inline-flex items-center text-xs font-semibold uppercase px-2 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20">{{ isReceiveMode ? 'Recipient' : 'Receiver' }}</span>
+                <div class="flex items-center gap-3 min-w-0 mt-3">
+                  <div class="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-sm font-semibold text-foreground flex-shrink-0">
+                    {{ htmUserMetadata?.profileImage ? htmUserMetadata.profileImage  : receiverAvatarLetter }}
+                  </div>
+                  <div class="flex flex-col min-w-0">
+                    <div class="text-sm font-bold truncate">{{ htmUserMetadata?.displayName }}</div>
+                    <div class="text-xs text-muted-foreground truncate">{{ receiverShortKey }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="flex flex-col items-center text-right">
+                <Avatar class="h-10 w-10 sm:h-14 sm:w-14 flex-shrink-0">
+                  <AvatarImage
+                    v-if="tokenImage"
+                    :src="tokenImage"
+                    :alt="tokenName"
+                  />
+                  <AvatarFallback>
+                    <svg
+                      v-if="!tokenImage"
+                      width="24"
+                      height="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      class="text-muted-foreground"
+                    >
+                      <path
+                        style="fill: currentColor"
+                        d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M11,7H13V17H11V7Z"
+                      />
+                    </svg>
+                    <span
+                      v-else
+                      class="text-xl sm:text-2xl font-bold text-primary"
+                    >
+                      {{ tokenSymbol ? tokenSymbol.slice(0, 2).toUpperCase() : tokenName.slice(0, 2).toUpperCase() }}
+                    </span>
+                  </AvatarFallback>
+                </Avatar>
+                <div class="text-xs text-muted-foreground mt-2">{{ form.amount || '—' }}</div>
+              </div>
             </div>
 
-            <!-- Precision Input (only when not provided in URL and not using token selector) -->
-            <div
-              v-if="!hasNaiFromUrl && !shouldShowTokenSelector"
-              class="space-y-2"
-            >
-              <Label
-                for="precision"
-                class="text-sm font-medium text-foreground"
-              >
-                Precision
-              </Label>
-              <Input
-                id="precision"
-                v-model="form.precision"
-                type="number"
-                placeholder="Enter precision (0-18)"
-                min="0"
-                max="18"
-                class="transition-colors"
-              />
-              <p class="text-xs text-muted-foreground">
-                Number of decimal places for the token (0-18)
-              </p>
+            <!-- Token selector (compact) -->
+            <div v-if="shouldShowTokenSelector" class="mt-1">
+              <Label for="amount" class="text-sm font-medium text-foreground">Amount</Label>
+              <div class="flex items-center w-full">
+                <div class="w-[75%]">
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger as-child>
+                        <Input id="amount" v-model="form.amount" :disabled="!selectedTokenNai" type="text" inputmode="decimal" :placeholder="`Amount in ${tokenSymbol || tokenName}`" class="pr-12 rounded-r-none border-r-0" />
+                      </TooltipTrigger>
+                      <TooltipContent v-if="!selectedTokenNai">
+                        <p>Select token to send first.</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                  <p v-if="form.amount && !amountValidation.isValid && amountValidation.error" class="text-xs text-red-500 mt-1">{{ amountValidation.error }}</p>
+                </div>
+                <TokenSelector id="token-selector" v-model="selectedTokenNai" placeholder="Choose token" class="w-[25%]" :class="{ 'mb-5': form.amount && !amountValidation.isValid && amountValidation.error }" />
+              </div>
             </div>
 
-            <Separator v-if="!hasNaiFromUrl" />
-
-            <!-- Sender -->
-            <div
-              v-if="isReceiveMode"
-              class="space-y-2"
-            >
-              <Label
-                for="sender"
-                class="text-sm font-medium text-foreground"
-              >
-                Sender (You)
-              </Label>
-              <Input
-                id="sender"
-                :model-value="userOperationalKey || 'Not logged in'"
-                readonly
-                class="transition-colors bg-muted/50 cursor-not-allowed"
-              />
-              <p class="text-xs text-muted-foreground">
-                {{ userOperationalKey ? 'Sender operational public key' : 'You need to log in to send tokens' }}
-              </p>
+            <!-- Small details toggle for NAI/precision when needed -->
+            <div v-if="!hasNaiFromUrl && !shouldShowTokenSelector" class="flex items-center justify-between">
+              <div class="text-xs text-muted-foreground">Token NAI / precision</div>
+              <Button size="sm" variant="ghost" class="px-2 py-1" @click="showDetails = !showDetails">{{ showDetails ? 'Hide' : 'Show' }}</Button>
             </div>
 
-            <Separator v-if="isReceiveMode" />
-
-            <!-- Receiver -->
-            <div class="space-y-2">
-              <Label
-                for="receiver"
-                class="text-sm font-medium text-foreground"
-              >
-                Receiver{{ !isReceiveMode ? ' (You)' : '' }}
-              </Label>
-              <Input
-                id="receiver"
-                :model-value="isReceiveMode ? receiverKey : userOperationalKey"
-                readonly
-                :class="isReceiveMode ? 'transition-colors bg-muted/50 cursor-not-allowed' : 'transition-colors bg-muted/50 cursor-not-allowed'"
-              />
-              <p class="text-xs text-muted-foreground">
-                Receiver operational public key
-              </p>
+            <div v-if="showDetails && !hasNaiFromUrl && !shouldShowTokenSelector" class="grid grid-cols-2 gap-2">
+              <Input id="nai" v-model="form.nai" type="text" placeholder="NAI" class="transition-colors" />
+              <Input id="precision" v-model="form.precision" type="number" placeholder="Precision" min="0" max="18" class="transition-colors" />
             </div>
 
-            <Separator />
-
-            <!-- Transfer Amount -->
-            <div class="space-y-2">
-              <Label
-                for="amount"
-                class="text-sm font-medium text-foreground"
-              >
-                Amount (optional)
-              </Label>
-              <div class="relative">
-                <Input
-                  id="amount"
-                  v-model="form.amount"
-                  type="text"
-                  inputmode="decimal"
-                  :placeholder="`Amount in ${tokenSymbol || tokenName}`"
-                  class="pr-20 transition-colors"
-                  :class="[
-                    form.amount ? (amountValidation.isValid ? 'border-green-500 focus-visible:ring-green-500' : 'border-red-500 focus-visible:ring-red-500') : '',
-                  ]"
-                />
-                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground font-medium">
-                  {{ tokenSymbol }}
-                </span>
+            <!-- Amount compact -->
+            <div v-if="!shouldShowTokenSelector">
+              <Label for="amount" class="text-sm font-medium text-foreground">Amount</Label>
+              <div class="relative mt-1">
+                <Input id="amount" v-model="form.amount" type="text" inputmode="decimal" :placeholder="`Amount in ${tokenSymbol || tokenName}`" class="pr-12" />
+                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground font-medium">{{ tokenSymbol }}</span>
               </div>
-              <p
-                v-if="token"
-                class="text-xs text-muted-foreground"
-              >
-                Precision: {{ token.precision }} decimal places
-              </p>
-              <p
-                v-if="form.amount && !amountValidation.isValid && amountValidation.error"
-                class="text-xs text-red-500"
-              >
-                {{ amountValidation.error }}
-              </p>
+              <p v-if="form.amount && !amountValidation.isValid && amountValidation.error" class="text-xs text-red-500 mt-1">{{ amountValidation.error }}</p>
             </div>
 
-            <Separator v-if="!isReceiveMode" />
-
-            <!-- memo -->
-            <div
-              v-if="addingMemo || (isReceiveMode && form.memo)"
-              class="space-y-2"
-            >
-              <Label
-                for="memo"
-                class="text-sm font-medium text-foreground"
-              >
-                Memo
-              </Label>
-              <Textarea
-                id="memo"
-                v-model="form.memo"
-                placeholder="Add memo..."
-                rows="4"
-                :readonly="isReceiveMode"
-                :disabled="isUpdating"
-                :class="[
-                  'resize-none',
-                  isReceiveMode ? 'bg-muted/50 cursor-not-allowed' : ''
-                ]"
-              />
-              <p class="text-xs text-muted-foreground">
-                A brief memo for token transfer
-              </p>
+            <!-- Memo compact -->
+            <div>
+              <div class="flex items-center justify-between">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  class="gap-2"
+                  @click="addingMemo = !addingMemo"
+                >
+                  <svg
+                    width="16"
+                    height="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="flex-shrink-0"
+                  >
+                    <path
+                      style="fill: currentColor"
+                      :d="addingMemo ? mdiArrowUp : mdiArrowDown"
+                    />
+                  </svg>
+                  {{ addingMemo ? 'Collapse' : 'Add Memo' }}
+                </Button>
+
+              </div>
+              <div v-if="addingMemo || (isReceiveMode && form.memo)" class="mt-2">
+                <Textarea id="memo" v-model="form.memo" placeholder="Memo..." rows="3" :readonly="isReceiveMode" :disabled="isUpdating" class="resize-none" />
+              </div>
             </div>
 
-            <Button
-              v-if="!isReceiveMode"
-              variant="ghost"
-              size="sm"
-              class="gap-2"
-              @click="addingMemo = !addingMemo"
-            >
-              <svg
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="flex-shrink-0"
-              >
-                <path
-                  style="fill: currentColor"
-                  :d="addingMemo ? mdiArrowUp : mdiArrowDown"
-                />
-              </svg>
-              {{ addingMemo ? 'Collapse' : 'Add Memo' }}
-            </Button>
-
-            <!-- Send Button (only in receive mode) -->
-            <div
-              v-if="isReceiveMode"
-              class="pt-4 space-y-3"
-            >
-              <Button
-                v-if="!transferCompleted"
-                class="w-full"
-                :disabled="isSending || !isFormValid"
-                @click="handleSend"
-              >
-                {{ isSending ? 'Sending...' : (isLoggedIn ? 'Send Token' : 'Log in to Send Token') }}
-              </Button>
-              <Button
-                v-if="transferCompleted"
-                variant="outline"
-                class="w-full gap-2"
-                @click="generateInvoice"
-              >
-                <svg
-                  width="18"
-                  height="18"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  class="flex-shrink-0"
-                >
-                  <path
-                    style="fill: currentColor"
-                    :d="mdiFileDocumentOutline"
-                  />
-                </svg>
-                Generate Invoice
-              </Button>
+            <!-- Actions -->
+            <div class="pt-3">
+              <Button v-if="isReceiveMode && !transferCompleted" class="w-full" :disabled="isSending || !isFormValid" @click="handleSend">{{ isSending ? 'Sending...' : (isLoggedIn ? 'Send Token' : 'Log in to Send Token') }}</Button>
+              <Button v-if="isReceiveMode && transferCompleted" variant="outline" class="w-full gap-2 mt-2" @click="generateInvoice">Generate Invoice</Button>
             </div>
           </CardContent>
         </Card>
@@ -758,24 +759,11 @@ onMounted(async () => {
         <!-- QR Code Card (visible when NAI and precision are available) -->
         <Card v-if="nai && precision && !isReceiveMode">
           <CardContent class="flex flex-col items-center">
-            <div
-              v-if="qrCodeDataUrl"
-              class="bg-white p-4 rounded-lg my-4"
-            >
-              <img
-                :src="qrCodeDataUrl"
-                alt="QR Code for token transfer"
-                class="w-full h-auto"
-              >
+            <div v-if="qrCodeDataUrl" class="bg-white p-3 rounded-lg my-3">
+              <img :src="qrCodeDataUrl" alt="QR Code for token transfer" class="w-48 h-48 object-contain">
             </div>
-            <div
-              v-else
-              class="bg-white p-4 rounded-lg my-4 flex items-center justify-center"
-              style="width: 300px; height: 300px;"
-            >
-              <p class="text-muted-foreground text-center">
-                Generating QR code...
-              </p>
+            <div v-else class="bg-white p-3 rounded-lg my-3 flex items-center justify-center" style="width:200px; height:200px;">
+              <p class="text-muted-foreground text-center">Generating QR code...</p>
             </div>
             <p class="text-xs text-muted-foreground text-center max-w-md">
               This QR code contains the transfer details. The receiver can scan it to accept the token.
-- 
GitLab


From d6351167c0e863907673db111fd172abefc9c1a4 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Fri, 31 Oct 2025 12:27:08 +0100
Subject: [PATCH 073/102] Implement transfer success confirmation

---
 src/components/tokens/TokenSelector.vue |   3 +
 src/pages/tokens/send-token.vue         | 119 +++++++++++++++++++++---
 2 files changed, 110 insertions(+), 12 deletions(-)

diff --git a/src/components/tokens/TokenSelector.vue b/src/components/tokens/TokenSelector.vue
index d849221..062c27d 100644
--- a/src/components/tokens/TokenSelector.vue
+++ b/src/components/tokens/TokenSelector.vue
@@ -7,6 +7,8 @@ import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput,
 import { useTokensStore } from '@/stores/tokens.store';
 import type { CtokensAppBalance } from '@/utils/wallet/ctokens/api';
 
+import { isVesting } from '~/src/utils/nai-tokens';
+
 interface TokenOption {
   balance: CtokensAppBalance;
   displayName: string;
@@ -44,6 +46,7 @@ watch(() => props.modelValue, (newValue) => {
 // Get user's token balances with positive amounts
 const ownedTokens = computed((): TokenOption[] => {
   return tokensStore.balances
+    .filter(balance => isVesting(balance.nai!, balance.precision!) === false) // Exclude vesting tokens
     .filter(balance => {
       // Filter out zero balances
       const amount = BigInt(balance.amount || '0');
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index 57913b6..a6b96ad 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { mdiArrowLeft, mdiArrowUp, mdiArrowDown } from '@mdi/js';
+import { mdiArrowLeft, mdiArrowUp, mdiArrowDown, mdiCheckCircle } from '@mdi/js';
 import type { htm_operation } from '@mtyszczak-cargo/htm';
 import QRCode from 'qrcode';
 import { computed, onMounted, ref, watch } from 'vue';
@@ -23,7 +23,7 @@ import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
-import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
+import type { CtokensAppToken, CtokensAppBalance } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent } from '~/src/components/ui/tooltip';
@@ -46,6 +46,9 @@ const addingMemo = ref(false);
 const qrCodeDataUrl = ref<string>('');
 const transferCompleted = ref(false);
 
+// Summary of the last transfer (snapshot at time of send)
+const sentSummary = ref<{ amount: string; tokenLabel: string; receiver: string; remainingBalance?: string; timestamp?: string } | null>(null);
+
 // UI toggles for compact view
 const showDetails = ref(false);
 
@@ -327,6 +330,31 @@ const parseAssetAmount = (amountStr: string, precision: number): string => {
   return integerPart + normalizedFractional;
 };
 
+// Helper to format decimal amounts (used synchronously when wax formatter isn't available)
+const formatAmount = (amount: string, precision: number, symbol?: string) => {
+  try {
+    const num = parseFloat(amount);
+    if (isNaN(num)) return amount;
+
+    // Format with precision and add thousand separators
+    const parts = num.toFixed(precision).split('.');
+    parts[0] = parts[0]!.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    const formatted = parts.join('.');
+    return symbol ? `${formatted} ${symbol}` : formatted;
+  } catch {
+    return amount;
+  }
+};
+
+// Compute remaining balance for currently selected token from tokens store (display-friendly)
+const remainingBalanceDisplay = computed(() => {
+  if (!token.value) return '';
+  const balance = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === token.value!.nai) as CtokensAppBalance | undefined;
+  if (!balance || !balance.amount) return '';
+
+  return formatAmount(balance.amount!, token.value!.precision || 0, tokenSymbol.value || tokenName.value);
+});
+
 // Handle send transaction
 const handleSend = async () => {
   if (!token.value) {
@@ -368,7 +396,7 @@ const handleSend = async () => {
     // Convert decimal amount to base units (add precision zeros)
     const baseAmount = parseAssetAmount(form.value.amount, token.value.precision || 0);
 
-    // Wait for transaction status
+    // Wait for transaction status and capture its result if available
     await waitForTransactionStatus(
       () => ([{
         token_transfer_operation: {
@@ -390,14 +418,37 @@ const handleSend = async () => {
     // Mark transfer as completed to show invoice generation option
     transferCompleted.value = true;
 
-    // Reload balances
+    // Reload balances so we can compute remaining balance
     await tokensStore.loadBalances(true);
 
-    // Navigate back
-    router.push({
-      path: '/tokens/token',
-      query: { nai: nai.value, precision: precision.value }
-    });
+    // Capture a snapshot summary to show to the user (amount, token label, receiver and remaining balance)
+    const receiverLabel = receiverDisplayName.value || receiverShortKey.value || receiverKey.value || 'Recipient';
+    const tokenLabel = tokenSymbol.value || tokenName.value || token.value!.nai || '';
+
+    // Compute remaining balance if available using the same approach as token.vue (balance.amount decimal string)
+    let remaining = '';
+    const balanceObj = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === token.value!.nai) as CtokensAppBalance | undefined;
+    if (balanceObj && balanceObj.amount) {
+      try {
+        // Prefer wax formatter for localized formatting when available
+        const wax = await getWax();
+        const formatted = wax.formatter.formatNumber(balanceObj.amount!, token.value!.precision || 0);
+        remaining = tokenSymbol.value ? `${formatted} ${tokenSymbol.value}` : formatted;
+      } catch (_e) {
+        // Fallback to synchronous formatter
+        remaining = formatAmount(balanceObj.amount!, token.value!.precision || 0, tokenSymbol.value || tokenName.value);
+      }
+    }
+
+    const ts = new Date().toISOString();
+
+    sentSummary.value = {
+      amount: form.value.amount,
+      tokenLabel,
+      receiver: receiverLabel,
+      remainingBalance: remaining,
+      timestamp: ts
+    };
   } catch (error) {
     toastError('Transfer failed', error);
   } finally {
@@ -743,15 +794,59 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
                 </Button>
 
               </div>
-              <div v-if="addingMemo || (isReceiveMode && form.memo)" class="mt-2">
+              <div v-show="addingMemo" class="mt-2">
                 <Textarea id="memo" v-model="form.memo" placeholder="Memo..." rows="3" :readonly="isReceiveMode" :disabled="isUpdating" class="resize-none" />
               </div>
             </div>
 
-            <!-- Actions -->
+            <!-- Actions / Summary -->
             <div class="pt-3">
+              <!-- Send button (only shown when confirming a transfer request / receive-mode) -->
               <Button v-if="isReceiveMode && !transferCompleted" class="w-full" :disabled="isSending || !isFormValid" @click="handleSend">{{ isSending ? 'Sending...' : (isLoggedIn ? 'Send Token' : 'Log in to Send Token') }}</Button>
-              <Button v-if="isReceiveMode && transferCompleted" variant="outline" class="w-full gap-2 mt-2" @click="generateInvoice">Generate Invoice</Button>
+
+              <!-- Bank-style confirmation summary shown after a successful transfer -->
+              <div v-if="transferCompleted" class="mt-4">
+                <Card>
+                  <CardHeader>
+                    <div class="flex items-center gap-3">
+                      <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
+                        <svg width="28" height="28" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                          <path style="fill: currentColor" :d="mdiCheckCircle" class="text-green-600" />
+                        </svg>
+                      </div>
+                      <div>
+                        <CardTitle class="text-lg">Transfer Completed</CardTitle>
+                        <CardDescription class="text-sm text-muted-foreground">{{ sentSummary?.timestamp || new Date().toISOString() }}</CardDescription>
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent class="space-y-4">
+                    <div class="text-3xl font-extrabold text-foreground">
+                      {{ sentSummary?.amount || form.amount }} <span class="text-xl font-semibold">{{ tokenSymbol || tokenName }}</span>
+                    </div>
+
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
+                      <div class="space-y-1">
+                        <div class="text-xs text-muted-foreground">From</div>
+                        <div class="font-medium">{{ isReceiveMode ? receiverKey?.substring(0, 6) + '...' + receiverKey?.substring(receiverKey.length - 4) : htmUserMetadata?.displayName }}</div>
+                      </div>
+                      <div class="space-y-1">
+                        <div class="text-xs text-muted-foreground">To</div>
+                        <div class="font-medium truncate">{{ isReceiveMode ? htmUserMetadata?.displayName : receiverKey?.substring(0, 6) + '...' + receiverKey?.substring(receiverKey.length - 4) }}</div>
+                      </div>
+                    </div>
+
+                    <div class="flex items-center justify-between">
+                      <div class="text-sm text-muted-foreground">Remaining balance</div>
+                      <div class="font-medium">{{ sentSummary?.remainingBalance || remainingBalanceDisplay }}</div>
+                    </div>
+
+                    <div class="border-t pt-3">
+                      <Button size="sm" class="w-full" @click.prevent="generateInvoice">Generate Invoice</Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
             </div>
           </CardContent>
         </Card>
-- 
GitLab


From 8f02a17c39c0be9b9fe672dd51bc35e6409e8116 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Mon, 3 Nov 2025 08:47:27 +0100
Subject: [PATCH 074/102] Move QR code card to a separated component

---
 src/components/tokens/QRCodeCard.vue | 80 +++++++++++++++++++++++++++
 src/pages/tokens/send-token.vue      | 83 +++-------------------------
 2 files changed, 89 insertions(+), 74 deletions(-)
 create mode 100644 src/components/tokens/QRCodeCard.vue

diff --git a/src/components/tokens/QRCodeCard.vue b/src/components/tokens/QRCodeCard.vue
new file mode 100644
index 0000000..afb6154
--- /dev/null
+++ b/src/components/tokens/QRCodeCard.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import QRCode from 'qrcode';
+import { computed, onMounted, ref, watch } from 'vue';
+
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+import { Card, CardContent } from '../ui/card';
+
+const props = defineProps<{
+  nai: string;
+  precision: string;
+  amount?: string;
+  memo?: string;
+}>();
+
+const qrCodeDataUrl = ref<string>('');
+
+const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
+
+const generateQRCode = async () => {
+  // Generate QR code even without amount (amount is optional)
+  try {
+    const baseUrl = window.location.origin;
+    const params = new URLSearchParams({
+      nai: props.nai,
+      precision: props.precision,
+      to: userOperationalKey.value || ''
+    });
+
+    // Add amount only if provided
+    if (props.amount?.trim())
+      params.append('amount', props.amount);
+
+    // Add memo only if provided
+    if (props.memo?.trim())
+      params.append('memo', props.memo);
+
+    const url = `${baseUrl}/tokens/send-token?${params.toString()}`;
+    const dataUrl = await QRCode.toDataURL(url, {
+      width: 300,
+      margin: 2,
+      color: {
+        dark: '#000000',
+        light: '#FFFFFF'
+      }
+    });
+    qrCodeDataUrl.value = dataUrl;
+  } catch (error) {
+    console.error('Failed to generate QR code:', error);
+    qrCodeDataUrl.value = '';
+  }
+};
+
+// Generate QR code on mount and when props change
+onMounted(() => {
+  generateQRCode();
+});
+
+watch([() => props.nai, () => props.precision, () => props.amount, () => props.memo, userOperationalKey], () => {
+  generateQRCode();
+});
+</script>
+
+<template>
+  <div>
+    <Card>
+      <CardContent class="flex flex-col items-center">
+        <div v-if="qrCodeDataUrl" class="bg-white p-3 rounded-lg my-3">
+          <img :src="qrCodeDataUrl" alt="QR Code for token transfer" class="w-48 h-48 object-contain">
+        </div>
+        <div v-else class="bg-white p-3 rounded-lg my-3 flex items-center justify-center" style="width:200px; height:200px;">
+          <p class="text-muted-foreground text-center">Generating QR code...</p>
+        </div>
+        <p class="text-xs text-muted-foreground text-center max-w-md">
+          This QR code contains the transfer details. <br> The receiver can scan it to accept the token.
+        </p>
+      </CardContent>
+    </Card>
+  </div>
+</template>
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index a6b96ad..75e2b5a 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { mdiArrowLeft, mdiArrowUp, mdiArrowDown, mdiCheckCircle } from '@mdi/js';
 import type { htm_operation } from '@mtyszczak-cargo/htm';
-import QRCode from 'qrcode';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-
 import HTMView from '@/components/HTMView.vue';
 import TokenSelector from '@/components/tokens/TokenSelector.vue';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
@@ -26,6 +24,7 @@ import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppToken, CtokensAppBalance } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+import QRCodeCard from '~/src/components/tokens/QRCodeCard.vue';
 import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent } from '~/src/components/ui/tooltip';
 
 // Router
@@ -43,7 +42,6 @@ const isLoading = ref(true);
 const isUpdating = ref(false);
 const isSending = ref(false);
 const addingMemo = ref(false);
-const qrCodeDataUrl = ref<string>('');
 const transferCompleted = ref(false);
 
 // Summary of the last transfer (snapshot at time of send)
@@ -248,41 +246,6 @@ const isFormValid = computed(() => {
   return amountValidation.value.isValid;
 });
 
-// Generate QR Code
-const generateQRCode = async () => {
-  // Generate QR code even without amount (amount is optional)
-  try {
-    const baseUrl = window.location.origin;
-    const params = new URLSearchParams({
-      nai: nai.value,
-      precision: precision.value,
-      to: userOperationalKey.value || ''
-    });
-
-    // Add amount only if provided and valid
-    if (form.value.amount.trim() && amountValidation.value.isValid)
-      params.append('amount', form.value.amount);
-
-    // Add memo only if provided
-    if (form.value.memo.trim())
-      params.append('memo', form.value.memo);
-
-    const url = `${baseUrl}/tokens/send-token?${params.toString()}`;
-    const dataUrl = await QRCode.toDataURL(url, {
-      width: 300,
-      margin: 2,
-      color: {
-        dark: '#000000',
-        light: '#FFFFFF'
-      }
-    });
-    qrCodeDataUrl.value = dataUrl;
-  } catch (error) {
-    console.error('Failed to generate QR code:', error);
-    qrCodeDataUrl.value = '';
-  }
-};
-
 // Watch NAI and precision changes to load token details
 watch([() => form.value.nai, () => form.value.precision], async (newValues, oldValues) => {
   const [newNai, newPrecision] = newValues;
@@ -293,19 +256,9 @@ watch([() => form.value.nai, () => form.value.precision], async (newValues, oldV
     isLoading.value = true;
     await loadTokenDetails();
     isLoading.value = false;
-
-    // Generate QR code if in send mode and logged in
-    if (!isReceiveMode.value && isLoggedIn.value)
-      await generateQRCode();
   }
 });
 
-// Watch form amount and memo changes to regenerate QR code
-watch([() => form.value.amount, () => form.value.memo, userOperationalKey], async () => {
-  if (!isReceiveMode.value && nai.value && precision.value && isLoggedIn.value)
-    await generateQRCode();
-}, { immediate: false });
-
 // Watch selected token NAI changes to load token details
 watch(selectedTokenNai, async (newNai, oldNai) => {
   if (newNai && newNai !== oldNai && shouldShowTokenSelector.value) {
@@ -552,10 +505,6 @@ onMounted(async () => {
     await loadTokenDetails();
 
   isLoading.value = false;
-
-  // Generate initial QR code if not in receive mode and user is logged in and has NAI/precision
-  if (!isReceiveMode.value && isLoggedIn.value && nai.value && precision.value)
-    await generateQRCode();
 });
 
 // If the user logs in after the page mounted (for example after entering password),
@@ -574,10 +523,6 @@ watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
     // If nai/precision available, load token details
     if (nai.value && precision.value)
       await loadTokenDetails();
-
-    // Regenerate QR code when appropriate
-    if (!isReceiveMode.value && nai.value && precision.value)
-      await generateQRCode();
   } catch (e) {
     // swallow - errors are handled inside the helpers (toastError)
     console.error('Error reloading data after login', e);
@@ -599,9 +544,6 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
 
     if (nai.value && precision.value)
       await loadTokenDetails();
-
-    if (!isReceiveMode.value && nai.value && precision.value)
-      await generateQRCode();
   } catch (e) {
     console.error('Error reloading data after tokensStore.wallet changed', e);
   } finally {
@@ -852,20 +794,13 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
         </Card>
 
         <!-- QR Code Card (visible when NAI and precision are available) -->
-        <Card v-if="nai && precision && !isReceiveMode">
-          <CardContent class="flex flex-col items-center">
-            <div v-if="qrCodeDataUrl" class="bg-white p-3 rounded-lg my-3">
-              <img :src="qrCodeDataUrl" alt="QR Code for token transfer" class="w-48 h-48 object-contain">
-            </div>
-            <div v-else class="bg-white p-3 rounded-lg my-3 flex items-center justify-center" style="width:200px; height:200px;">
-              <p class="text-muted-foreground text-center">Generating QR code...</p>
-            </div>
-            <p class="text-xs text-muted-foreground text-center max-w-md">
-              This QR code contains the transfer details. The receiver can scan it to accept the token.
-            </p>
-          </CardContent>
-        </Card>
+        <QRCodeCard
+          v-if="nai && precision && !isReceiveMode"
+          :nai="nai"
+          :precision="precision"
+          :amount="form.amount"
+          :memo="form.memo"
+        />
       </div>
-    </div>
-  </HTMView>
+  </div></HTMView>
 </template>
-- 
GitLab


From a2583818cfb031718dea5a5ba78e31c4bd7ad396 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Mon, 3 Nov 2025 09:11:30 +0100
Subject: [PATCH 075/102] Move memo input collapsible to a separated component

---
 src/components/CollapsibleMemoInput.vue | 73 +++++++++++++++++++++++++
 src/components/MemoInput.vue            | 38 -------------
 src/pages/tokens/my-balance.vue         | 52 +++---------------
 src/pages/tokens/send-token.vue         | 41 +++-----------
 src/pages/tokens/token.vue              | 56 +++----------------
 5 files changed, 96 insertions(+), 164 deletions(-)
 create mode 100644 src/components/CollapsibleMemoInput.vue
 delete mode 100644 src/components/MemoInput.vue

diff --git a/src/components/CollapsibleMemoInput.vue b/src/components/CollapsibleMemoInput.vue
new file mode 100644
index 0000000..6ae795e
--- /dev/null
+++ b/src/components/CollapsibleMemoInput.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { mdiArrowUp, mdiArrowDown } from '@mdi/js';
+import { ref, watch } from 'vue';
+
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+
+const props = defineProps<{
+  modelValue: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  placeholder?: string;
+  rows?: number;
+  // Auto-expand if memo has value (used when receiving from URL params)
+  autoExpand?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const isExpanded = ref(false);
+
+// Auto-expand if memo has value and autoExpand is true
+watch(() => props.modelValue, (newValue) => {
+  if (props.autoExpand && newValue && newValue.trim())
+    isExpanded.value = true;
+}, { immediate: true });
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLTextAreaElement;
+  emit('update:modelValue', target.value);
+};
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-between">
+      <Button
+        variant="ghost"
+        size="sm"
+        class="gap-2"
+        @click="isExpanded = !isExpanded"
+      >
+        <svg
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="flex-shrink-0"
+        >
+          <path
+            style="fill: currentColor"
+            :d="isExpanded ? mdiArrowUp : mdiArrowDown"
+          />
+        </svg>
+        {{ isExpanded ? 'Collapse' : 'Add Memo' }}
+      </Button>
+    </div>
+    <div v-show="isExpanded" class="mt-2">
+      <Textarea
+        id="memo"
+        :model-value="modelValue"
+        :placeholder="placeholder || 'Memo...'"
+        :rows="rows || 3"
+        :readonly="readonly"
+        :disabled="disabled"
+        class="resize-none"
+        @input="handleInput"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/MemoInput.vue b/src/components/MemoInput.vue
deleted file mode 100644
index 1b4e3b5..0000000
--- a/src/components/MemoInput.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-
-defineProps<{
-  modelValue: string;
-  disabled?: boolean;
-}>();
-
-const emit = defineEmits(['update:modelValue']);
-
-const handleInput = (event: string | number) => {
-  emit('update:modelValue', String(event));
-};
-</script>
-
-<template>
-  <div class="space-y-2">
-    <Label
-      for="memo"
-      class="text-sm font-medium text-foreground"
-    >
-      Memo (Optional)
-    </Label>
-    <Textarea
-      id="memo"
-      :model-value="modelValue"
-      placeholder="Optional transfer memo or note"
-      rows="3"
-      :disabled="disabled"
-      class="resize-none"
-      @update:model-value="handleInput"
-    />
-    <p class="text-xs text-muted-foreground">
-      Add an optional note for this transaction
-    </p>
-  </div>
-</template>
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 609b4e8..4ce5521 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -14,6 +14,7 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
+import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
 import HTMView from '@/components/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -21,7 +22,6 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Textarea } from '@/components/ui/textarea';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import AddToGoogleWallet from '@/components/wallet/AddToGoogleWallet.vue';
 import { useTokensStore } from '@/stores/tokens.store';
@@ -63,7 +63,6 @@ const isTransferDialogOpen = ref(false);
 const transferAmount = ref('');
 const transferRecipient = ref('');
 const transferMemo = ref('');
-const addingMemo = ref(false);
 const selectedTokenForTransfer = ref<CtokensAppBalance | null>(null);
 const isTransferLoading = ref(false);
 
@@ -1229,49 +1228,12 @@ onMounted(async () => {
             </div>
 
             <!-- memo -->
-            <div
-              v-if="addingMemo || (transferMemo && transferMemo.trim())"
-              class="space-y-2"
-            >
-              <Label
-                for="memo"
-                class="text-sm font-medium text-foreground"
-              >
-                Memo
-              </Label>
-              <Textarea
-                id="memo"
-                v-model="transferMemo"
-                placeholder="Add memo..."
-                rows="4"
-                :disabled="isTransferLoading"
-                class="resize-none"
-              />
-              <p class="text-xs text-muted-foreground">
-                A brief memo for token transfer
-              </p>
-            </div>
-
-            <Button
-              variant="ghost"
-              size="sm"
-              class="gap-2"
-              @click="addingMemo = !addingMemo"
-            >
-              <svg
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="flex-shrink-0"
-              >
-                <path
-                  style="fill: currentColor"
-                  :d="addingMemo ? mdiArrowUp : mdiArrowDown"
-                />
-              </svg>
-              {{ addingMemo ? 'Collapse' : 'Add Memo' }}
-            </Button>
+            <CollapsibleMemoInput
+              v-model="transferMemo"
+              :disabled="isTransferLoading"
+              placeholder="Add memo..."
+              :rows="4"
+            />
           </div>
 
           <div class="flex justify-end gap-2">
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index 75e2b5a..426f111 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { mdiArrowLeft, mdiArrowUp, mdiArrowDown, mdiCheckCircle } from '@mdi/js';
+import { mdiArrowLeft, mdiCheckCircle } from '@mdi/js';
 import type { htm_operation } from '@mtyszczak-cargo/htm';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
+import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
 import HTMView from '@/components/HTMView.vue';
 import TokenSelector from '@/components/tokens/TokenSelector.vue';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
@@ -13,7 +14,6 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Textarea } from '@/components/ui/textarea';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useUserStore } from '@/stores/user.store';
@@ -41,7 +41,6 @@ const token = ref<CtokensAppToken | null>(null);
 const isLoading = ref(true);
 const isUpdating = ref(false);
 const isSending = ref(false);
-const addingMemo = ref(false);
 const transferCompleted = ref(false);
 
 // Summary of the last transfer (snapshot at time of send)
@@ -496,8 +495,6 @@ onMounted(async () => {
   if (isReceiveMode.value) {
     form.value.amount = queryAmount.value || '';
     form.value.memo = queryMemo.value || '';
-    if (form.value.memo)
-      addingMemo.value = true;
   }
 
   // Load token details if NAI and precision are available
@@ -712,34 +709,12 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
             </div>
 
             <!-- Memo compact -->
-            <div>
-              <div class="flex items-center justify-between">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  class="gap-2"
-                  @click="addingMemo = !addingMemo"
-                >
-                  <svg
-                    width="16"
-                    height="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    class="flex-shrink-0"
-                  >
-                    <path
-                      style="fill: currentColor"
-                      :d="addingMemo ? mdiArrowUp : mdiArrowDown"
-                    />
-                  </svg>
-                  {{ addingMemo ? 'Collapse' : 'Add Memo' }}
-                </Button>
-
-              </div>
-              <div v-show="addingMemo" class="mt-2">
-                <Textarea id="memo" v-model="form.memo" placeholder="Memo..." rows="3" :readonly="isReceiveMode" :disabled="isUpdating" class="resize-none" />
-              </div>
-            </div>
+            <CollapsibleMemoInput
+              v-model="form.memo"
+              :readonly="isReceiveMode"
+              :disabled="isUpdating"
+              :auto-expand="!!queryMemo"
+            />
 
             <!-- Actions / Summary -->
             <div class="pt-3">
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index f26b485..f537f66 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { mdiPencilOutline, mdiContentCopy, mdiCheck, mdiQrcodeScan, mdiArrowDown, mdiArrowUp } from '@mdi/js';
+import { mdiPencilOutline, mdiContentCopy, mdiCheck, mdiQrcodeScan } from '@mdi/js';
 import type { htm_operation } from '@mtyszczak-cargo/htm';
 import { onMounted, ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
+import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
 import HTMView from '@/components/HTMView.vue';
 import { AlertDescription, Alert } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
@@ -13,7 +14,6 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Textarea } from '@/components/ui/textarea';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
@@ -55,9 +55,6 @@ const transferForm = ref({
   memo: ''
 });
 
-// Show/hide memo field
-const addingMemo = ref(false);
-
 // Stake/Unstake form
 const stakeForm = ref({
   amount: '',
@@ -1119,49 +1116,12 @@ onMounted(async () => {
                   </p>
                 </div>
 
-                <div
-                  v-if="addingMemo || (transferForm.memo && transferForm.memo.trim())"
-                  class="space-y-2"
-                >
-                  <Label
-                    for="memo"
-                    class="text-sm font-medium text-foreground"
-                  >
-                    Memo
-                  </Label>
-                  <Textarea
-                    id="memo"
-                    v-model="transferForm.memo"
-                    placeholder="Add memo..."
-                    rows="4"
-                    :disabled="isTransferring"
-                    class="resize-none"
-                  />
-                  <p class="text-xs text-muted-foreground">
-                    A brief memo for token transfer
-                  </p>
-                </div>
-
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  class="gap-2"
-                  @click="addingMemo = !addingMemo"
-                >
-                  <svg
-                    width="16"
-                    height="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    class="flex-shrink-0"
-                  >
-                    <path
-                      style="fill: currentColor"
-                      :d="addingMemo ? mdiArrowUp : mdiArrowDown"
-                    />
-                  </svg>
-                  {{ addingMemo ? 'Collapse' : 'Add Memo' }}
-                </Button>
+                <CollapsibleMemoInput
+                  v-model="transferForm.memo"
+                  :disabled="isTransferring"
+                  placeholder="Add memo..."
+                  :rows="4"
+                />
 
                 <Button
                   class="w-full"
-- 
GitLab


From 2a2196d2fead536c4409f6fa0c18d1224dff196d Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Mon, 3 Nov 2025 09:49:26 +0100
Subject: [PATCH 076/102] Move token amount input to a separated component

---
 src/components/TokenAmountInput.vue | 127 ++++++++++++++++++++++++++++
 src/pages/tokens/my-balance.vue     |  99 ++++++----------------
 src/pages/tokens/send-token.vue     |  20 +++--
 src/pages/tokens/token.vue          | 100 ++++++----------------
 4 files changed, 188 insertions(+), 158 deletions(-)
 create mode 100644 src/components/TokenAmountInput.vue

diff --git a/src/components/TokenAmountInput.vue b/src/components/TokenAmountInput.vue
new file mode 100644
index 0000000..9731fc9
--- /dev/null
+++ b/src/components/TokenAmountInput.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+const props = defineProps<{
+  modelValue: string;
+  tokenName?: string;
+  tokenSymbol?: string;
+  tokenImage?: string;
+  tokenNai?: string;
+  precision?: number;
+  disabled?: boolean;
+  label?: string | null;
+  showMaxButton?: boolean;
+  maxAmount?: string;
+  availableBalance?: string;
+  validationError?: string;
+  isValid?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'max'): void;
+}>();
+
+const placeholder = computed(() => {
+  if (props.precision !== undefined)
+    return `${props.precision} precision amount`;
+
+  return `Amount in ${props.tokenSymbol || props.tokenName || 'tokens'}`;
+});
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  emit('update:modelValue', target.value);
+};
+
+const handleMax = () => {
+  emit('max');
+};
+
+const displaySymbol = computed(() => props.tokenSymbol || props.tokenName?.slice(0, 3).toUpperCase() || '');
+const avatarFallback = computed(() => displaySymbol.value.slice(0, 2).toUpperCase());
+</script>
+
+<template>
+  <div class="space-y-2">
+    <Label
+      v-if="label !== null"
+      for="token-amount"
+      class="text-sm font-medium text-foreground"
+    >
+      {{ label || 'Amount' }}
+    </Label>
+    <div class="relative">
+      <Input
+        id="token-amount"
+        :model-value="modelValue"
+        type="text"
+        inputmode="decimal"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        class="pr-24 transition-colors"
+        :class="modelValue ? (isValid ? 'border-green-500 focus-visible:ring-green-500' : 'border-red-500 focus-visible:ring-red-500') : ''"
+        @input="handleInput"
+      />
+      <!-- Token Symbol & Image on the right -->
+      <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
+        <Avatar
+          v-if="tokenImage"
+          class="h-6 w-6"
+        >
+          <AvatarImage
+            :src="tokenImage"
+            :alt="tokenSymbol || tokenName"
+          />
+          <AvatarFallback class="text-xs">
+            {{ avatarFallback }}
+          </AvatarFallback>
+        </Avatar>
+        <span class="text-sm text-muted-foreground font-medium">
+          {{ displaySymbol }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Available balance and MAX button -->
+    <div
+      v-if="availableBalance || showMaxButton"
+      class="flex justify-between text-xs"
+    >
+      <span
+        v-if="availableBalance"
+        class="text-muted-foreground"
+      >
+        Available: {{ availableBalance }}
+      </span>
+      <button
+        v-if="showMaxButton"
+        type="button"
+        class="text-primary hover:text-primary/80 font-medium"
+        @click="handleMax"
+      >
+        MAX
+      </button>
+    </div>
+
+    <!-- NAI info -->
+    <p
+      v-if="tokenNai"
+      class="text-xs text-muted-foreground font-mono"
+    >
+      NAI: {{ tokenNai }}
+    </p>
+
+    <!-- Validation error -->
+    <p
+      v-if="modelValue && !isValid && validationError"
+      class="text-xs text-red-500"
+    >
+      {{ validationError }}
+    </p>
+  </div>
+</template>
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 4ce5521..945ce34 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -16,6 +16,7 @@ import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
 import HTMView from '@/components/HTMView.vue';
+import TokenAmountInput from '@/components/TokenAmountInput.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -1189,43 +1190,18 @@ onMounted(async () => {
               />
             </div>
 
-            <div class="grid gap-2">
-              <Label for="amount">Amount</Label>
-              <div class="relative">
-                <Input
-                  id="amount"
-                  v-model="transferAmount"
-                  type="text"
-                  inputmode="decimal"
-                  placeholder="0.000"
-                  class="pr-20 transition-colors"
-                />
-                <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
-                  <span class="text-xs text-muted-foreground">
-                    {{ getTokenSymbol(selectedTokenForTransfer!) }}
-                  </span>
-                </div>
-              </div>
-              <div class="flex justify-between text-xs">
-                <span class="text-muted-foreground">
-                  Available: {{ getLiquidBalanceDisplay(selectedTokenForTransfer!) }}
-                </span>
-                <button
-                  v-if="selectedTokenForTransfer && getLiquidBalanceNumeric(selectedTokenForTransfer) > 0"
-                  type="button"
-                  class="text-primary hover:text-primary/80 font-medium"
-                  @click="setMaxTransferAmount"
-                >
-                  MAX
-                </button>
-              </div>
-              <p
-                v-if="selectedTokenForTransfer"
-                class="text-xs text-muted-foreground"
-              >
-                Precision: {{ selectedTokenForTransfer.precision }} decimal places
-              </p>
-            </div>
+            <TokenAmountInput
+              v-model="transferAmount"
+              :token-name="getTokenName(selectedTokenForTransfer!)"
+              :token-symbol="getTokenSymbol(selectedTokenForTransfer!)"
+              :token-image="getTokenLogoUrl(selectedTokenForTransfer!)"
+              :token-nai="selectedTokenForTransfer?.nai"
+              :precision="selectedTokenForTransfer?.precision"
+              :disabled="isTransferLoading"
+              :available-balance="getLiquidBalanceDisplay(selectedTokenForTransfer!)"
+              :show-max-button="!!(selectedTokenForTransfer && getLiquidBalanceNumeric(selectedTokenForTransfer) > 0)"
+              @max="setMaxTransferAmount"
+            />
 
             <!-- memo -->
             <CollapsibleMemoInput
@@ -1312,43 +1288,18 @@ onMounted(async () => {
           </DialogHeader>
 
           <div class="grid gap-4 py-4">
-            <div class="grid gap-2">
-              <Label for="transformAmount">Amount</Label>
-              <div class="relative">
-                <Input
-                  id="transformAmount"
-                  v-model="transformAmount"
-                  type="text"
-                  inputmode="decimal"
-                  placeholder="0.000"
-                  class="pr-20 transition-colors"
-                />
-                <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
-                  <span class="text-xs text-muted-foreground">
-                    {{ getTokenSymbol(selectedToken!) }}
-                  </span>
-                </div>
-              </div>
-              <div class="flex justify-between text-xs">
-                <span class="text-muted-foreground">
-                  Available: {{ transformDirection === 'liquid-to-staked' ? getLiquidBalanceDisplay(selectedToken!) : getStakedBalanceDisplay(selectedToken!) }}
-                </span>
-                <button
-                  v-if="selectedToken && Number(transformDirection === 'liquid-to-staked' ? getLiquidBalance(selectedToken) : getStakedBalance(selectedToken)) > 0"
-                  type="button"
-                  class="text-primary hover:text-primary/80 font-medium"
-                  @click="setMaxTransformAmount"
-                >
-                  MAX
-                </button>
-              </div>
-              <p
-                v-if="selectedToken"
-                class="text-xs text-muted-foreground"
-              >
-                Precision: {{ selectedToken.precision }} decimal places
-              </p>
-            </div>
+            <TokenAmountInput
+              v-model="transformAmount"
+              :token-name="getTokenName(selectedToken!)"
+              :token-symbol="getTokenSymbol(selectedToken!)"
+              :token-image="getTokenLogoUrl(selectedToken!)"
+              :token-nai="selectedToken?.nai"
+              :precision="selectedToken?.precision"
+              :disabled="isTransformLoading"
+              :available-balance="transformDirection === 'liquid-to-staked' ? getLiquidBalanceDisplay(selectedToken!) : getStakedBalanceDisplay(selectedToken!)"
+              :show-max-button="!!(selectedToken && Number(transformDirection === 'liquid-to-staked' ? getLiquidBalance(selectedToken) : getStakedBalance(selectedToken)) > 0)"
+              @max="setMaxTransformAmount"
+            />
           </div>
 
           <div class="flex justify-end gap-2">
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index 426f111..a6dd9fb 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -7,6 +7,7 @@ import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
 import HTMView from '@/components/HTMView.vue';
+import TokenAmountInput from '@/components/TokenAmountInput.vue';
 import TokenSelector from '@/components/tokens/TokenSelector.vue';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -699,14 +700,17 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
             </div>
 
             <!-- Amount compact -->
-            <div v-if="!shouldShowTokenSelector">
-              <Label for="amount" class="text-sm font-medium text-foreground">Amount</Label>
-              <div class="relative mt-1">
-                <Input id="amount" v-model="form.amount" type="text" inputmode="decimal" :placeholder="`Amount in ${tokenSymbol || tokenName}`" class="pr-12" />
-                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground font-medium">{{ tokenSymbol }}</span>
-              </div>
-              <p v-if="form.amount && !amountValidation.isValid && amountValidation.error" class="text-xs text-red-500 mt-1">{{ amountValidation.error }}</p>
-            </div>
+            <TokenAmountInput
+              v-if="!shouldShowTokenSelector"
+              v-model="form.amount"
+              :token-name="tokenName"
+              :token-symbol="tokenSymbol"
+              :token-image="tokenImage"
+              :token-nai="token?.nai"
+              :precision="token?.precision"
+              :is-valid="amountValidation.isValid"
+              :validation-error="amountValidation.error"
+            />
 
             <!-- Memo compact -->
             <CollapsibleMemoInput
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index f537f66..691aeca 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -7,6 +7,7 @@ import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
 import HTMView from '@/components/HTMView.vue';
+import TokenAmountInput from '@/components/TokenAmountInput.vue';
 import { AlertDescription, Alert } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -1067,54 +1068,20 @@ onMounted(async () => {
                   </p>
                 </div>
 
-                <div class="space-y-2">
-                  <Label
-                    for="amount"
-                    class="text-sm font-medium text-foreground"
-                  >
-                    Amount
-                  </Label>
-                  <div class="relative">
-                    <Input
-                      id="amount"
-                      v-model="transferForm.amount"
-                      type="text"
-                      inputmode="decimal"
-                      :placeholder="`Amount in ${tokenSymbol || tokenName}`"
-                      :disabled="isTransferring"
-                      class="pr-20 transition-colors"
-                      :class="transferForm.amount ? (amountValidation.isValid ? 'border-green-500 focus-visible:ring-green-500' : 'border-red-500 focus-visible:ring-red-500') : ''"
-                    />
-                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground font-medium">
-                      {{ tokenSymbol }}
-                    </span>
-                  </div>
-                  <div class="flex justify-between text-xs">
-                    <span class="text-muted-foreground">
-                      Available: {{ formattedUserBalance }}
-                    </span>
-                    <button
-                      v-if="userBalance && Number(userBalance.amount) > 0"
-                      type="button"
-                      class="text-primary hover:text-primary/80 font-medium"
-                      @click="setMaxAmount"
-                    >
-                      MAX
-                    </button>
-                  </div>
-                  <p
-                    v-if="token"
-                    class="text-xs text-muted-foreground"
-                  >
-                    Precision: {{ token.precision }} decimal places
-                  </p>
-                  <p
-                    v-if="transferForm.amount && !amountValidation.isValid && amountValidation.error"
-                    class="text-xs text-red-500"
-                  >
-                    {{ amountValidation.error }}
-                  </p>
-                </div>
+                <TokenAmountInput
+                  v-model="transferForm.amount"
+                  :token-name="tokenName"
+                  :token-symbol="tokenSymbol"
+                  :token-image="tokenImage"
+                  :token-nai="token.nai"
+                  :precision="token.precision"
+                  :disabled="isTransferring"
+                  :available-balance="formattedUserBalance"
+                  :show-max-button="userBalance && Number(userBalance.amount) > 0"
+                  :is-valid="amountValidation.isValid"
+                  :validation-error="amountValidation.error"
+                  @max="setMaxAmount"
+                />
 
                 <CollapsibleMemoInput
                   v-model="transferForm.memo"
@@ -1251,34 +1218,15 @@ onMounted(async () => {
                 v-else
                 class="space-y-5"
               >
-                <div class="space-y-2">
-                  <Label
-                    for="stake-amount"
-                    class="text-sm font-medium text-foreground"
-                  >
-                    Amount
-                  </Label>
-                  <div class="relative">
-                    <Input
-                      id="stake-amount"
-                      v-model="stakeForm.amount"
-                      type="text"
-                      inputmode="decimal"
-                      :placeholder="`Amount in ${tokenSymbol || tokenName}`"
-                      :disabled="isStaking || isUnstaking"
-                      class="pr-20 transition-colors"
-                    />
-                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground font-medium">
-                      {{ tokenSymbol }}
-                    </span>
-                  </div>
-                  <p
-                    v-if="token"
-                    class="text-xs text-muted-foreground"
-                  >
-                    Precision: {{ token.precision }} decimal places
-                  </p>
-                </div>
+                <TokenAmountInput
+                  v-model="stakeForm.amount"
+                  :token-name="tokenName"
+                  :token-symbol="tokenSymbol"
+                  :token-image="tokenImage"
+                  :token-nai="token.nai"
+                  :precision="token.precision"
+                  :disabled="isStaking || isUnstaking"
+                />
 
                 <div class="space-y-2">
                   <Label
-- 
GitLab


From c9736a60e7155c4d37f515c2e0c618dad8c631e2 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Mon, 3 Nov 2025 10:04:52 +0100
Subject: [PATCH 077/102] Move receiver token summary to a separated component

---
 src/components/ReceiverTokenSummary.vue | 63 +++++++++++++++++++++++++
 src/pages/tokens/send-token.vue         | 61 +++---------------------
 2 files changed, 70 insertions(+), 54 deletions(-)
 create mode 100644 src/components/ReceiverTokenSummary.vue

diff --git a/src/components/ReceiverTokenSummary.vue b/src/components/ReceiverTokenSummary.vue
new file mode 100644
index 0000000..dc3c600
--- /dev/null
+++ b/src/components/ReceiverTokenSummary.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  receiverName?: string;
+  receiverKey?: string;
+  receiverAvatar?: string;
+  label?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  receiverName: '',
+  receiverKey: '',
+  receiverAvatar: '',
+  label: 'Receiver'
+});
+
+const receiverAvatarLetter = computed(() => {
+  if (props.receiverName)
+    return props.receiverName.trim().charAt(0).toUpperCase();
+
+  return '?';
+});
+
+const receiverShortKey = computed(() => {
+  if (!props.receiverKey) return '';
+  return `STM${props.receiverKey.slice(3, 9)}...${props.receiverKey.slice(-6)}`;
+});
+</script>
+
+<template>
+  <div>
+    <span class="text-sm font-medium text-foreground">
+      {{ label }}
+    </span>
+    <div class="flex items-center gap-3 min-w-0 mt-2">
+      <div
+        v-if="receiverAvatar"
+        class="w-10 h-10 rounded-full overflow-hidden flex-shrink-0 bg-muted"
+      >
+        <img
+          :src="receiverAvatar"
+          :alt="receiverName"
+          class="w-full h-full object-cover"
+        >
+      </div>
+      <div
+        v-else
+        class="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-sm font-semibold text-foreground flex-shrink-0"
+      >
+        {{ receiverAvatarLetter }}
+      </div>
+      <div class="flex flex-col min-w-0">
+        <div class="text-sm font-bold truncate">
+          {{ receiverName || 'Unknown' }}
+        </div>
+        <div class="text-xs text-muted-foreground truncate">
+          {{ receiverShortKey }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index a6dd9fb..b920a03 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -7,9 +7,9 @@ import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
 import HTMView from '@/components/HTMView.vue';
+import ReceiverTokenSummary from '@/components/ReceiverTokenSummary.vue';
 import TokenAmountInput from '@/components/TokenAmountInput.vue';
 import TokenSelector from '@/components/tokens/TokenSelector.vue';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -151,14 +151,6 @@ const tokenImage = computed(() => {
   return metadata?.image || '';
 });
 
-const receiverAvatarLetter = computed(() => {
-  const name = receiverDisplayName.value;
-  if (!name) return '?';
-  // Use first non-space character as avatar letter
-  const ch = name.trim().charAt(0).toUpperCase();
-  return ch || '?';
-});
-
 const amountValidation = computed(() => {
   if (!form.value.amount) {
     // Empty amount is valid (amount is optional)
@@ -621,51 +613,12 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
           </CardHeader>
           <CardContent class="space-y-4">
             <!-- Compact recipient + token summary -->
-            <div class="flex items-center justify-between gap-4">
-              <div>
-                <span class="inline-flex items-center text-xs font-semibold uppercase px-2 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20">{{ isReceiveMode ? 'Recipient' : 'Receiver' }}</span>
-                <div class="flex items-center gap-3 min-w-0 mt-3">
-                  <div class="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-sm font-semibold text-foreground flex-shrink-0">
-                    {{ htmUserMetadata?.profileImage ? htmUserMetadata.profileImage  : receiverAvatarLetter }}
-                  </div>
-                  <div class="flex flex-col min-w-0">
-                    <div class="text-sm font-bold truncate">{{ htmUserMetadata?.displayName }}</div>
-                    <div class="text-xs text-muted-foreground truncate">{{ receiverShortKey }}</div>
-                  </div>
-                </div>
-              </div>
-              <div class="flex flex-col items-center text-right">
-                <Avatar class="h-10 w-10 sm:h-14 sm:w-14 flex-shrink-0">
-                  <AvatarImage
-                    v-if="tokenImage"
-                    :src="tokenImage"
-                    :alt="tokenName"
-                  />
-                  <AvatarFallback>
-                    <svg
-                      v-if="!tokenImage"
-                      width="24"
-                      height="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      class="text-muted-foreground"
-                    >
-                      <path
-                        style="fill: currentColor"
-                        d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M11,7H13V17H11V7Z"
-                      />
-                    </svg>
-                    <span
-                      v-else
-                      class="text-xl sm:text-2xl font-bold text-primary"
-                    >
-                      {{ tokenSymbol ? tokenSymbol.slice(0, 2).toUpperCase() : tokenName.slice(0, 2).toUpperCase() }}
-                    </span>
-                  </AvatarFallback>
-                </Avatar>
-                <div class="text-xs text-muted-foreground mt-2">{{ form.amount || '—' }}</div>
-              </div>
-            </div>
+            <ReceiverTokenSummary
+              :receiver-name="htmUserMetadata?.displayName || receiverDisplayName"
+              :receiver-key="receiverKey"
+              :receiver-avatar="htmUserMetadata?.profileImage"
+              :label="isReceiveMode ? 'Recipient' : 'Receiver'"
+            />
 
             <!-- Token selector (compact) -->
             <div v-if="shouldShowTokenSelector" class="mt-1">
-- 
GitLab


From 8c97258f6080e5d4b495ffe538f5079019a68a94 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Mon, 3 Nov 2025 10:40:26 +0100
Subject: [PATCH 078/102] Move transfer details card to a separated component

---
 src/components/TokenSelectorWithAmount.vue  |  83 ++++
 src/components/TransferCompletedSummary.vue | 120 ++++++
 src/components/TransferDetailsCard.vue      | 411 ++++++++++++++++++
 src/components/tokens/TokenSelector.vue     |  22 +-
 src/pages/tokens/send-token.vue             | 452 ++------------------
 5 files changed, 656 insertions(+), 432 deletions(-)
 create mode 100644 src/components/TokenSelectorWithAmount.vue
 create mode 100644 src/components/TransferCompletedSummary.vue
 create mode 100644 src/components/TransferDetailsCard.vue

diff --git a/src/components/TokenSelectorWithAmount.vue b/src/components/TokenSelectorWithAmount.vue
new file mode 100644
index 0000000..b35b8cd
--- /dev/null
+++ b/src/components/TokenSelectorWithAmount.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import TokenSelector from '@/components/tokens/TokenSelector.vue';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface Props {
+  modelValue: string;
+  selectedTokenNai: string;
+  tokenSymbol?: string;
+  tokenName: string;
+  tokenPrecision?: string;
+  tokenImage?: string;
+  isValid: boolean;
+  validationError?: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits(['update:modelValue', 'update:selectedTokenNai']);
+
+const amount = computed({
+  get: () => props.modelValue,
+  set: (value: string) => emit('update:modelValue', value)
+});
+
+const selectedToken = computed({
+  get: () => props.selectedTokenNai,
+  set: (value: string | null) => emit('update:selectedTokenNai', value || '')
+});
+
+const placeholder = computed(() => {
+  return selectedToken.value ? `${props.tokenPrecision} precision amount` : 'No token selected';
+});
+</script>
+
+<template>
+  <div class="mt-1">
+    <Label
+      for="amount"
+      class="text-sm font-medium text-foreground"
+    >
+      Amount
+    </Label>
+    <div class="flex items-center w-full">
+      <div class="w-[75%]">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger as-child>
+              <Input
+                id="amount"
+                v-model="amount"
+                :disabled="!selectedTokenNai"
+                type="text"
+                inputmode="decimal"
+                :placeholder="placeholder"
+                class="pr-12 rounded-r-none border-r-0"
+              />
+            </TooltipTrigger>
+            <TooltipContent v-if="!selectedTokenNai">
+              <p>Select token to send first.</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+        <p
+          v-if="modelValue && !isValid && validationError"
+          class="text-xs text-red-500 mt-1"
+        >
+          {{ validationError }}
+        </p>
+      </div>
+      <TokenSelector
+        id="token-selector"
+        v-model="selectedToken"
+        placeholder="Choose token"
+        class="w-[25%]"
+        :class="{ 'mb-5': modelValue && !isValid && validationError }"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/TransferCompletedSummary.vue b/src/components/TransferCompletedSummary.vue
new file mode 100644
index 0000000..4bd9917
--- /dev/null
+++ b/src/components/TransferCompletedSummary.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { mdiCheckCircle } from '@mdi/js';
+import { useRouter } from 'vue-router';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+interface Props {
+  amount: string;
+  tokenSymbol?: string;
+  tokenName: string;
+  isReceiveMode: boolean;
+  receiverKey?: string;
+  receiverName?: string;
+  remainingBalance?: string;
+  timestamp?: string;
+  nai: string;
+  precision: string;
+  memo?: string;
+}
+
+const props = defineProps<Props>();
+
+const router = useRouter();
+
+const generateInvoice = () => {
+  const params = new URLSearchParams({
+    fromPk: props.isReceiveMode ? CTokensProvider.getOperationalPublicKey() || '' : CTokensProvider.getOperationalPublicKey() || '',
+    toPk: props.isReceiveMode ? props.receiverKey || '' : CTokensProvider.getOperationalPublicKey() || '',
+    amount: props.amount || '0',
+    nai: props.nai,
+    precision: props.precision
+  });
+
+  if (props.memo)
+    params.append('memo', props.memo);
+
+  router.push({
+    path: '/tokens/invoice',
+    query: Object.fromEntries(params)
+  });
+};
+</script>
+
+<template>
+  <div class="mt-4">
+    <Card>
+      <CardHeader>
+        <div class="flex items-center gap-3">
+          <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
+            <svg
+              width="28"
+              height="28"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiCheckCircle"
+                class="text-green-600"
+              />
+            </svg>
+          </div>
+          <div>
+            <CardTitle class="text-lg">
+              Transfer Completed
+            </CardTitle>
+            <CardDescription class="text-sm text-muted-foreground">
+              {{ timestamp || new Date().toISOString() }}
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent class="space-y-4">
+        <div class="text-3xl font-extrabold text-foreground">
+          {{ amount }} <span class="text-xl font-semibold">{{ tokenSymbol || tokenName }}</span>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
+          <div class="space-y-1">
+            <div class="text-xs text-muted-foreground">
+              From
+            </div>
+            <div class="font-medium">
+              {{ isReceiveMode ? receiverKey?.substring(0, 6) + '...' + receiverKey?.substring(receiverKey.length - 4) : receiverName }}
+            </div>
+          </div>
+          <div class="space-y-1">
+            <div class="text-xs text-muted-foreground">
+              To
+            </div>
+            <div class="font-medium truncate">
+              {{ isReceiveMode ? receiverName : receiverKey?.substring(0, 6) + '...' + receiverKey?.substring(receiverKey.length - 4) }}
+            </div>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between">
+          <div class="text-sm text-muted-foreground">
+            Remaining balance
+          </div>
+          <div class="font-medium">
+            {{ remainingBalance || '—' }}
+          </div>
+        </div>
+
+        <div class="border-t pt-3">
+          <Button
+            size="sm"
+            class="w-full"
+            @click.prevent="generateInvoice"
+          >
+            Generate Invoice
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+</template>
diff --git a/src/components/TransferDetailsCard.vue b/src/components/TransferDetailsCard.vue
new file mode 100644
index 0000000..881cca0
--- /dev/null
+++ b/src/components/TransferDetailsCard.vue
@@ -0,0 +1,411 @@
+<script setup lang="ts">
+import type { htm_operation } from '@mtyszczak-cargo/htm';
+import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { toast } from 'vue-sonner';
+
+import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
+import ReceiverTokenSummary from '@/components/ReceiverTokenSummary.vue';
+import TokenAmountInput from '@/components/TokenAmountInput.vue';
+import TokenSelectorWithAmount from '@/components/TokenSelectorWithAmount.vue';
+import TransferCompletedSummary from '@/components/TransferCompletedSummary.vue';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
+import { useWalletStore } from '@/stores/wallet.store';
+import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
+import { waitForTransactionStatus } from '@/utils/transaction-status';
+import type { CtokensAppBalance, CtokensAppToken } from '@/utils/wallet/ctokens/api';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+interface Props {
+  isReceiveMode: boolean;
+  hasNaiFromUrl: boolean;
+  shouldShowTokenSelector: boolean;
+  receiverName?: string;
+  receiverKey?: string;
+  receiverAvatar?: string;
+  tokenData?: CtokensAppToken | null;
+  queryAmount?: string;
+  queryMemo?: string;
+  nai: string;
+  precision: string;
+  selectedTokenNai?: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  updateSelectedTokenNai: [value: string];
+  transferCompleted: [summary: { amount: string; tokenLabel: string; receiver: string; remainingBalance?: string; timestamp?: string }];
+  updateAmount: [value: string];
+  updateMemo: [value: string];
+}>();
+
+const router = useRouter();
+const settingsStore = useSettingsStore();
+const tokensStore = useTokensStore();
+const walletStore = useWalletStore();
+
+// Form state
+const form = ref({
+  amount: props.queryAmount || '',
+  memo: props.queryMemo || ''
+});
+
+const selectedTokenNai = computed({
+  get: () => props.selectedTokenNai || '',
+  set: (value: string) => emit('updateSelectedTokenNai', value)
+});
+const showDetails = ref(false);
+const isUpdating = ref(false);
+const isSending = ref(false);
+const transferCompleted = ref(false);
+const sentSummary = ref<{ amount: string; tokenLabel: string; receiver: string; remainingBalance?: string; timestamp?: string } | null>(null);
+
+// Check if user is logged in
+const isLoggedIn = computed(() => !!settingsStore.settings.account);
+
+const tokenName = computed(() => {
+  if (!props.tokenData) return 'Unknown Token';
+  const metadata = props.tokenData.metadata as { name?: string } | undefined;
+  return metadata?.name || props.tokenData.nai || 'Unknown Token';
+});
+
+const tokenSymbol = computed(() => {
+  if (!props.tokenData) return '';
+  const metadata = props.tokenData.metadata as { symbol?: string } | undefined;
+  return metadata?.symbol || '';
+});
+
+const tokenImage = computed(() => {
+  if (!props.tokenData) return '';
+  const metadata = props.tokenData.metadata as { image?: string } | undefined;
+  return metadata?.image || '';
+});
+
+const amountValidation = computed(() => {
+  if (!form.value.amount)
+    return { isValid: true, error: '' };
+
+  if (!props.tokenData)
+    return { isValid: true, error: '' };
+
+  return validateAmountPrecision(form.value.amount, props.tokenData.precision || 0);
+});
+
+const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
+  try {
+    const cleanAmount = amount.replace(/[,\s]/g, '');
+
+    if (!/^\d*\.?\d*$/.test(cleanAmount))
+      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
+
+    const numAmount = parseFloat(cleanAmount);
+    if (isNaN(numAmount) || numAmount <= 0)
+      return { isValid: false, error: 'Amount must be a positive number' };
+
+    if (!isFinite(numAmount))
+      return { isValid: false, error: 'Amount value is too large' };
+
+    const decimalIndex = cleanAmount.indexOf('.');
+    if (decimalIndex !== -1) {
+      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
+      if (decimalPlaces > precision) {
+        return {
+          isValid: false,
+          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
+        };
+      }
+    }
+
+    const multiplier = Math.pow(10, precision);
+    const baseUnits = numAmount * multiplier;
+
+    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
+    if (baseUnits > MAX_SAFE_BASE_UNITS)
+      return { isValid: false, error: 'Amount is too large and would cause overflow' };
+
+    const roundedBaseUnits = Math.round(baseUnits);
+    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
+      return {
+        isValid: false,
+        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
+      };
+    }
+
+    return { isValid: true, parsedAmount: roundedBaseUnits.toString() };
+  } catch (_error) {
+    return { isValid: false, error: 'Invalid amount format' };
+  }
+};
+
+const isFormValid = computed(() => {
+  if (props.isReceiveMode) {
+    if (!props.tokenData) return false;
+    if (form.value.amount.trim() === '') return true;
+    return amountValidation.value.isValid;
+  }
+  if (props.shouldShowTokenSelector && !selectedTokenNai.value) return false;
+  if (form.value.amount.trim() === '') return true;
+  return amountValidation.value.isValid;
+});
+
+const parseAssetAmount = (amountStr: string, precision: number): string => {
+  const [integerPart, fractionalPart = ''] = amountStr.split('.');
+  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
+  return integerPart + normalizedFractional;
+};
+
+const formatAmount = (amount: string, precision: number, symbol?: string) => {
+  try {
+    const num = parseFloat(amount);
+    if (isNaN(num)) return amount;
+
+    const parts = num.toFixed(precision).split('.');
+    parts[0] = parts[0]!.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    const formatted = parts.join('.');
+    return symbol ? `${formatted} ${symbol}` : formatted;
+  } catch {
+    return amount;
+  }
+};
+
+const handleSend = async () => {
+  if (!props.tokenData) {
+    toastError('Token not loaded', new Error('Token details not available'));
+    return;
+  }
+
+  if (!isLoggedIn.value || !CTokensProvider.getOperationalPublicKey()) {
+    toast.error('Please log in to your wallet first');
+    router.push({
+      path: '/',
+      query: {
+        redirect: router.currentRoute.value.fullPath
+      }
+    });
+    return;
+  }
+
+  if (!form.value.amount || !props.receiverKey) {
+    toastError('Missing required fields', new Error('Amount and receiver are required'));
+    return;
+  }
+
+  if (!amountValidation.value.isValid) {
+    toastError('Invalid amount', new Error(amountValidation.value.error || 'Invalid amount format'));
+    return;
+  }
+
+  if (typeof settingsStore.settings.account === 'undefined' || walletStore.isL2Wallet)
+    throw new Error('Transferring via proxy is not supported yet. Please log in using your L1 wallet first.');
+
+  try {
+    isSending.value = true;
+
+    const baseAmount = parseAssetAmount(form.value.amount, props.tokenData.precision || 0);
+
+    await waitForTransactionStatus(
+      () => ([{
+        token_transfer_operation: {
+          amount: {
+            amount: baseAmount,
+            nai: props.tokenData!.nai!,
+            precision: props.tokenData!.precision || 0
+          },
+          receiver: props.receiverKey!,
+          sender: CTokensProvider.getOperationalPublicKey()!,
+          memo: form.value.memo
+        }
+      } satisfies htm_operation]),
+      'Transfer'
+    );
+
+    toast.success('Token sent successfully!');
+
+    transferCompleted.value = true;
+
+    await tokensStore.loadBalances(true);
+
+    const receiverLabel = props.receiverName || props.receiverKey || 'Recipient';
+    const tokenLabel = tokenSymbol.value || tokenName.value || props.tokenData!.nai || '';
+
+    let remaining = '';
+    const balanceObj = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === props.tokenData!.nai) as CtokensAppBalance | undefined;
+    if (balanceObj && balanceObj.amount) {
+      try {
+        const wax = await getWax();
+        const formatted = wax.formatter.formatNumber(balanceObj.amount!, props.tokenData!.precision || 0);
+        remaining = tokenSymbol.value ? `${formatted} ${tokenSymbol.value}` : formatted;
+      } catch (_e) {
+        remaining = formatAmount(balanceObj.amount!, props.tokenData!.precision || 0, tokenSymbol.value || tokenName.value);
+      }
+    }
+
+    const ts = new Date().toISOString();
+
+    sentSummary.value = {
+      amount: form.value.amount,
+      tokenLabel,
+      receiver: receiverLabel,
+      remainingBalance: remaining,
+      timestamp: ts
+    };
+
+    emit('transferCompleted', sentSummary.value);
+  } catch (error) {
+    toastError('Transfer failed', error);
+  } finally {
+    isSending.value = false;
+  }
+};
+
+// Watch query params changes to update form
+watch(() => props.queryAmount, (newValue) => {
+  if (newValue)
+    form.value.amount = newValue;
+});
+
+watch(() => props.queryMemo, (newValue) => {
+  if (newValue)
+    form.value.memo = newValue;
+});
+
+// Watch form changes to emit updates
+watch(() => form.value.amount, (newValue) => {
+  emit('updateAmount', newValue);
+});
+
+watch(() => form.value.memo, (newValue) => {
+  emit('updateMemo', newValue);
+});
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Transfer details</CardTitle>
+      <CardDescription>
+        {{ isReceiveMode ? 'Review the transfer details' : (hasNaiFromUrl ? 'Specify the transfer amount' : 'Enter token details and specify the transfer amount') }}
+      </CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-4">
+      <!-- Compact recipient + token summary -->
+      <ReceiverTokenSummary
+        :receiver-name="receiverName"
+        :receiver-key="receiverKey"
+        :receiver-avatar="receiverAvatar"
+        :label="isReceiveMode ? 'Recipient' : 'Receiver'"
+      />
+
+      <!-- Token selector (compact) -->
+      <TokenSelectorWithAmount
+        v-if="shouldShowTokenSelector"
+        v-model="form.amount"
+        v-model:selected-token-nai="selectedTokenNai"
+        :token-symbol="tokenSymbol"
+        :token-name="tokenName"
+        :token-precision="props?.precision"
+        :token-image="props.tokenData?.metadata?.image"
+        :is-valid="amountValidation.isValid"
+        :validation-error="amountValidation.error"
+      />
+
+      <!-- Small details toggle for NAI/precision when needed -->
+      <div
+        v-if="!hasNaiFromUrl && !shouldShowTokenSelector"
+        class="flex items-center justify-between"
+      >
+        <div class="text-xs text-muted-foreground">
+          Token NAI / precision
+        </div>
+        <Button
+          size="sm"
+          variant="ghost"
+          class="px-2 py-1"
+          @click="showDetails = !showDetails"
+        >
+          {{ showDetails ? 'Hide' : 'Show' }}
+        </Button>
+      </div>
+
+      <div
+        v-if="showDetails && !hasNaiFromUrl && !shouldShowTokenSelector"
+        class="grid grid-cols-2 gap-2"
+      >
+        <Input
+          id="nai"
+          type="text"
+          placeholder="NAI"
+          class="transition-colors"
+          disabled
+          :value="nai"
+        />
+        <Input
+          id="precision"
+          type="number"
+          placeholder="Precision"
+          min="0"
+          max="18"
+          class="transition-colors"
+          disabled
+          :value="precision"
+        />
+      </div>
+
+      <!-- Amount compact -->
+      <TokenAmountInput
+        v-if="!shouldShowTokenSelector"
+        v-model="form.amount"
+        :token-name="tokenName"
+        :token-symbol="tokenSymbol"
+        :token-image="tokenImage"
+        :token-nai="tokenData?.nai"
+        :precision="tokenData?.precision"
+        :is-valid="amountValidation.isValid"
+        :validation-error="amountValidation.error"
+      />
+
+      <!-- Memo compact -->
+      <CollapsibleMemoInput
+        v-model="form.memo"
+        :readonly="isReceiveMode"
+        :disabled="isUpdating"
+        :auto-expand="!!queryMemo"
+      />
+
+      <!-- Actions / Summary -->
+      <div class="pt-3">
+        <!-- Send button (only shown when confirming a transfer request / receive-mode) -->
+        <Button
+          v-if="isReceiveMode && !transferCompleted"
+          class="w-full"
+          :disabled="isSending || !isFormValid"
+          @click="handleSend"
+        >
+          {{ isSending ? 'Sending...' : (isLoggedIn ? 'Send Token' : 'Log in to Send Token') }}
+        </Button>
+
+        <!-- Bank-style confirmation summary shown after a successful transfer -->
+        <TransferCompletedSummary
+          v-if="transferCompleted"
+          :amount="sentSummary?.amount || form.amount"
+          :token-symbol="tokenSymbol"
+          :token-name="tokenName"
+          :is-receive-mode="isReceiveMode"
+          :receiver-key="receiverKey"
+          :receiver-name="receiverName"
+          :remaining-balance="sentSummary?.remainingBalance"
+          :timestamp="sentSummary?.timestamp"
+          :nai="nai"
+          :precision="precision"
+          :memo="form.memo"
+        />
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/components/tokens/TokenSelector.vue b/src/components/tokens/TokenSelector.vue
index 062c27d..03dc284 100644
--- a/src/components/tokens/TokenSelector.vue
+++ b/src/components/tokens/TokenSelector.vue
@@ -3,6 +3,7 @@ import { mdiArrowDown } from '@mdi/js';
 import { Check, Search } from 'lucide-vue-next';
 import { computed, onMounted, ref, watch } from 'vue';
 
+import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/components/ui/combobox';
 import { useTokensStore } from '@/stores/tokens.store';
 import type { CtokensAppBalance } from '@/utils/wallet/ctokens/api';
@@ -98,6 +99,15 @@ const selectedToken = computed(() => {
   return ownedTokens.value.find(token => token.balance.nai === selectedValue.value);
 });
 
+// Token image URL
+const tokenImage = computed(() => {
+  if (!selectedToken.value) return undefined;
+  const metadata = selectedToken.value.balance.metadata as { image?: string } | undefined;
+  const tokenDef = tokensStore.getTokenDefinitionByNAI(selectedToken.value.balance.nai!);
+  const tokenMetadata = tokenDef?.metadata as { image?: string } | undefined;
+  return metadata?.image || tokenMetadata?.image || '';
+});
+
 // Watch for changes in balances to ensure we have the latest data
 watch(() => tokensStore.balances, () => {
   // Balances updated, component will re-compute ownedTokens
@@ -117,11 +127,15 @@ onMounted(async () => {
         <div class="flex items-center justify-between flex-1 min-w-0">
           <div
             v-if="selectedToken"
-            class="flex items-center gap-3 truncate flex-1 min-w-0"
+            class="flex items-center gap-2 truncate flex-1 min-w-0"
           >
-            <div class="flex flex-col items-start min-w-0 flex-1">
-              <span class="font-semibold text-foreground truncate">{{ selectedToken.displayName }}</span>
-            </div>
+            <Avatar v-if="tokenImage" class="h-6 w-6">
+              <AvatarImage
+                :src="tokenImage"
+                :alt="selectedToken.displayName"
+              />
+            </Avatar>
+            <span class="font-semibold text-foreground truncate">{{ selectedToken.displayName }}</span>
           </div>
           <span
             v-else
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index b920a03..69fb268 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -1,32 +1,23 @@
 <script setup lang="ts">
-import { mdiArrowLeft, mdiCheckCircle } from '@mdi/js';
-import type { htm_operation } from '@mtyszczak-cargo/htm';
+import { mdiArrowLeft } from '@mdi/js';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
 import HTMView from '@/components/HTMView.vue';
-import ReceiverTokenSummary from '@/components/ReceiverTokenSummary.vue';
-import TokenAmountInput from '@/components/TokenAmountInput.vue';
-import TokenSelector from '@/components/tokens/TokenSelector.vue';
+import TransferDetailsCard from '@/components/TransferDetailsCard.vue';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useUserStore } from '@/stores/user.store';
-import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
-import { waitForTransactionStatus } from '@/utils/transaction-status';
-import type { CtokensAppToken, CtokensAppBalance } from '@/utils/wallet/ctokens/api';
+import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 import QRCodeCard from '~/src/components/tokens/QRCodeCard.vue';
-import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent } from '~/src/components/ui/tooltip';
 
 // Router
 const route = useRoute();
@@ -34,21 +25,11 @@ const router = useRouter();
 
 const settingsStore = useSettingsStore();
 const tokensStore = useTokensStore();
-const walletStore = useWalletStore();
 const userStore = useUserStore();
 
 // State
 const token = ref<CtokensAppToken | null>(null);
 const isLoading = ref(true);
-const isUpdating = ref(false);
-const isSending = ref(false);
-const transferCompleted = ref(false);
-
-// Summary of the last transfer (snapshot at time of send)
-const sentSummary = ref<{ amount: string; tokenLabel: string; receiver: string; remainingBalance?: string; timestamp?: string } | null>(null);
-
-// UI toggles for compact view
-const showDetails = ref(false);
 
 // Form state
 const form = ref({
@@ -105,20 +86,6 @@ const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKe
 // Check if user is logged in
 const isLoggedIn = computed(() => !!settingsStore.settings.account);
 
-// Check if current user is the token owner
-
-const tokenName = computed(() => {
-  if (!token.value) return 'Unknown Token';
-  const metadata = token.value.metadata as { name?: string } | undefined;
-  return metadata?.name || token.value.nai || 'Unknown Token';
-});
-
-const tokenSymbol = computed(() => {
-  if (!token.value) return '';
-  const metadata = token.value.metadata as { symbol?: string } | undefined;
-  return metadata?.symbol || '';
-});
-
 // Receiver display helpers (compact UI)
 const receiverDisplayName = computed(() => {
   // In receive mode the recipient is you — prefer parsed user name (L2 if available)
@@ -139,118 +106,6 @@ const receiverDisplayName = computed(() => {
   return `${rk.slice(0, 6)}…${rk.slice(-4)}`;
 });
 
-const receiverShortKey = computed(() =>
-  isReceiveMode.value
-    ? (userOperationalKey.value || '')
-    : (receiverKey.value ? `${receiverKey.value.slice(0, 8)}…` : '')
-);
-
-const tokenImage = computed(() => {
-  if (!token.value) return '';
-  const metadata = token.value.metadata as { image?: string } | undefined;
-  return metadata?.image || '';
-});
-
-const amountValidation = computed(() => {
-  if (!form.value.amount) {
-    // Empty amount is valid (amount is optional)
-    return { isValid: true, error: '' };
-  }
-  if (!token.value) {
-    // If token is not loaded, don't validate amount
-    return { isValid: true, error: '' };
-  }
-  return validateAmountPrecision(form.value.amount, token.value.precision || 0);
-});
-
-// Validate amount precision and overflow
-const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
-  try {
-    // Remove thousand separators (commas, spaces) to get clean number
-    const cleanAmount = amount.replace(/[,\s]/g, '');
-
-    // Check if amount contains only valid characters (digits, decimal point)
-    if (!/^\d*\.?\d*$/.test(cleanAmount))
-      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
-
-    // Check if amount is a valid number
-    const numAmount = parseFloat(cleanAmount);
-    if (isNaN(numAmount) || numAmount <= 0)
-      return { isValid: false, error: 'Amount must be a positive number' };
-
-    // Check for infinity
-    if (!isFinite(numAmount))
-      return { isValid: false, error: 'Amount value is too large' };
-
-    // Check decimal places - count actual decimal places in input
-    const decimalIndex = cleanAmount.indexOf('.');
-    if (decimalIndex !== -1) {
-      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
-      if (decimalPlaces > precision) {
-        return {
-          isValid: false,
-          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
-        };
-      }
-    }
-
-    // Convert to base units to check for overflow
-    const multiplier = Math.pow(10, precision);
-    const baseUnits = numAmount * multiplier;
-
-    // Check for overflow - ensure it's within safe integer range
-    // Maximum safe integer in JavaScript is 2^53 - 1
-    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
-    if (baseUnits > MAX_SAFE_BASE_UNITS)
-      return { isValid: false, error: 'Amount is too large and would cause overflow' };
-
-    // Ensure conversion to base units produces an integer (no precision loss)
-    const roundedBaseUnits = Math.round(baseUnits);
-    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
-      return {
-        isValid: false,
-        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
-      };
-    }
-
-    return { isValid: true, parsedAmount: roundedBaseUnits.toString() };
-  } catch (_error) {
-    return { isValid: false, error: 'Invalid amount format' };
-  }
-};
-
-// Form validation
-const isFormValid = computed(() => {
-  // Receive mode: only token and amount validation matter
-  if (isReceiveMode.value) {
-    if (!token.value) return false;
-    if (form.value.amount.trim() === '') return true;
-    return amountValidation.value.isValid;
-  }
-  // Send mode: NAI and precision required if not from URL or selector
-  if (!hasNaiFromUrl.value && !shouldShowTokenSelector.value) {
-    if (!form.value.nai.trim() || !form.value.precision.trim()) return false;
-    const precisionNum = parseInt(form.value.precision);
-    if (isNaN(precisionNum) || precisionNum < 0 || precisionNum > 18) return false;
-  }
-  if (shouldShowTokenSelector.value && !selectedTokenNai.value) return false;
-  if (form.value.amount.trim() === '') return true;
-  return amountValidation.value.isValid;
-});
-
-// Watch NAI and precision changes to load token details
-watch([() => form.value.nai, () => form.value.precision], async (newValues, oldValues) => {
-  const [newNai, newPrecision] = newValues;
-  const [oldNai, oldPrecision] = oldValues;
-
-  // Only load if both are provided and have changed
-  if (newNai && newPrecision && (newNai !== oldNai || newPrecision !== oldPrecision)) {
-    isLoading.value = true;
-    await loadTokenDetails();
-    isLoading.value = false;
-  }
-});
-
 // Watch selected token NAI changes to load token details
 watch(selectedTokenNai, async (newNai, oldNai) => {
   if (newNai && newNai !== oldNai && shouldShowTokenSelector.value) {
@@ -268,139 +123,6 @@ watch(selectedTokenNai, async (newNai, oldNai) => {
   }
 });
 
-// Parse asset amount - convert decimal to base units (integer with precision zeros)
-const parseAssetAmount = (amountStr: string, precision: number): string => {
-  const [integerPart, fractionalPart = ''] = amountStr.split('.');
-  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
-  return integerPart + normalizedFractional;
-};
-
-// Helper to format decimal amounts (used synchronously when wax formatter isn't available)
-const formatAmount = (amount: string, precision: number, symbol?: string) => {
-  try {
-    const num = parseFloat(amount);
-    if (isNaN(num)) return amount;
-
-    // Format with precision and add thousand separators
-    const parts = num.toFixed(precision).split('.');
-    parts[0] = parts[0]!.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    const formatted = parts.join('.');
-    return symbol ? `${formatted} ${symbol}` : formatted;
-  } catch {
-    return amount;
-  }
-};
-
-// Compute remaining balance for currently selected token from tokens store (display-friendly)
-const remainingBalanceDisplay = computed(() => {
-  if (!token.value) return '';
-  const balance = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === token.value!.nai) as CtokensAppBalance | undefined;
-  if (!balance || !balance.amount) return '';
-
-  return formatAmount(balance.amount!, token.value!.precision || 0, tokenSymbol.value || tokenName.value);
-});
-
-// Handle send transaction
-const handleSend = async () => {
-  if (!token.value) {
-    toastError('Token not loaded', new Error('Token details not available'));
-    return;
-  }
-
-  // Check if user is logged in - if not, prompt them to log in first
-  if (!isLoggedIn.value || !CTokensProvider.getOperationalPublicKey()) {
-    toast.error('Please log in to your wallet first');
-    // Redirect to home page for login
-    router.push({
-      path: '/',
-      query: {
-        // Store the current URL to redirect back after login
-        redirect: route.fullPath
-      }
-    });
-    return;
-  }
-
-  if (!form.value.amount || !receiverKey.value) {
-    toastError('Missing required fields', new Error('Amount and receiver are required'));
-    return;
-  }
-
-  // Validate amount
-  if (!amountValidation.value.isValid) {
-    toastError('Invalid amount', new Error(amountValidation.value.error || 'Invalid amount format'));
-    return;
-  }
-
-  if (typeof settingsStore.settings.account === 'undefined' || walletStore.isL2Wallet)
-    throw new Error('Transferring via proxy is not supported yet. Please log in using your L1 wallet first.');
-
-  try {
-    isSending.value = true;
-
-    // Convert decimal amount to base units (add precision zeros)
-    const baseAmount = parseAssetAmount(form.value.amount, token.value.precision || 0);
-
-    // Wait for transaction status and capture its result if available
-    await waitForTransactionStatus(
-      () => ([{
-        token_transfer_operation: {
-          amount: {
-            amount: baseAmount,
-            nai: token.value!.nai!,
-            precision: token.value!.precision || 0
-          },
-          receiver: receiverKey.value!,
-          sender: CTokensProvider.getOperationalPublicKey()!,
-          memo: form.value.memo
-        }
-      } satisfies htm_operation]),
-      'Transfer'
-    );
-
-    toast.success('Token sent successfully!');
-
-    // Mark transfer as completed to show invoice generation option
-    transferCompleted.value = true;
-
-    // Reload balances so we can compute remaining balance
-    await tokensStore.loadBalances(true);
-
-    // Capture a snapshot summary to show to the user (amount, token label, receiver and remaining balance)
-    const receiverLabel = receiverDisplayName.value || receiverShortKey.value || receiverKey.value || 'Recipient';
-    const tokenLabel = tokenSymbol.value || tokenName.value || token.value!.nai || '';
-
-    // Compute remaining balance if available using the same approach as token.vue (balance.amount decimal string)
-    let remaining = '';
-    const balanceObj = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === token.value!.nai) as CtokensAppBalance | undefined;
-    if (balanceObj && balanceObj.amount) {
-      try {
-        // Prefer wax formatter for localized formatting when available
-        const wax = await getWax();
-        const formatted = wax.formatter.formatNumber(balanceObj.amount!, token.value!.precision || 0);
-        remaining = tokenSymbol.value ? `${formatted} ${tokenSymbol.value}` : formatted;
-      } catch (_e) {
-        // Fallback to synchronous formatter
-        remaining = formatAmount(balanceObj.amount!, token.value!.precision || 0, tokenSymbol.value || tokenName.value);
-      }
-    }
-
-    const ts = new Date().toISOString();
-
-    sentSummary.value = {
-      amount: form.value.amount,
-      tokenLabel,
-      receiver: receiverLabel,
-      remainingBalance: remaining,
-      timestamp: ts
-    };
-  } catch (error) {
-    toastError('Transfer failed', error);
-  } finally {
-    isSending.value = false;
-  }
-};
-
 // Load token details
 const loadTokenDetails = async () => {
   if (!nai.value) return;
@@ -438,30 +160,6 @@ const goBack = () => {
   });
 };
 
-// Generate invoice
-const generateInvoice = () => {
-  const params = new URLSearchParams({
-    fromPk: isReceiveMode.value ? userOperationalKey.value || '' : userOperationalKey.value || '',
-    toPk: isReceiveMode.value ? receiverKey.value || '' : userOperationalKey.value || '',
-    amount: form.value.amount || '0',
-    nai: nai.value,
-    precision: precision.value
-  });
-
-  // Add optional fields
-  if (form.value.memo)
-    params.append('memo', form.value.memo);
-
-  // You can add names if they are available from your stores/context
-  // params.append('fromName', 'Sender Name');
-  // params.append('toName', 'Receiver Name');
-
-  router.push({
-    path: '/tokens/invoice',
-    query: Object.fromEntries(params)
-  });
-};
-
 // Initialize
 onMounted(async () => {
   // In receive mode (when someone scans QR code), allow viewing without login
@@ -603,127 +301,24 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
           </p>
         </div>
 
-        <!-- Send token Card -->
-        <Card>
-          <CardHeader>
-            <CardTitle>Transfer details</CardTitle>
-            <CardDescription>
-              {{ isReceiveMode ? 'Review the transfer details' : (hasNaiFromUrl ? 'Specify the transfer amount' : 'Enter token details and specify the transfer amount') }}
-            </CardDescription>
-          </CardHeader>
-          <CardContent class="space-y-4">
-            <!-- Compact recipient + token summary -->
-            <ReceiverTokenSummary
-              :receiver-name="htmUserMetadata?.displayName || receiverDisplayName"
-              :receiver-key="receiverKey"
-              :receiver-avatar="htmUserMetadata?.profileImage"
-              :label="isReceiveMode ? 'Recipient' : 'Receiver'"
-            />
-
-            <!-- Token selector (compact) -->
-            <div v-if="shouldShowTokenSelector" class="mt-1">
-              <Label for="amount" class="text-sm font-medium text-foreground">Amount</Label>
-              <div class="flex items-center w-full">
-                <div class="w-[75%]">
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger as-child>
-                        <Input id="amount" v-model="form.amount" :disabled="!selectedTokenNai" type="text" inputmode="decimal" :placeholder="`Amount in ${tokenSymbol || tokenName}`" class="pr-12 rounded-r-none border-r-0" />
-                      </TooltipTrigger>
-                      <TooltipContent v-if="!selectedTokenNai">
-                        <p>Select token to send first.</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                  <p v-if="form.amount && !amountValidation.isValid && amountValidation.error" class="text-xs text-red-500 mt-1">{{ amountValidation.error }}</p>
-                </div>
-                <TokenSelector id="token-selector" v-model="selectedTokenNai" placeholder="Choose token" class="w-[25%]" :class="{ 'mb-5': form.amount && !amountValidation.isValid && amountValidation.error }" />
-              </div>
-            </div>
-
-            <!-- Small details toggle for NAI/precision when needed -->
-            <div v-if="!hasNaiFromUrl && !shouldShowTokenSelector" class="flex items-center justify-between">
-              <div class="text-xs text-muted-foreground">Token NAI / precision</div>
-              <Button size="sm" variant="ghost" class="px-2 py-1" @click="showDetails = !showDetails">{{ showDetails ? 'Hide' : 'Show' }}</Button>
-            </div>
-
-            <div v-if="showDetails && !hasNaiFromUrl && !shouldShowTokenSelector" class="grid grid-cols-2 gap-2">
-              <Input id="nai" v-model="form.nai" type="text" placeholder="NAI" class="transition-colors" />
-              <Input id="precision" v-model="form.precision" type="number" placeholder="Precision" min="0" max="18" class="transition-colors" />
-            </div>
-
-            <!-- Amount compact -->
-            <TokenAmountInput
-              v-if="!shouldShowTokenSelector"
-              v-model="form.amount"
-              :token-name="tokenName"
-              :token-symbol="tokenSymbol"
-              :token-image="tokenImage"
-              :token-nai="token?.nai"
-              :precision="token?.precision"
-              :is-valid="amountValidation.isValid"
-              :validation-error="amountValidation.error"
-            />
-
-            <!-- Memo compact -->
-            <CollapsibleMemoInput
-              v-model="form.memo"
-              :readonly="isReceiveMode"
-              :disabled="isUpdating"
-              :auto-expand="!!queryMemo"
-            />
-
-            <!-- Actions / Summary -->
-            <div class="pt-3">
-              <!-- Send button (only shown when confirming a transfer request / receive-mode) -->
-              <Button v-if="isReceiveMode && !transferCompleted" class="w-full" :disabled="isSending || !isFormValid" @click="handleSend">{{ isSending ? 'Sending...' : (isLoggedIn ? 'Send Token' : 'Log in to Send Token') }}</Button>
-
-              <!-- Bank-style confirmation summary shown after a successful transfer -->
-              <div v-if="transferCompleted" class="mt-4">
-                <Card>
-                  <CardHeader>
-                    <div class="flex items-center gap-3">
-                      <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
-                        <svg width="28" height="28" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                          <path style="fill: currentColor" :d="mdiCheckCircle" class="text-green-600" />
-                        </svg>
-                      </div>
-                      <div>
-                        <CardTitle class="text-lg">Transfer Completed</CardTitle>
-                        <CardDescription class="text-sm text-muted-foreground">{{ sentSummary?.timestamp || new Date().toISOString() }}</CardDescription>
-                      </div>
-                    </div>
-                  </CardHeader>
-                  <CardContent class="space-y-4">
-                    <div class="text-3xl font-extrabold text-foreground">
-                      {{ sentSummary?.amount || form.amount }} <span class="text-xl font-semibold">{{ tokenSymbol || tokenName }}</span>
-                    </div>
-
-                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
-                      <div class="space-y-1">
-                        <div class="text-xs text-muted-foreground">From</div>
-                        <div class="font-medium">{{ isReceiveMode ? receiverKey?.substring(0, 6) + '...' + receiverKey?.substring(receiverKey.length - 4) : htmUserMetadata?.displayName }}</div>
-                      </div>
-                      <div class="space-y-1">
-                        <div class="text-xs text-muted-foreground">To</div>
-                        <div class="font-medium truncate">{{ isReceiveMode ? htmUserMetadata?.displayName : receiverKey?.substring(0, 6) + '...' + receiverKey?.substring(receiverKey.length - 4) }}</div>
-                      </div>
-                    </div>
-
-                    <div class="flex items-center justify-between">
-                      <div class="text-sm text-muted-foreground">Remaining balance</div>
-                      <div class="font-medium">{{ sentSummary?.remainingBalance || remainingBalanceDisplay }}</div>
-                    </div>
-
-                    <div class="border-t pt-3">
-                      <Button size="sm" class="w-full" @click.prevent="generateInvoice">Generate Invoice</Button>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+        <!-- Transfer Details Card -->
+        <TransferDetailsCard
+          :is-receive-mode="isReceiveMode"
+          :has-nai-from-url="hasNaiFromUrl"
+          :should-show-token-selector="shouldShowTokenSelector"
+          :receiver-name="htmUserMetadata?.displayName || receiverDisplayName"
+          :receiver-key="receiverKey"
+          :receiver-avatar="htmUserMetadata?.profileImage"
+          :token-data="token"
+          :query-amount="queryAmount"
+          :query-memo="queryMemo"
+          :nai="nai"
+          :precision="precision"
+          :selected-token-nai="selectedTokenNai"
+          @update-selected-token-nai="selectedTokenNai = $event"
+          @update-amount="form.amount = $event"
+          @update-memo="form.memo = $event"
+        />
 
         <!-- QR Code Card (visible when NAI and precision are available) -->
         <QRCodeCard
@@ -734,5 +329,6 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
           :memo="form.memo"
         />
       </div>
-  </div></HTMView>
+    </div>
+  </HTMView>
 </template>
-- 
GitLab


From a4b796188a1c918c554dda0e038fb0460f5d61aa Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Wed, 12 Nov 2025 12:59:31 +0100
Subject: [PATCH 079/102] Adjust code to backend update supporting pagination
 and asset num

---
 eslint.config.mjs                             |   6 +-
 nuxt.config.ts                                |   2 +-
 src/components/HTMLoginContent.vue            |   4 +-
 src/components/HTMTokenPreview.vue            |   2 +-
 src/components/TokenAmountInput.vue           |   6 +-
 src/components/TokenSelectorWithAmount.vue    |  12 +-
 src/components/TransferCompletedSummary.vue   |   7 +-
 src/components/TransferDetailsCard.vue        |  30 +-
 .../wallets/metamask/MetamaskConnect.vue      |   2 +-
 src/components/tokens/QRCodeCard.vue          |   9 +-
 src/components/tokens/TokenSelector.vue       |  16 +-
 .../utilcards/ConfirmAccountUpdateCard.vue    |   2 +-
 src/components/wallet/AddToGoogleWallet.vue   |   2 +-
 src/pages/tokens/create.vue                   |   6 +-
 src/pages/tokens/edit.vue                     |  27 +-
 src/pages/tokens/invoice.vue                  |  28 +-
 src/pages/tokens/list.vue                     |   4 +-
 src/pages/tokens/my-balance.vue               |  11 +-
 src/pages/tokens/my-tokens.vue                |   8 +-
 src/pages/tokens/send-token.vue               |  59 ++--
 src/pages/tokens/token.vue                    |  68 ++--
 src/stores/tokens.store.ts                    |  49 +--
 src/stores/user.store.ts                      |   5 +-
 src/utils/nai-tokens.ts                       |   5 +-
 src/utils/transaction-status.ts               |   5 +-
 src/utils/wallet/ctokens/api/index.d.ts       | 308 ++++++++++++++++--
 src/utils/wallet/ctokens/api/index.js         |  24 +-
 src/utils/wallet/ctokens/signer.ts            |   4 +-
 src/vite-env.d.ts                             |   2 +-
 29 files changed, 502 insertions(+), 211 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index c68aefe..70fe752 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -108,16 +108,16 @@ export default withNuxt().override('nuxt/rules', {
       format: ['PascalCase']
     }, {
       selector: 'objectLiteralProperty',
-      format: ['camelCase', 'PascalCase', 'UPPER_CASE', 'snake_case'],
+      format: null,
       leadingUnderscore: 'allow',
       trailingUnderscore: 'allow'
     }, {
       selector: 'typeProperty',
-      format: ['camelCase', 'UPPER_CASE', 'snake_case'],
+      format: null,
       leadingUnderscore: 'allow'
     }, {
       selector: 'classProperty',
-      format: ['camelCase', 'UPPER_CASE', 'PascalCase']
+      format: null
     }]
   }
 });
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 83cdb3e..9860dbd 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -37,7 +37,7 @@ export default defineNuxtConfig({
   },
   modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', '@nuxt/eslint', '@pinia/nuxt'],
   alias: {
-    /* eslint-disable-next-line @typescript-eslint/naming-convention */
+
     '@': path.resolve(import.meta.dirname, './src')
   },
   eslint: {
diff --git a/src/components/HTMLoginContent.vue b/src/components/HTMLoginContent.vue
index afc80c2..90a3e32 100644
--- a/src/components/HTMLoginContent.vue
+++ b/src/components/HTMLoginContent.vue
@@ -39,8 +39,8 @@ const connect = async () => {
 
     const wax = await getWax();
 
-    const users = await wax.restApi.ctokensApi.registeredUsers({ user: operational });
-    if (users.length === 0) {
+    const users = await wax.restApi.ctokensApi.users({ user: operational });
+    if (!users?.management_key) {
       toastError('Failed to connect to HTM', 'The provided operational key is not registered in HTM');
 
       return;
diff --git a/src/components/HTMTokenPreview.vue b/src/components/HTMTokenPreview.vue
index 419892b..22d00ac 100644
--- a/src/components/HTMTokenPreview.vue
+++ b/src/components/HTMTokenPreview.vue
@@ -164,7 +164,7 @@ onMounted(async () => {
                 v-if="token.isNft"
                 class="inline-flex items-center rounded-md bg-purple-500/10 text-[12px]/[14px] px-1 font-medium text-purple-500 border border-purple-500/20"
               >
-                nft
+                NFT
               </span>
               <span
                 v-if="token.isStaked"
diff --git a/src/components/TokenAmountInput.vue b/src/components/TokenAmountInput.vue
index 9731fc9..08b0088 100644
--- a/src/components/TokenAmountInput.vue
+++ b/src/components/TokenAmountInput.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
   tokenName?: string;
   tokenSymbol?: string;
   tokenImage?: string;
-  tokenNai?: string;
+  tokenAssetNum?: string;
   precision?: number;
   disabled?: boolean;
   label?: string | null;
@@ -110,10 +110,10 @@ const avatarFallback = computed(() => displaySymbol.value.slice(0, 2).toUpperCas
 
     <!-- NAI info -->
     <p
-      v-if="tokenNai"
+      v-if="tokenAssetNum"
       class="text-xs text-muted-foreground font-mono"
     >
-      NAI: {{ tokenNai }}
+      Asset num: {{ tokenAssetNum }}
     </p>
 
     <!-- Validation error -->
diff --git a/src/components/TokenSelectorWithAmount.vue b/src/components/TokenSelectorWithAmount.vue
index b35b8cd..e0df92c 100644
--- a/src/components/TokenSelectorWithAmount.vue
+++ b/src/components/TokenSelectorWithAmount.vue
@@ -8,7 +8,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 
 interface Props {
   modelValue: string;
-  selectedTokenNai: string;
+  selectedTokenAssetNum: string;
   tokenSymbol?: string;
   tokenName: string;
   tokenPrecision?: string;
@@ -19,7 +19,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const emit = defineEmits(['update:modelValue', 'update:selectedTokenNai']);
+const emit = defineEmits(['update:modelValue', 'update:selectedTokenAssetNum']);
 
 const amount = computed({
   get: () => props.modelValue,
@@ -27,8 +27,8 @@ const amount = computed({
 });
 
 const selectedToken = computed({
-  get: () => props.selectedTokenNai,
-  set: (value: string | null) => emit('update:selectedTokenNai', value || '')
+  get: () => props.selectedTokenAssetNum,
+  set: (value: string | null) => emit('update:selectedTokenAssetNum', value || '')
 });
 
 const placeholder = computed(() => {
@@ -52,14 +52,14 @@ const placeholder = computed(() => {
               <Input
                 id="amount"
                 v-model="amount"
-                :disabled="!selectedTokenNai"
+                :disabled="!selectedTokenAssetNum"
                 type="text"
                 inputmode="decimal"
                 :placeholder="placeholder"
                 class="pr-12 rounded-r-none border-r-0"
               />
             </TooltipTrigger>
-            <TooltipContent v-if="!selectedTokenNai">
+            <TooltipContent v-if="!selectedTokenAssetNum">
               <p>Select token to send first.</p>
             </TooltipContent>
           </Tooltip>
diff --git a/src/components/TransferCompletedSummary.vue b/src/components/TransferCompletedSummary.vue
index 4bd9917..8ea9d6a 100644
--- a/src/components/TransferCompletedSummary.vue
+++ b/src/components/TransferCompletedSummary.vue
@@ -15,7 +15,7 @@ interface Props {
   receiverName?: string;
   remainingBalance?: string;
   timestamp?: string;
-  nai: string;
+  assetNum: string;
   precision: string;
   memo?: string;
 }
@@ -28,9 +28,8 @@ const generateInvoice = () => {
   const params = new URLSearchParams({
     fromPk: props.isReceiveMode ? CTokensProvider.getOperationalPublicKey() || '' : CTokensProvider.getOperationalPublicKey() || '',
     toPk: props.isReceiveMode ? props.receiverKey || '' : CTokensProvider.getOperationalPublicKey() || '',
-    amount: props.amount || '0',
-    nai: props.nai,
-    precision: props.precision
+    'asset-num': props.assetNum,
+    amount: props.amount
   });
 
   if (props.memo)
diff --git a/src/components/TransferDetailsCard.vue b/src/components/TransferDetailsCard.vue
index 881cca0..df6912c 100644
--- a/src/components/TransferDetailsCard.vue
+++ b/src/components/TransferDetailsCard.vue
@@ -31,15 +31,15 @@ interface Props {
   tokenData?: CtokensAppToken | null;
   queryAmount?: string;
   queryMemo?: string;
-  nai: string;
+  assetNum: string;
   precision: string;
-  selectedTokenNai?: string;
+  selectedTokenAssetNum?: string;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-  updateSelectedTokenNai: [value: string];
+  updateSelectedTokenAssetNum: [value: string];
   transferCompleted: [summary: { amount: string; tokenLabel: string; receiver: string; remainingBalance?: string; timestamp?: string }];
   updateAmount: [value: string];
   updateMemo: [value: string];
@@ -56,9 +56,9 @@ const form = ref({
   memo: props.queryMemo || ''
 });
 
-const selectedTokenNai = computed({
-  get: () => props.selectedTokenNai || '',
-  set: (value: string) => emit('updateSelectedTokenNai', value)
+const selectedTokenAssetNum = computed({
+  get: () => props.selectedTokenAssetNum || '',
+  set: (value: string) => emit('updateSelectedTokenAssetNum', value)
 });
 const showDetails = ref(false);
 const isUpdating = ref(false);
@@ -149,7 +149,7 @@ const isFormValid = computed(() => {
     if (form.value.amount.trim() === '') return true;
     return amountValidation.value.isValid;
   }
-  if (props.shouldShowTokenSelector && !selectedTokenNai.value) return false;
+  if (props.shouldShowTokenSelector && !selectedTokenAssetNum.value) return false;
   if (form.value.amount.trim() === '') return true;
   return amountValidation.value.isValid;
 });
@@ -225,8 +225,6 @@ const handleSend = async () => {
       'Transfer'
     );
 
-    toast.success('Token sent successfully!');
-
     transferCompleted.value = true;
 
     await tokensStore.loadBalances(true);
@@ -306,7 +304,7 @@ watch(() => form.value.memo, (newValue) => {
       <TokenSelectorWithAmount
         v-if="shouldShowTokenSelector"
         v-model="form.amount"
-        v-model:selected-token-nai="selectedTokenNai"
+        v-model:selected-token-asset-num="selectedTokenAssetNum"
         :token-symbol="tokenSymbol"
         :token-name="tokenName"
         :token-precision="props?.precision"
@@ -321,7 +319,7 @@ watch(() => form.value.memo, (newValue) => {
         class="flex items-center justify-between"
       >
         <div class="text-xs text-muted-foreground">
-          Token NAI / precision
+          Asset num / precision
         </div>
         <Button
           size="sm"
@@ -338,12 +336,12 @@ watch(() => form.value.memo, (newValue) => {
         class="grid grid-cols-2 gap-2"
       >
         <Input
-          id="nai"
+          id="asset-num"
           type="text"
-          placeholder="NAI"
+          placeholder="Asset number"
           class="transition-colors"
           disabled
-          :value="nai"
+          :value="assetNum"
         />
         <Input
           id="precision"
@@ -364,7 +362,7 @@ watch(() => form.value.memo, (newValue) => {
         :token-name="tokenName"
         :token-symbol="tokenSymbol"
         :token-image="tokenImage"
-        :token-nai="tokenData?.nai"
+        :token-asset-num="assetNum"
         :precision="tokenData?.precision"
         :is-valid="amountValidation.isValid"
         :validation-error="amountValidation.error"
@@ -401,7 +399,7 @@ watch(() => form.value.memo, (newValue) => {
           :receiver-name="receiverName"
           :remaining-balance="sentSummary?.remainingBalance"
           :timestamp="sentSummary?.timestamp"
-          :nai="nai"
+          :asset-num="assetNum"
           :precision="precision"
           :memo="form.memo"
         />
diff --git a/src/components/onboarding/wallets/metamask/MetamaskConnect.vue b/src/components/onboarding/wallets/metamask/MetamaskConnect.vue
index 365397c..52a33cc 100644
--- a/src/components/onboarding/wallets/metamask/MetamaskConnect.vue
+++ b/src/components/onboarding/wallets/metamask/MetamaskConnect.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { TRole } from '@hiveio/wax/vite';
+import { AccountAuthorityUpdateOperation } from '@hiveio/wax/vite';
 import { mdiClose } from '@mdi/js';
 import { Check, Search } from 'lucide-vue-next';
 import { ref } from 'vue';
@@ -84,7 +85,6 @@ const generateAccountUpdateTransaction = async (): Promise<string | undefined> =
     const wax = await getWax();
     const tx = await wax.createTransaction();
     const accountName = updateAccountNameOperation.value!.startsWith('@') ? updateAccountNameOperation.value!.slice(1) : updateAccountNameOperation.value!;
-    const { AccountAuthorityUpdateOperation } = await import('@hiveio/wax/vite');
     const op = await AccountAuthorityUpdateOperation.createFor(wax, accountName);
     for(const key in updateAuthType) {
       if (updateAuthType[key as TRole]) {
diff --git a/src/components/tokens/QRCodeCard.vue b/src/components/tokens/QRCodeCard.vue
index afb6154..d0bb9b1 100644
--- a/src/components/tokens/QRCodeCard.vue
+++ b/src/components/tokens/QRCodeCard.vue
@@ -7,8 +7,7 @@ import CTokensProvider from '@/utils/wallet/ctokens/signer';
 import { Card, CardContent } from '../ui/card';
 
 const props = defineProps<{
-  nai: string;
-  precision: string;
+  assetNum: number | string;
   amount?: string;
   memo?: string;
 }>();
@@ -22,8 +21,7 @@ const generateQRCode = async () => {
   try {
     const baseUrl = window.location.origin;
     const params = new URLSearchParams({
-      nai: props.nai,
-      precision: props.precision,
+      'asset-num': String(props.assetNum),
       to: userOperationalKey.value || ''
     });
 
@@ -45,6 +43,7 @@ const generateQRCode = async () => {
       }
     });
     qrCodeDataUrl.value = dataUrl;
+    console.log('Generated QR code for URL:', url);
   } catch (error) {
     console.error('Failed to generate QR code:', error);
     qrCodeDataUrl.value = '';
@@ -56,7 +55,7 @@ onMounted(() => {
   generateQRCode();
 });
 
-watch([() => props.nai, () => props.precision, () => props.amount, () => props.memo, userOperationalKey], () => {
+watch([() => props.assetNum, () => props.amount, () => props.memo, userOperationalKey], () => {
   generateQRCode();
 });
 </script>
diff --git a/src/components/tokens/TokenSelector.vue b/src/components/tokens/TokenSelector.vue
index 03dc284..22219f7 100644
--- a/src/components/tokens/TokenSelector.vue
+++ b/src/components/tokens/TokenSelector.vue
@@ -17,7 +17,7 @@ interface TokenOption {
 }
 
 interface Props {
-  modelValue?: string; // Selected NAI
+  modelValue?: string; // Selected token asset number
   placeholder?: string;
 }
 
@@ -88,15 +88,17 @@ const filteredTokens = computed((): TokenOption[] => {
     return ownedTokens.value;
 
   const query = searchQuery.value.toLowerCase();
-  return ownedTokens.value.filter(token =>
-    token.displayName.toLowerCase().includes(query) ||
-    token.balance.nai?.toLowerCase().includes(query)
+  return ownedTokens.value.filter(token => {
+    return token.displayName.toLowerCase().includes(query) ||
+        token.balance.metadata?.symbol?.toLowerCase().includes(query) ||
+        String(token.balance.asset_num).includes(query);
+  }
   );
 });
 
 // Selected token
 const selectedToken = computed(() => {
-  return ownedTokens.value.find(token => token.balance.nai === selectedValue.value);
+  return ownedTokens.value.find(token => String(token.balance.asset_num) === selectedValue.value);
 });
 
 // Token image URL
@@ -175,8 +177,8 @@ onMounted(async () => {
         <ComboboxGroup class="max-h-48 overflow-y-auto">
           <ComboboxItem
             v-for="token in filteredTokens"
-            :key="token.balance.nai"
-            :value="token.balance.nai!"
+            :key="String(token.balance.asset_num)"
+            :value="String(token.balance.asset_num)"
             class="cursor-pointer px-4 py-3 hover:bg-accent hover:text-accent-foreground transition-colors focus:bg-accent focus:text-accent-foreground"
           >
             <div class="flex w-full items-center justify-between gap-3">
diff --git a/src/components/utilcards/ConfirmAccountUpdateCard.vue b/src/components/utilcards/ConfirmAccountUpdateCard.vue
index 715c778..4396883 100644
--- a/src/components/utilcards/ConfirmAccountUpdateCard.vue
+++ b/src/components/utilcards/ConfirmAccountUpdateCard.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { AccountAuthorityUpdateOperation } from '@hiveio/wax/vite';
 import { mdiAccountArrowUpOutline } from '@mdi/js';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -49,7 +50,6 @@ const updateAuthority = async () => {
 
     const wax = await getWax();
     const tx = await wax.createTransaction();
-    const { AccountAuthorityUpdateOperation } = await import('@hiveio/wax/vite');
     const op = await AccountAuthorityUpdateOperation.createFor(wax, creator.value.startsWith('@') ? creator.value.slice(1) : creator.value);
     if (memoKey.value)
       op.role('memo').set(memoKey.value);
diff --git a/src/components/wallet/AddToGoogleWallet.vue b/src/components/wallet/AddToGoogleWallet.vue
index a77b6fc..02808bf 100644
--- a/src/components/wallet/AddToGoogleWallet.vue
+++ b/src/components/wallet/AddToGoogleWallet.vue
@@ -16,7 +16,7 @@ const addToGoogleWallet = async () => {
     const baseUrl = window.location.origin;
     const res = await fetch('/api/google-wallet', {
       method: 'POST',
-      // eslint-disable-next-line @typescript-eslint/naming-convention
+
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ operationalPublicKey, baseUrl })
     });
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index 2874d7d..db4f79f 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -27,7 +27,7 @@ import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
-import { generateNAI as generateHTMNAI, toVesting } from '@/utils/nai-tokens';
+import { generateNAI as generateHTMNAI, toVesting, assetNumFromNAI } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
@@ -277,7 +277,9 @@ const createToken = async () => {
       'Token creation'
     );
 
-    const redirectUrl = `/tokens/token?nai=${generatedNAI.value}&precision=${precision.value}`;
+    const assetNum = assetNumFromNAI(generatedNAI.value, identifierPrecision);
+
+    const redirectUrl = `/tokens/token?asset-num=${assetNum}`;
 
     resetForm();
 
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index e4ddf1b..6e5820b 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -46,8 +46,7 @@ const form = ref({
 });
 
 // Get NAI and precision from route parameters
-const nai = computed(() => route.query.nai as string);
-const precision = computed(() => route.query.precision);
+const assetNum = computed(() => route.query['asset-num'] as string);
 
 // Check if user is logged in
 const isLoggedIn = computed(() => !!settingsStore.settings.account);
@@ -96,18 +95,19 @@ const loadTokenDetails = async () => {
     const wax = await getWax();
 
     // Fetch token details by NAI
-    const tokens = await wax.restApi.ctokensApi.registeredTokens({
-      nai: nai.value,
-      precision: Number(precision.value!)
+    const tokens = await wax.restApi.ctokensApi.tokens({
+      'asset-num': Number(assetNum.value)
     });
 
-    if (!tokens || tokens.length === 0)
-      throw new Error(`Token with NAI ${nai.value} not found`);
+    const remoteToken = tokens.items && tokens.items.length > 0 ? tokens.items[0] : null;
 
-    token.value = tokens[0]!.liquid?.nai === nai.value ? tokens[0]!.liquid! : tokens[0]?.vesting?.nai === nai.value ? tokens[0]!.vesting! : null;
+    if (!remoteToken)
+      throw new Error(`Token with asset num ${assetNum.value} not found`);
+
+    token.value = String(remoteToken!.liquid?.asset_num) === assetNum.value ? remoteToken!.liquid! : String(remoteToken?.vesting?.asset_num) === assetNum.value ? remoteToken!.vesting! : null;
 
     if (!token.value)
-      throw new Error(`Token with NAI ${nai.value} not found`);
+      throw new Error(`Token with asset num ${assetNum.value} not found`);
 
     // Populate form with existing metadata
     const metadata = token.value.metadata as {
@@ -171,13 +171,12 @@ const handleUpdateToken = async () => {
     );
 
     // Refresh token data after update
-    await tokensStore.loadRegisteredTokens(token.value!.nai, token.value!.precision, 1, true);
+    await tokensStore.loadRegisteredTokens(assetNum.value, 1, true);
 
     router.push({
       path: '/tokens/token',
       query: {
-        nai: token.value!.nai,
-        precision: token.value!.precision
+        'asset-num': token.value!.asset_num
       }
     });
   } catch (error) {
@@ -191,7 +190,7 @@ const handleUpdateToken = async () => {
 const goBack = () => {
   router.push({
     path: '/tokens/token',
-    query: { nai: nai.value, precision: precision.value }
+    query: { 'asset-num': assetNum.value }
   });
 };
 
@@ -212,7 +211,7 @@ onMounted(async () => {
     toast.error('You do not have permission to edit this token');
     router.push({
       path: '/tokens/token',
-      query: { nai: nai.value, precision: precision.value }
+      query: { 'asset-num': assetNum.value }
     });
   }
 });
diff --git a/src/pages/tokens/invoice.vue b/src/pages/tokens/invoice.vue
index e614871..b09e04c 100644
--- a/src/pages/tokens/invoice.vue
+++ b/src/pages/tokens/invoice.vue
@@ -26,8 +26,7 @@ const fromPk = computed(() => route.query.fromPk as string);
 const toName = computed(() => route.query.toName as string | undefined);
 const toPk = computed(() => route.query.toPk as string);
 const amount = computed(() => route.query.amount as string);
-const nai = computed(() => route.query.nai as string);
-const precision = computed(() => route.query.precision as string);
+const assetNum = computed(() => route.query['asset-num'] as string);
 const memo = computed(() => route.query.memo as string | undefined);
 
 // Invoice metadata
@@ -60,12 +59,12 @@ const formattedAmount = computed(() => {
 
 // Mock download functions
 const downloadAsPDF = () => {
-  toast.success('PDF download functionality - coming soon!');
+  toast.warning('PDF download functionality - coming soon!');
   // TODO: Implement actual PDF generation
 };
 
 const downloadAsImage = () => {
-  toast.success('Image download functionality - coming soon!');
+  toast.warning('Image download functionality - coming soon!');
   // TODO: Implement actual image generation
 };
 
@@ -79,19 +78,20 @@ const loadTokenDetails = async () => {
   try {
     const wax = await getWax();
 
-    // Fetch token details by NAI
-    const tokens = await wax.restApi.ctokensApi.registeredTokens({
-      nai: nai.value,
-      precision: Number(precision.value!)
+    // Fetch token details by asset number
+    const tokens = await wax.restApi.ctokensApi.tokens({
+      'asset-num': Number(assetNum.value)
     });
 
-    if (!tokens || tokens.length === 0)
-      throw new Error(`Token with NAI ${nai.value} not found`);
+    const remoteToken = tokens.items && tokens.items.length > 0 ? tokens.items[0] : null;
 
-    token.value = tokens[0]!.liquid?.nai === nai.value ? tokens[0]!.liquid! : tokens[0]?.vesting?.nai === nai.value ? tokens[0]!.vesting! : null;
+    if (!remoteToken)
+      throw new Error(`Token with asset number ${assetNum.value} not found`);
+
+    token.value = String(remoteToken.liquid?.asset_num) === assetNum.value ? remoteToken.liquid! : String(remoteToken.vesting?.asset_num) === assetNum.value ? remoteToken.vesting! : null;
 
     if (!token.value)
-      throw new Error(`Token with NAI ${nai.value} not found`);
+      throw new Error(`Token with asset number ${assetNum.value} not found`);
   } catch (error) {
     toastError('Failed to load token details', error);
     router.push('/tokens/list');
@@ -101,7 +101,7 @@ const loadTokenDetails = async () => {
 // Initialize
 onMounted(async () => {
   // Validate required params
-  if (!fromPk.value || !toPk.value || !amount.value || !nai.value || !precision.value) {
+  if (!fromPk.value || !toPk.value || !amount.value || !assetNum.value) {
     toast.error('Missing required invoice parameters');
     router.push('/tokens/list');
     return;
@@ -234,7 +234,7 @@ onMounted(async () => {
                         v-if="!fromName || !toName"
                         class="text-muted-foreground/70"
                       >
-                        ({{ nai }})
+                        ({{ assetNum }})
                       </span>
                     </div>
                   </div>
diff --git a/src/pages/tokens/list.vue b/src/pages/tokens/list.vue
index a2fffe9..f80349a 100644
--- a/src/pages/tokens/list.vue
+++ b/src/pages/tokens/list.vue
@@ -25,12 +25,12 @@ const hasMorePages = ref(true);
 
 // Navigate to token detail page (placeholder for now)
 const viewTokenDetails = (token: CTokenDisplay) => {
-  router.push(`/tokens/token?nai=${token.nai}&precision=${token.precision}`);
+  router.push(`/tokens/token?asset-num=${token.assetNum}`);
 };
 
 const loadTokens = async (page: number = 1) => {
   try {
-    const result = await tokensStore.loadRegisteredTokens(undefined, undefined, page);
+    const result = await tokensStore.loadRegisteredTokens(undefined, page);
 
     if (result) {
       hasMorePages.value = result.hasMore;
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 945ce34..ee1a1c3 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -438,15 +438,15 @@ const loadAccountStatistics = async () => {
     const wax = await getWax();
 
     // Get all tokens created by this user (owner field matches operational key)
-    const createdTokens = await wax.restApi.ctokensApi.registeredTokens({ owner: operationalKey });
-    createdTokensCount.value = createdTokens.length;
+    const createdTokens = await wax.restApi.ctokensApi.tokens({ owner: operationalKey });
+    createdTokensCount.value = createdTokens.items?.length || 0;
 
     // Get owned tokens (tokens with balance)
     const balances = await wax.restApi.ctokensApi.balances({ user: operationalKey });
     const uniqueBalanceKeys = new Set<string>();
     const stakedTokenKeys = new Set<string>();
 
-    balances.forEach(({ liquid, vesting }) => {
+    balances.items!.forEach(({ liquid, vesting }) => {
       if (liquid)
         uniqueBalanceKeys.add(`${liquid.nai}:${liquid.precision}`);
       if (vesting)
@@ -456,7 +456,7 @@ const loadAccountStatistics = async () => {
     ownedTokensCount.value = uniqueBalanceKeys.size;
 
     // Get NFT collections (created NFT tokens)
-    const nftTokens = createdTokens.filter(token => token.liquid?.is_nft);
+    const nftTokens = createdTokens.items!.filter(token => token.liquid?.is_nft);
     nftCollectionsCount.value = nftTokens.length;
 
     // Get staked tokens (tokens with vesting bit set)
@@ -601,8 +601,7 @@ const navigateToToken = (balance: AggregatedBalance) => {
   router.push({
     path: '/tokens/token',
     query: {
-      nai: balance.nai,
-      precision: balance.precision.toString()
+      'asset-num': balance.liquid?.asset_num || balance.vesting?.asset_num || ''
     }
   });
 };
diff --git a/src/pages/tokens/my-tokens.vue b/src/pages/tokens/my-tokens.vue
index 5bd6931..d77f582 100644
--- a/src/pages/tokens/my-tokens.vue
+++ b/src/pages/tokens/my-tokens.vue
@@ -28,7 +28,7 @@ const hasMorePages = ref(true);
 
 // Navigate to token detail page
 const viewTokenDetails = (token: CTokenDisplay) => {
-  router.push(`/tokens/token?nai=${token.nai}&precision=${token.precision}`);
+  router.push(`/tokens/token?asset-num=${token.assetNum}`);
 };
 
 // Load tokens filtered by user's public key
@@ -43,19 +43,19 @@ const loadTokens = async (page: number = 1) => {
     }
 
     const wax = await getWax();
-    const tokens = await wax.restApi.ctokensApi.registeredTokens({ owner: userPublicKey });
+    const tokens = await wax.restApi.ctokensApi.tokens({ owner: userPublicKey });
 
     if (page === 1)
       tokensFullList.value = [];
 
-    tokensFullList.value.push(...tokens.flatMap(token => {
+    tokensFullList.value.push(...tokens.items!.flatMap(token => {
       return [
         transformTokenToDisplayFormat(wax, token.liquid as Required<CtokensAppToken>),
         transformTokenToDisplayFormat(wax, token.vesting as Required<CtokensAppToken>)
       ];
     }));
 
-    hasMorePages.value = tokens.length === 100; // API returns 100 results per page
+    hasMorePages.value = tokens.items!.length === 100; // API returns 100 results per page
     currentPage.value = page;
   } catch (error) {
     toastError('Failed to load tokens', error);
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index 69fb268..c7dda5b 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -40,12 +40,12 @@ const form = ref({
 });
 
 // Selected token NAI from TokenSelector (used when only 'to' is provided)
-const selectedTokenNai = ref<string>('');
+const selectedTokenAssetNum = ref<string>('');
 
 // Get NAI and precision from route parameters or form or selected token
-const nai = computed(() => {
-  if (route.query.nai) return route.query.nai as string;
-  if (selectedTokenNai.value) return selectedTokenNai.value;
+const assetNum = computed(() => {
+  if (route.query['asset-num']) return route.query['asset-num'] as string;
+  if (selectedTokenAssetNum.value) return selectedTokenAssetNum.value;
   return form.value.nai;
 });
 const precision = computed(() => route.query.precision as string || form.value.precision);
@@ -107,14 +107,14 @@ const receiverDisplayName = computed(() => {
 });
 
 // Watch selected token NAI changes to load token details
-watch(selectedTokenNai, async (newNai, oldNai) => {
-  if (newNai && newNai !== oldNai && shouldShowTokenSelector.value) {
+watch(selectedTokenAssetNum, async (newAssetNum, oldAssetNum) => {
+  if (newAssetNum && newAssetNum !== oldAssetNum && shouldShowTokenSelector.value) {
     isLoading.value = true;
     // Get precision from the selected token's balance
-    const balance = tokensStore.balances.find(b => b.nai === newNai);
+    const balance = tokensStore.balances.find(b => String(b.asset_num) === newAssetNum);
     if (balance) {
       form.value.precision = balance.precision?.toString() || '';
-      form.value.nai = newNai;
+      form.value.nai = balance.nai!;
       await loadTokenDetails();
     } else
       token.value = null;
@@ -125,23 +125,24 @@ watch(selectedTokenNai, async (newNai, oldNai) => {
 
 // Load token details
 const loadTokenDetails = async () => {
-  if (!nai.value) return;
+  if (!assetNum.value) return;
 
   try {
     const wax = await getWax();
 
     // Fetch token details by NAI
-    const params: { nai: string; precision?: number } = { nai: nai.value };
-    if (precision.value) params.precision = Number(precision.value);
-    const tokens = await wax.restApi.ctokensApi.registeredTokens(params);
+    const params: { 'asset-num': number; precision?: number } = { 'asset-num': Number(assetNum.value) };
+    const tokens = await wax.restApi.ctokensApi.tokens(params);
 
-    if (!tokens || tokens.length === 0)
-      throw new Error(`Token with NAI ${nai.value} not found`);
+    const remoteToken = tokens && tokens.items && tokens.items.length > 0 ? tokens.items[0] : null;
 
-    token.value = tokens[0]!.liquid?.nai === nai.value ? tokens[0]!.liquid! : tokens[0]?.vesting?.nai === nai.value ? tokens[0]!.vesting! : null;
+    if (!remoteToken)
+      throw new Error(`Token with asset number ${assetNum.value} not found`);
+
+    token.value = String(remoteToken.liquid?.asset_num) === assetNum.value ? remoteToken.liquid! : String(remoteToken.vesting?.asset_num) === assetNum.value ? remoteToken.vesting! : null;
 
     if (!token.value)
-      throw new Error(`Token with NAI ${nai.value} not found`);
+      throw new Error(`Token with asset number ${assetNum.value} not found`);
 
     // Update precision if not set from balance
     if (token.value && !form.value.precision)
@@ -156,7 +157,7 @@ const loadTokenDetails = async () => {
 const goBack = () => {
   router.push({
     path: '/tokens/token',
-    query: { nai: nai.value, precision: precision.value }
+    query: { 'asset-num': assetNum.value }
   });
 };
 
@@ -180,6 +181,7 @@ onMounted(async () => {
 
   // Initialize form with query params
   form.value.nai = route.query.nai as string || '';
+  selectedTokenAssetNum.value = route.query['asset-num'] as string || '';
   form.value.precision = route.query.precision as string || '';
 
   // Initialize form with query params if in receive mode
@@ -188,8 +190,8 @@ onMounted(async () => {
     form.value.memo = queryMemo.value || '';
   }
 
-  // Load token details if NAI and precision are available
-  if (nai.value && precision.value)
+  // Load token details if asset number and precision are available
+  if (assetNum.value)
     await loadTokenDetails();
 
   isLoading.value = false;
@@ -209,7 +211,7 @@ watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
     await fetchHTMUserData();
 
     // If nai/precision available, load token details
-    if (nai.value && precision.value)
+    if (assetNum.value && precision.value)
       await loadTokenDetails();
   } catch (e) {
     // swallow - errors are handled inside the helpers (toastError)
@@ -230,7 +232,7 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
     await tokensStore.loadBalances();
     await fetchHTMUserData();
 
-    if (nai.value && precision.value)
+    if (assetNum.value && precision.value)
       await loadTokenDetails();
   } catch (e) {
     console.error('Error reloading data after tokensStore.wallet changed', e);
@@ -246,7 +248,7 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
       <!-- Header -->
       <div class="flex items-center justify-between gap-4">
         <Button
-          v-if="hasNaiFromUrl || selectedTokenNai"
+          v-if="hasNaiFromUrl || selectedTokenAssetNum"
           variant="ghost"
           size="sm"
           class="gap-2 hover:bg-accent"
@@ -312,19 +314,18 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
           :token-data="token"
           :query-amount="queryAmount"
           :query-memo="queryMemo"
-          :nai="nai"
+          :asset-num="assetNum"
           :precision="precision"
-          :selected-token-nai="selectedTokenNai"
-          @update-selected-token-nai="selectedTokenNai = $event"
+          :selected-token-asset-num="selectedTokenAssetNum"
+          @update-selected-token-asset-num="selectedTokenAssetNum = $event"
           @update-amount="form.amount = $event"
           @update-memo="form.memo = $event"
         />
 
-        <!-- QR Code Card (visible when NAI and precision are available) -->
+        <!-- QR Code Card (visible when asset number is available) -->
         <QRCodeCard
-          v-if="nai && precision && !isReceiveMode"
-          :nai="nai"
-          :precision="precision"
+          v-if="assetNum && !isReceiveMode"
+          :asset-num="assetNum"
           :amount="form.amount"
           :memo="form.memo"
         />
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 691aeca..e10397c 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -12,15 +12,17 @@ import { AlertDescription, Alert } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button as CopyButton } from '@/components/ui/copybutton';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
-import { isVesting } from '@/utils/nai-tokens';
+import { isVesting, toLiquid, toVesting } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppToken, CtokensAppBalance, CtokensAppTopHolder } from '@/utils/wallet/ctokens/api';
@@ -63,8 +65,7 @@ const stakeForm = ref({
 });
 
 // Get NAI from route parameter
-const nai = computed(() => route.query.nai as string);
-const precision = computed(() => route.query.precision);
+const assetNum = computed(() => route.query['asset-num'] as string);
 
 // Check if user is logged in
 const isLoggedIn = computed(() => !!tokensStore.wallet);
@@ -211,15 +212,17 @@ const loadTokenDetails = async () => {
 
     // Fetch token details by NAI
     // First try with just NAI, if that doesn't work, get all tokens and filter
-    const tokens = await wax.restApi.ctokensApi.registeredTokens({ nai: nai.value, precision: Number(precision.value!) });
+    const tokens = await wax.restApi.ctokensApi.tokens({ 'asset-num': Number(assetNum.value) });
 
-    if (!tokens || tokens.length === 0)
-      throw new Error(`Token with NAI ${nai.value} not found`);
+    const remoteToken = tokens.items && tokens.items.length > 0 ? tokens.items[0] : null;
 
-    token.value = tokens[0]!.liquid?.nai === nai.value ? tokens[0]!.liquid! : tokens[0]?.vesting?.nai === nai.value ? tokens[0]!.vesting! : null;
+    if (!remoteToken)
+      throw new Error(`Token with asset num ${assetNum.value} not found`);
+
+    token.value = String(remoteToken.liquid?.asset_num) === assetNum.value ? remoteToken.liquid! : String(remoteToken?.vesting?.asset_num) === assetNum.value ? remoteToken.vesting! : null;
 
     if (!token.value)
-      throw new Error(`Token with NAI ${nai.value} not found`);
+      throw new Error(`Token with asset num ${assetNum.value} not found`);
 
     isStaked.value = isVesting(token.value.nai!, token.value.precision || 0);
 
@@ -232,7 +235,7 @@ const loadTokenDetails = async () => {
       try {
         // Get user balances from the store
         await tokensStore.loadBalances();
-        userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
+        userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => String(b.asset_num) === assetNum.value) || null;
         if (userBalance.value)
           await updateFormattedValues();
 
@@ -253,8 +256,7 @@ const loadTopHolders = async () => {
   try {
     isLoadingHolders.value = true;
     topHolders.value = await tokensStore.getTopHolders(
-      token.value.nai!,
-      token.value.precision || 0
+      assetNum.value
     );
   } catch (error) {
     console.warn('Failed to load top holders:', error);
@@ -405,7 +407,7 @@ const handleTransfer = async () => {
       loadTokenDetails(),
       loadTopHolders()
     ]);
-    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
+    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => String(b.asset_num) === assetNum.value) || null;
   } catch (error) {
     toastError('Transfer failed', error);
   } finally {
@@ -455,6 +457,11 @@ const handleStake = async () => {
     // Convert decimal amount to base units (add precision zeros)
     const baseAmount = parseAssetAmount(stakeForm.value.amount, token.value.precision || 0);
 
+    let nai = token.value!.nai!;
+    const isVestingNai = isVesting(token.value.nai!, token.value.precision || 0);
+    if (isVestingNai)
+      nai = toLiquid(token.value.nai!, token.value.precision || 0);
+
     // Wait for transaction status
     await waitForTransactionStatus(
       () => ([{
@@ -463,7 +470,7 @@ const handleStake = async () => {
           receiver: stakeForm.value.receiver || undefined,
           amount: {
             amount: baseAmount,
-            nai: token.value!.nai!,
+            nai,
             precision: token.value!.precision || 0
           }
         }
@@ -483,7 +490,7 @@ const handleStake = async () => {
       loadTokenDetails(),
       loadTopHolders()
     ]);
-    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
+    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => String(b.asset_num) === assetNum.value) || null;
   } catch (error) {
     toastError('Staking failed', error);
   } finally {
@@ -533,6 +540,11 @@ const handleUnstake = async () => {
     // Convert decimal amount to base units (add precision zeros)
     const baseAmount = parseAssetAmount(stakeForm.value.amount, token.value.precision || 0);
 
+    let nai = token.value!.nai!;
+    const isVestingNai = isVesting(token.value.nai!, token.value.precision || 0);
+    if (!isVestingNai)
+      nai = toVesting(token.value.nai!, token.value.precision || 0);
+
     // Wait for transaction status
     await waitForTransactionStatus(
       () => ([{
@@ -541,7 +553,7 @@ const handleUnstake = async () => {
           receiver: stakeForm.value.receiver || undefined,
           amount: {
             amount: baseAmount,
-            nai: token.value!.nai!,
+            nai,
             precision: token.value!.precision || 0
           }
         }
@@ -561,7 +573,7 @@ const handleUnstake = async () => {
       loadTokenDetails(),
       loadTopHolders()
     ]);
-    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === nai.value) || null;
+    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => String(b.asset_num) === assetNum.value) || null;
   } catch (error) {
     toastError('Unstaking failed', error);
   } finally {
@@ -578,14 +590,14 @@ const goBack = () => {
 const editToken = () => {
   router.push({
     path: '/tokens/edit',
-    query: { nai: token.value?.nai, precision: token.value?.precision }
+    query: { 'asset-num': assetNum.value }
   });
 };
 
 const showQRCode = () => {
   router.push({
     path: '/tokens/send-token',
-    query: { nai: token.value?.nai, precision: token.value?.precision }
+    query: { 'asset-num': assetNum.value }
   });
 };
 
@@ -787,7 +799,7 @@ onMounted(async () => {
                     v-if="token.is_nft"
                     class="inline-flex items-center rounded-md bg-purple-500/10 text-[16px]/[18px] px-2 font-medium text-purple-500 border border-purple-500/20"
                   >
-                    nft
+                    NFT
                   </span>
                   <span
                     v-if="isStaked"
@@ -1419,9 +1431,21 @@ onMounted(async () => {
                   </div>
 
                   <div class="flex-1 min-w-0">
-                    <p class="font-semibold text-foreground truncate">
-                      {{ holder.user }}
-                    </p>
+                    <div class="flex flex-col sm:flex-row sm:items-center gap-1">
+                      <p class="font-semibold text-foreground truncate">
+                        {{ holder.metadata?.name || holder.user }}
+                      </p>
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <CopyButton :value="holder.user" />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Copy holder address</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    </div>
                     <p class="text-sm text-muted-foreground">
                       Rank #{{ holder.rank }}
                     </p>
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index dab01e6..2a3401a 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -1,4 +1,5 @@
 import type { IWaxBaseInterface } from '@hiveio/wax/vite';
+import { HtmTransaction } from '@mtyszczak-cargo/htm';
 import { defineStore } from 'pinia';
 import { shallowRef } from 'vue';
 
@@ -7,15 +8,17 @@ import { isVesting } from '@/utils/nai-tokens';
 import type {
   CtokensAppBalance,
   CtokensAppToken,
-  CtokensAppBalanceHistory,
   CtokensAppTopHolder
 } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+import { useSettingsStore } from './settings.store';
 import { transformUserName } from './user.store';
+import { useWalletStore } from './wallet.store';
 
 export interface CTokenDisplay {
   nai: string;
+  assetNum: number;
   isStaked: boolean;
   ownerPublicKey: string;
   precision: number;
@@ -48,6 +51,7 @@ export const transformTokenToDisplayFormat = (wax: IWaxBaseInterface, token: Req
 
   return {
     nai: token.nai,
+    assetNum: Number(token.asset_num),
     isStaked: isVesting(token.nai, token.precision),
     displayMaxSupply: formatAsset(wax, token.max_supply, token.precision, symbol || name),
     ownerPublicKey: token.owner,
@@ -119,11 +123,13 @@ export const useTokensStore = defineStore('tokens', {
       try {
         const wax = await getWax();
 
+        // TODO: Implement NFT filtering
+
         // Get balances from ctokens-api
         const cTokenBalances = await wax.restApi.ctokensApi.balances({ user: operationalKey, page: 1 });
 
         // Filter out null values when flattening
-        this.balances = cTokenBalances.flatMap(balance => {
+        this.balances = cTokenBalances.items!.flatMap(balance => {
           const result: CtokensAppBalance[] = [];
           if (balance.liquid) result.push(balance.liquid);
           if (balance.vesting) result.push(balance.vesting);
@@ -147,10 +153,10 @@ export const useTokensStore = defineStore('tokens', {
         const wax = await getWax();
 
         // Get registered tokens from ctokens-api
-        const tokens = await wax.restApi.ctokensApi.registeredTokens({ owner: creator });
+        const tokens = await wax.restApi.ctokensApi.tokens({ owner: creator });
 
         // Filter by creator if provided
-        this.tokenDefinitions = tokens.flatMap(token => {
+        this.tokenDefinitions = tokens.items!.flatMap(token => {
           const result: CtokensAppBalance[] = [];
           if (token.liquid) result.push(token.liquid);
           if (token.vesting) result.push(token.vesting);
@@ -170,9 +176,9 @@ export const useTokensStore = defineStore('tokens', {
       if (this.wallet?.publicKey === undefined)
         throw new Error('Could not load CTokens wallet');
 
-      const [ user ] = await wax.restApi.ctokensApi.registeredUsers({ user: this.wallet.publicKey });
+      const user = await wax.restApi.ctokensApi.users({ user: this.wallet.publicKey });
 
-      if (!user)
+      if (!user?.management_key)
         throw new Error('CTokens user not found');
 
       /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -189,7 +195,7 @@ export const useTokensStore = defineStore('tokens', {
     /**
      * Load registered tokens with pre-formatted display data
      */
-    async loadRegisteredTokens (nai?: string, precision?: number, page = 1, forceRefresh = false) {
+    async loadRegisteredTokens (assetNum?: string | number, page = 1, forceRefresh = false) {
       if (this.isLoadingRegisteredTokens && !forceRefresh) return;
 
       this.isLoadingRegisteredTokens = true;
@@ -198,10 +204,10 @@ export const useTokensStore = defineStore('tokens', {
       try {
         const wax = await getWax();
         // Get raw tokens from API
-        const tokens = await wax.restApi.ctokensApi.registeredTokens({ nai, precision });
+        const tokens = await wax.restApi.ctokensApi.tokens(assetNum ? { 'asset-num': Number(assetNum) } : {});
 
         // Transform tokens to display format
-        const transformedTokens = tokens.flatMap(token => ([
+        const transformedTokens = tokens.items!.flatMap(token => ([
           transformTokenToDisplayFormat(wax, token.liquid as Required<CtokensAppToken>),
           transformTokenToDisplayFormat(wax, token.vesting as Required<CtokensAppToken>)
         ]));
@@ -212,9 +218,11 @@ export const useTokensStore = defineStore('tokens', {
         else
           this.registeredTokens.push(...transformedTokens);
 
+        // TODO: Implement proper pagination handling
+
         return {
           tokens: transformedTokens,
-          hasMore: tokens.length === 100 // API returns 100 results per page
+          hasMore: tokens.items!.length === 100 // API returns 100 results per page
         };
       } catch (error) {
         console.error('Failed to load registered tokens:', error);
@@ -238,17 +246,11 @@ export const useTokensStore = defineStore('tokens', {
         token.nai === nai && (precision === undefined || token.precision === precision)
       );
     },
-    async getBalanceHistory (nai: string, precision: number, page = 1): Promise<CtokensAppBalanceHistory[]> {
-      const operationalKey = CTokensProvider.getOperationalPublicKey();
-      if (!operationalKey)
-        throw new Error('No operational key available');
-
-      const wax = await getWax();
-      return wax.restApi.ctokensApi.balanceHistory({ user: operationalKey, nai, precision, page });
-    },
-    async getTopHolders (nai: string, precision: number, page = 1): Promise<CtokensAppTopHolder[]> {
+    async getTopHolders (assetNum: number | string, page = 1): Promise<CtokensAppTopHolder[]> {
       const wax = await getWax();
-      return wax.restApi.ctokensApi.topHolders({ nai, precision, page });
+      const response = await wax.restApi.ctokensApi.topHolders({ 'asset-num': Number(assetNum), page });
+
+      return response.items || [];
     },
     getTokenByNAI (nai: string): CtokensAppBalance | undefined {
       return this.balances.find(balance => balance.nai === nai);
@@ -260,7 +262,7 @@ export const useTokensStore = defineStore('tokens', {
       await Promise.all([
         this.loadBalances(true),
         this.loadTokenDefinitions(undefined, true),
-        this.loadRegisteredTokens(undefined, undefined, 1, true)
+        this.loadRegisteredTokens(undefined, 1, true)
       ]);
     },
     clearError () {
@@ -276,21 +278,20 @@ export const useTokensStore = defineStore('tokens', {
         throw new Error('No operational key available');
 
       // Get operational account from settings
-      const settingsStore = await import('@/stores/settings.store').then(m => m.useSettingsStore());
+      const settingsStore = useSettingsStore();
       const operationalAccount = settingsStore.settings.account;
 
       if (!operationalAccount)
         throw new Error('No operational account configured');
 
       // Get L1 wallet for signing the transaction
-      const walletStore = await import('@/stores/wallet.store').then(m => m.useWalletStore());
+      const walletStore = useWalletStore();
       await walletStore.createWalletFor(settingsStore.settings, 'posting');
 
       if (!walletStore.wallet)
         throw new Error('No L1 wallet available');
 
       const wax = await getWax();
-      const { HtmTransaction } = await import('@mtyszczak-cargo/htm');
 
       // Create CTokensProvider instance for L2 signing (owner role for metadata updates)
       const l2Wallet = await CTokensProvider.for(wax, 'owner');
diff --git a/src/stores/user.store.ts b/src/stores/user.store.ts
index ae9dd01..84ee94d 100644
--- a/src/stores/user.store.ts
+++ b/src/stores/user.store.ts
@@ -173,12 +173,11 @@ export const useUserStore = defineStore('user', {
     async parseCTokenData (accountName: string) {
       const wax = await getWax();
 
-      const [ user ] = await wax.restApi.ctokensApi.registeredUsers({ user: accountName });
+      const user = await wax.restApi.ctokensApi.users({ user: accountName });
 
-      if (!user)
+      if (!user?.management_key)
         throw new Error('CTokens user not found');
 
-
       const hivePrice = await this.getHivePrice();
 
       /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index c6dd9ee..7fdb011 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -36,7 +36,7 @@ const dammDigit = (str: string) => {
   return row.toString();
 };
 
-const assetNumFromNAI = (nai: string, precision: number): bigint => {
+export const assetNumFromNAI = (nai: string, precision: number): bigint => {
   return (BigInt(Number.parseInt(nai.slice(2, -1))) << 5n) | 0x10n | BigInt(precision);
 };
 
@@ -69,6 +69,9 @@ export const toVesting = (nai: string, precision: number): string => {
   return `@@${naiVesting}${dammDigit(naiVesting)}`;
 };
 
+/// @alias toVesting
+export const toLiquid = (nai: string, precision: number): string => toVesting(nai, precision);
+
 /**
  * Generate a unique NAI identifier for a token (liquid, not vesting)
  */
diff --git a/src/utils/transaction-status.ts b/src/utils/transaction-status.ts
index 24f223f..601a072 100644
--- a/src/utils/transaction-status.ts
+++ b/src/utils/transaction-status.ts
@@ -6,7 +6,6 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
-import { toastError } from '@/utils/parse-error';
 
 /**
  * Poll transaction status until it's confirmed or failed
@@ -25,7 +24,7 @@ export async function pollTransactionStatus (
   for (let attempt = 0; attempt < maxAttempts; attempt++) {
     try {
       // Call status endpoint
-      /* eslint-disable-next-line @typescript-eslint/naming-convention */
+
       const status = await wax.restApi.ctokensApi.status({ 'ref-id': refId });
 
       // Check if we got a successful response
@@ -160,7 +159,7 @@ export const waitForTransactionStatus = async (
         description: result.message
       });
     } else
-      toastError(`${operationName} failed`, new Error(result.details || result.message));
+      throw new Error(result.details || result.message);
   } catch (error: unknown) {
     if (enableToasts)
       toast.dismiss(loadingToast);
diff --git a/src/utils/wallet/ctokens/api/index.d.ts b/src/utils/wallet/ctokens/api/index.d.ts
index f1907dc..5c48771 100644
--- a/src/utils/wallet/ctokens/api/index.d.ts
+++ b/src/utils/wallet/ctokens/api/index.d.ts
@@ -1,5 +1,7 @@
 type TEmptyReq = {}
 export interface CtokensAppBalance {
+  /** unique identifier for the token */
+  asset_num?: number;
   /** balance type (currency) */
   nai?: string;
   /** Balance value (amount of held tokens) */
@@ -10,18 +12,35 @@ export interface CtokensAppBalance {
 }
 
 export interface CtokensAppLiquidAndVestingBalance {
+  /** Indicates if the balance is for an NFT */
+  is_nft?: boolean;
   liquid?: CtokensAppBalance;
   vesting?: CtokensAppBalance;
 }
 
-export type CtokensAppArrayOfBalances = CtokensAppLiquidAndVestingBalance[];
+export interface CtokensAppAccountBalancesResponse {
+  /** Total number of items */
+  total_items?: number;
+  /** Total number of pages */
+  total_pages?: number;
+  /** List of balance */
+  items?: CtokensAppLiquidAndVestingBalance[];
+}
 
 export enum CtokensAppSortDirection {
   Asc = "asc",
   Desc = "desc",
 }
 
+export enum CtokensAppAssetType {
+  All = "all",
+  Token = "token",
+  Nft = "nft",
+}
+
 export interface CtokensAppToken {
+  /** Asset symbol, unique identifier for the token */
+  asset_num?: number;
   /** Currency NAI */
   nai?: string;
   /** token owner */
@@ -49,7 +68,14 @@ export interface CtokensAppLiquidAndVestingToken {
   vesting?: CtokensAppToken;
 }
 
-export type CtokensAppArrayOfTokens = CtokensAppLiquidAndVestingToken[];
+export interface CtokensAppRegisteredTokensResponse {
+  /** Total number of items */
+  total_items?: number;
+  /** Total number of pages */
+  total_pages?: number;
+  /** List of registered tokens */
+  items?: CtokensAppLiquidAndVestingToken[];
+}
 
 export interface CtokensAppUser {
   management_key?: string;
@@ -60,8 +86,6 @@ export interface CtokensAppUser {
   metadata?: Record<string, any>;
 }
 
-export type CtokensAppArrayOfUsers = CtokensAppUser[];
-
 export interface CtokensAppTransactionStatusResponse {
   code?: string;
   details?: string;
@@ -80,7 +104,14 @@ export interface CtokensAppTopHolder {
   metadata?: Record<string, any>;
 }
 
-export type CtokensAppArrayOfTopHolders = CtokensAppTopHolder[];
+export interface CtokensAppTopHolderResponse {
+  /** Total number of items */
+  total_items?: number;
+  /** Total number of pages */
+  total_pages?: number;
+  /** List of top holders */
+  items?: CtokensAppTopHolder[];
+}
 
 export interface CtokensAppBalanceHistory {
   /** Sequence number of the history entry */
@@ -98,31 +129,185 @@ export interface CtokensAppBalanceHistory {
   timestamp?: string;
 }
 
-export type CtokensAppArrayOfBalanceHistory = CtokensAppBalanceHistory[];
+export interface CtokensAppBalanceHistoryResponse {
+  /** Total number of items */
+  total_items?: number;
+  /** Total number of pages */
+  total_pages?: number;
+  /** List of balance history items */
+  items?: CtokensAppBalanceHistory[];
+}
+
+export interface CtokensAppNft {
+  /** Unique identifier for the NFT */
+  unique_id?: string;
+  /** Operational key of the NFT owner */
+  owner?: string;
+  /** Key-value pairs with additional token metadata. */
+  metadata?: Record<string, any>;
+}
+
+export interface CtokensAppNftsResponse {
+  /** Total number of items */
+  total_items?: number;
+  /** Total number of pages */
+  total_pages?: number;
+  /** List of NFTs */
+  items?: CtokensAppNft[];
+}
+
+export interface CtokensAppNftHistory {
+  /** Sequence number of the history entry */
+  history_seq_no?: number;
+  /** Type of operation (e.g., create, transfer, stake, unstake) */
+  event_type?: string;
+  /** Whether the balance is liquid or vesting */
+  is_liquid?: boolean;
+  /** unique identifier of the asset (liquid or vesting) */
+  asset_num?: number;
+  /** operational key of the new NFT owner */
+  owner?: string;
+  /**
+   * Creation date
+   * @format date-time
+   */
+  timestamp?: string;
+}
+
+export interface CtokensAppNftHistoryResponse {
+  /** Total number of items */
+  total_items?: number;
+  /** Total number of pages */
+  total_pages?: number;
+  /** List of balance history items */
+  items?: CtokensAppNftHistory[];
+}
+
+export interface BroadcastProxyErrorResponse {
+  /** Indicates if the trasaction was an error */
+  success?: boolean;
+  /** Error message if the trasaction failed */
+  error?: string;
+}
+
+export interface BroadcastProxyResponse {
+  /** Indicates if the trasaction was successful */
+  success?: boolean;
+  /** Reference ID of the broadcasted transaction */
+  "ref-id"?: string;
+}
+
+export interface ProxyTransaction {
+  /**
+   * Protocol version of the transaction
+   * @example "1"
+   */
+  protocol_version?: string;
+  /**
+   * Reference block prefix
+   * @example "2220321480"
+   */
+  ref_block_prefix?: string;
+  /**
+   * List of operations included in the transaction
+   * @example []
+   */
+  operations?: Record<string, any>[];
+  /**
+   * List of signatures for the transaction
+   * @example []
+   */
+  signatures?: string[];
+}
+
+export interface BroadcastProxyInput {
+  /** The transaction object to be broadcasted */
+  trx?: ProxyTransaction;
+}
 
 export interface CtokensEndpointsGetTopHoldersParams {
-  nai: string;
-  precision: number;
+  "asset-num": number;
   /**
    * 100 results per page (default `1`).
    * @min 1
    * @default 1
    */
   page?: number;
+  /**
+   * Return max `page-size` operations per page, defaults to `100`
+   * @default 100
+   */
+  "page-size"?: number;
+  /**
+   * Sort order:
+   *
+   *  * `asc` - Ascending, from A to Z or smallest to largest
+   *
+   *  * `desc` - Descending, from Z to A or largest to smallest
+   * @default "desc"
+   */
+  direction?: CtokensAppSortDirection;
 }
 
 export interface CtokensEndpointsGetAccountBalancesParams {
   user: string;
   /** @default null */
-  nai?: string;
+  "asset-num"?: number;
+  /**
+   * Filter by asset type:
+   *
+   *  * `all` - both tokens and NFTs
+   *
+   *  * `token` - only tokens
+   *
+   *  * `nft` - only NFTs
+   * @default "all"
+   */
+  "asset-type"?: CtokensAppAssetType;
+  /**
+   * 100 results per page (default `1`).
+   * @min 1
+   * @default 1
+   */
+  page?: number;
+  /**
+   * Return max `page-size` operations per page, defaults to `100`
+   * @default 100
+   */
+  "page-size"?: number;
+  /**
+   * Sort order:
+   *
+   *  * `asc` - Ascending, from A to Z or smallest to largest
+   *
+   *  * `desc` - Descending, from Z to A or largest to smallest
+   * @default "desc"
+   */
+  direction?: CtokensAppSortDirection;
+}
+
+export interface CtokensEndpointsGetNftParams {
   /** @default null */
-  precision?: number;
+  "unique-id": string;
+}
+
+export interface CtokensEndpointsGetNftsParams {
+  "asset-num": number;
+  /** @default null */
+  owner?: string;
+  /** @default null */
+  "unique-id"?: string;
   /**
    * 100 results per page (default `1`).
    * @min 1
    * @default 1
    */
   page?: number;
+  /**
+   * Return max `page-size` operations per page, defaults to `100`
+   * @default 100
+   */
+  "page-size"?: number;
   /**
    * Sort order:
    *
@@ -136,14 +321,51 @@ export interface CtokensEndpointsGetAccountBalancesParams {
 
 export interface CtokensEndpointsGetBalanceHistoryParams {
   user: string;
-  nai: string;
-  precision: number;
+  "asset-num": number;
   /**
    * 100 results per page (default `1`).
    * @min 1
    * @default 1
    */
   page?: number;
+  /**
+   * Return max `page-size` operations per page, defaults to `100`
+   * @default 100
+   */
+  "page-size"?: number;
+  /**
+   * Sort order:
+   *
+   *  * `asc` - Ascending, from A to Z or smallest to largest
+   *
+   *  * `desc` - Descending, from Z to A or largest to smallest
+   * @default "desc"
+   */
+  direction?: CtokensAppSortDirection;
+}
+
+export interface CtokensEndpointsGetNftHistoryParams {
+  "unique-id": string;
+  /**
+   * 100 results per page (default `1`).
+   * @min 1
+   * @default 1
+   */
+  page?: number;
+  /**
+   * Return max `page-size` operations per page, defaults to `100`
+   * @default 100
+   */
+  "page-size"?: number;
+  /**
+   * Sort order:
+   *
+   *  * `asc` - Ascending, from A to Z or smallest to largest
+   *
+   *  * `desc` - Descending, from Z to A or largest to smallest
+   * @default "desc"
+   */
+  direction?: CtokensAppSortDirection;
 }
 
 export interface CtokensEndpointsGetRegisteredTokensParams {
@@ -153,15 +375,29 @@ export interface CtokensEndpointsGetRegisteredTokensParams {
    */
   owner?: string;
   /** @default null */
-  nai?: string;
-  /** @default null */
-  precision?: number;
+  "asset-num"?: number;
+  /**
+   * Filter by asset type:
+   *
+   *  * `all` - both tokens and NFTs
+   *
+   *  * `token` - only tokens
+   *
+   *  * `nft` - only NFTs
+   * @default "all"
+   */
+  "asset-type"?: CtokensAppAssetType;
   /**
    * 100 results per page (default `1`).
    * @min 1
    * @default 1
    */
   page?: number;
+  /**
+   * Return max `page-size` operations per page, defaults to `100`
+   * @default 100
+   */
+  "page-size"?: number;
   /**
    * Sort order:
    *
@@ -175,13 +411,7 @@ export interface CtokensEndpointsGetRegisteredTokensParams {
 
 export interface CtokensEndpointsGetRegisteredUsersParams {
   /** @default null */
-  user?: string;
-  /**
-   * 100 results per page (default `1`).
-   * @min 1
-   * @default 1
-   */
-  page?: number;
+  user: string;
 }
 
 export interface CtokensEndpointsGetStatusParams {
@@ -190,6 +420,11 @@ export interface CtokensEndpointsGetStatusParams {
 
 type TWaxExtended = {
   ctokensApi: {
+    broadcastProxy: {
+      result: BroadcastProxyResponse,
+      params: TEmptyReq & BroadcastProxyInput & {
+      }
+    },
     version: {
       result: string,
       params: undefined
@@ -199,27 +434,42 @@ type TWaxExtended = {
       params: undefined
     },
     topHolders: {
-      result: CtokensAppArrayOfTopHolders,
+      result: CtokensAppTopHolderResponse,
       params: CtokensEndpointsGetTopHoldersParams & TEmptyReq & {
       }
     },
     balances: {
-      result: CtokensAppArrayOfBalances,
+      result: CtokensAppAccountBalancesResponse,
       params: CtokensEndpointsGetAccountBalancesParams & TEmptyReq & {
       }
     },
+    nft: {
+      result: CtokensAppNft,
+      params: CtokensEndpointsGetNftParams & TEmptyReq & {
+      }
+    },
+    nfts: {
+      result: CtokensAppNftsResponse,
+      params: CtokensEndpointsGetNftsParams & TEmptyReq & {
+      }
+    },
     balanceHistory: {
-      result: CtokensAppArrayOfBalanceHistory,
+      result: CtokensAppBalanceHistoryResponse,
       params: CtokensEndpointsGetBalanceHistoryParams & TEmptyReq & {
       }
     },
-    registeredTokens: {
-      result: CtokensAppArrayOfTokens,
+    nftHistory: {
+      result: CtokensAppNftHistoryResponse,
+      params: CtokensEndpointsGetNftHistoryParams & TEmptyReq & {
+      }
+    },
+    tokens: {
+      result: CtokensAppRegisteredTokensResponse,
       params: CtokensEndpointsGetRegisteredTokensParams & TEmptyReq & {
       }
     },
-    registeredUsers: {
-      result: CtokensAppArrayOfUsers,
+    users: {
+      result: CtokensAppUser,
       params: CtokensEndpointsGetRegisteredUsersParams & TEmptyReq & {
       }
     },
diff --git a/src/utils/wallet/ctokens/api/index.js b/src/utils/wallet/ctokens/api/index.js
index 8af3481..783165d 100644
--- a/src/utils/wallet/ctokens/api/index.js
+++ b/src/utils/wallet/ctokens/api/index.js
@@ -1,6 +1,10 @@
 export default {
   ctokensApi: {
     urlPath: "ctokens-api",
+    broadcastProxy: {
+      urlPath: "broadcast-proxy",
+      method: "POST"
+    },
     version: {
       urlPath: "version",
       method: "GET"
@@ -17,16 +21,28 @@ export default {
       urlPath: "balances",
       method: "GET"
     },
+    nft: {
+      urlPath: "nft",
+      method: "GET"
+    },
+    nfts: {
+      urlPath: "nfts",
+      method: "GET"
+    },
     balanceHistory: {
       urlPath: "balance-history",
       method: "GET"
     },
-    registeredTokens: {
-      urlPath: "registered-tokens",
+    nftHistory: {
+      urlPath: "nft-history",
+      method: "GET"
+    },
+    tokens: {
+      urlPath: "tokens",
       method: "GET"
     },
-    registeredUsers: {
-      urlPath: "registered-users",
+    users: {
+      urlPath: "users",
       method: "GET"
     },
     status: {
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index 34e38d2..548ff83 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -76,9 +76,9 @@ export class CTokensProvider extends AEncryptionProvider {
   }
 
   private async publicKeyHasAccount (): Promise<boolean> {
-    const response = await this.extendedChain.restApi.ctokensApi.registeredUsers({ user: this.publicKey });
+    const response = await this.extendedChain.restApi.ctokensApi.users({ user: this.publicKey });
 
-    return response.length > 0;
+    return !!response?.management_key;
   }
 
   public async destroy () {
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 8ab1155..e91e46c 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -16,7 +16,7 @@ declare global {
     }
   }
   interface WindowEventMap {
-    /* eslint-disable-next-line @typescript-eslint/naming-convention */
+
     'eip6963:announceProvider': EIP6963AnnounceProviderEvent;
   }
 }
-- 
GitLab


From f608ca67b5e631143497893f0ca238fec9e7665d Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Wed, 12 Nov 2025 15:20:40 +0100
Subject: [PATCH 080/102] Hide HTM

---
 src/components/navigation/AppSidebar.vue   | 23 ++++------------------
 src/components/onboarding/SelectWallet.vue |  3 +++
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/components/navigation/AppSidebar.vue b/src/components/navigation/AppSidebar.vue
index 8ca9574..5c643a6 100644
--- a/src/components/navigation/AppSidebar.vue
+++ b/src/components/navigation/AppSidebar.vue
@@ -94,26 +94,11 @@ const mainGroups: { title: string; items: Array<{ title: string; url: string; ic
   title: 'Tokens',
   items: [
     {
-      title: 'My HTM Account',
-      url: '/tokens/my-balance',
+      title: 'My tokens',
+      url: '#',
+      badge: 'Soon',
       icon: mdiWallet,
-      visible: hasHTMWallet
-    },
-    {
-      title: 'Tokens List',
-      url: '/tokens/list',
-      icon: mdiAccountGroup
-    },
-    {
-      title: 'My Token Definitions',
-      url: '/tokens/my-tokens',
-      icon: mdiViewList,
-      visible: hasHTMWallet
-    },
-    {
-      title: 'Register HTM Account',
-      url: '/tokens/register-account',
-      icon: mdiAccountPlusOutline
+      disabled: ref(true)
     }
   ]
 }, {
diff --git a/src/components/onboarding/SelectWallet.vue b/src/components/onboarding/SelectWallet.vue
index 7cd945e..d07a3cc 100644
--- a/src/components/onboarding/SelectWallet.vue
+++ b/src/components/onboarding/SelectWallet.vue
@@ -17,6 +17,8 @@ const useWallet = (type: UsedWallet) => {
   emit('walletSelect', type);
 };
 
+const isTokensUrl = computed(() => window.location.href.includes('tokens'));
+
 const close = () => {
   emit('close');
 };
@@ -60,6 +62,7 @@ const close = () => {
         @click="useWallet(UsedWallet.METAMASK)"
       />
       <OnboardingButton
+        v-if="isTokensUrl"
         :disabled="!walletsStatus.ctokens"
         :logo-url="getWalletIcon(UsedWallet.CTOKENS_IMPLEMENTATION)"
         name="Hive Token Machine"
-- 
GitLab


From b8452d88c2fc04ae6b16a16c3424ea12f72aeb0d Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 13 Nov 2025 15:26:13 +0100
Subject: [PATCH 081/102] Bump wax, beekeeper and htm dependencies

---
 package.json                                  | 12 ++--
 pnpm-lock.yaml                                | 70 +++++++++----------
 src/components/HTMTokenPreview.vue            |  2 +-
 .../wallets/metamask/MetamaskConnect.vue      |  4 +-
 .../utilcards/ConfirmAccountUpdateCard.vue    |  2 +-
 .../utilcards/RequestAccountCreateManual.vue  |  2 +-
 .../RequestAccountCreateWithWallet.vue        |  2 +-
 .../utilcards/SignTransactionCard.vue         |  2 +-
 .../wallet/MetamaskConnectionManager.vue      |  2 +-
 src/stores/tokens.store.ts                    |  2 +-
 src/stores/user.store.ts                      |  2 +-
 src/stores/wallet.store.ts                    |  2 +-
 src/stores/wax.store.ts                       |  4 +-
 src/utils/wallet/ctokens/signer.ts            | 10 +--
 14 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/package.json b/package.json
index 94e9daf..b5ebbb3 100644
--- a/package.json
+++ b/package.json
@@ -30,14 +30,14 @@
     "@eslint/compat": "^1.3.1",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.32.0",
-    "@hiveio/beekeeper": "1.28.0",
-    "@hiveio/wax": "1.27.12-rc3",
-    "@hiveio/wax-signers-keychain": "1.27.12-rc3",
-    "@hiveio/wax-signers-metamask": "1.27.12-rc3",
-    "@hiveio/wax-signers-peakvault": "1.27.12-rc3",
+    "@hiveio/beekeeper": "1.28.4-rc0",
+    "@hiveio/wax": "1.28.4-rc0",
+    "@hiveio/wax-signers-keychain": "1.28.4-rc0",
+    "@hiveio/wax-signers-metamask": "1.28.4-rc0",
+    "@hiveio/wax-signers-peakvault": "1.28.4-rc0",
     "@mdi/js": "^7.4.47",
     "@metamask/providers": "^16.0.0",
-    "@mtyszczak-cargo/htm": "^1.2.1",
+    "@mtyszczak-cargo/htm": "^1.3.0",
     "@nabla/vite-plugin-eslint": "^2.0.6",
     "@nuxt/eslint": "1.9.0",
     "@nuxtjs/color-mode": "^3.5.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f36e42e..9db4acb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,20 +28,20 @@ importers:
         specifier: ^9.32.0
         version: 9.32.0
       '@hiveio/beekeeper':
-        specifier: 1.28.0
-        version: 1.28.0
+        specifier: 1.28.4-rc0
+        version: 1.28.4-rc0
       '@hiveio/wax':
-        specifier: 1.27.12-rc3
-        version: 1.27.12-rc3
+        specifier: 1.28.4-rc0
+        version: 1.28.4-rc0
       '@hiveio/wax-signers-keychain':
-        specifier: 1.27.12-rc3
-        version: 1.27.12-rc3
+        specifier: 1.28.4-rc0
+        version: 1.28.4-rc0
       '@hiveio/wax-signers-metamask':
-        specifier: 1.27.12-rc3
-        version: 1.27.12-rc3(webextension-polyfill@0.12.0)
+        specifier: 1.28.4-rc0
+        version: 1.28.4-rc0(webextension-polyfill@0.12.0)
       '@hiveio/wax-signers-peakvault':
-        specifier: 1.27.12-rc3
-        version: 1.27.12-rc3
+        specifier: 1.28.4-rc0
+        version: 1.28.4-rc0
       '@mdi/js':
         specifier: ^7.4.47
         version: 7.4.47
@@ -49,8 +49,8 @@ importers:
         specifier: ^16.0.0
         version: 16.1.0
       '@mtyszczak-cargo/htm':
-        specifier: ^1.2.1
-        version: 1.2.1(@hiveio/wax@1.27.12-rc3)
+        specifier: ^1.3.0
+        version: 1.3.0(@hiveio/wax@1.28.4-rc0)
       '@nabla/vite-plugin-eslint':
         specifier: ^2.0.6
         version: 2.0.6(eslint@9.32.0(jiti@2.6.1))(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
@@ -757,21 +757,21 @@ packages:
   '@floating-ui/vue@1.1.6':
     resolution: {integrity: sha512-XFlUzGHGv12zbgHNk5FN2mUB7ROul3oG2ENdTpWdE+qMFxyNxWSRmsoyhiEnpmabNm6WnUvR1OvJfUfN4ojC1A==}
 
-  '@hiveio/beekeeper@1.28.0':
-    resolution: {integrity: sha1-jhzjl4rv49r45D8o4sQymoSn98o=, tarball: https://gitlab.syncad.com/api/v4/projects/198/packages/npm/@hiveio/beekeeper/-/@hiveio/beekeeper-1.28.0.tgz}
+  '@hiveio/beekeeper@1.28.4-rc0':
+    resolution: {integrity: sha1-qLgaAY/l+gXAdleuIeyaMAo6wxA=, tarball: https://gitlab.syncad.com/api/v4/projects/198/packages/npm/@hiveio/beekeeper/-/@hiveio/beekeeper-1.28.4-rc0.tgz}
     engines: {node: ^20.11 || >= 21.2}
 
-  '@hiveio/wax-signers-keychain@1.27.12-rc3':
-    resolution: {integrity: sha1-MXmiu/sxr+y+3ls/lcP/o6njycE=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-keychain/-/@hiveio/wax-signers-keychain-1.27.12-rc3.tgz}
+  '@hiveio/wax-signers-keychain@1.28.4-rc0':
+    resolution: {integrity: sha1-MyFF1iH7cVFvxbMmek6jcvsgmFI=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-keychain/-/@hiveio/wax-signers-keychain-1.28.4-rc0.tgz}
 
-  '@hiveio/wax-signers-metamask@1.27.12-rc3':
-    resolution: {integrity: sha1-vzAb08khTPEQiC0BXqTVJfhAdX0=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-metamask/-/@hiveio/wax-signers-metamask-1.27.12-rc3.tgz}
+  '@hiveio/wax-signers-metamask@1.28.4-rc0':
+    resolution: {integrity: sha1-6H9zvFnMN++GMZZ9ViTEavUOb2w=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-metamask/-/@hiveio/wax-signers-metamask-1.28.4-rc0.tgz}
 
-  '@hiveio/wax-signers-peakvault@1.27.12-rc3':
-    resolution: {integrity: sha1-EhNJNiGUy9f/KQmvJzLKtaaJnmc=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-peakvault/-/@hiveio/wax-signers-peakvault-1.27.12-rc3.tgz}
+  '@hiveio/wax-signers-peakvault@1.28.4-rc0':
+    resolution: {integrity: sha1-FiqVRCWkcf7XI5UKi02lrFtaD7M=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax-signers-peakvault/-/@hiveio/wax-signers-peakvault-1.28.4-rc0.tgz}
 
-  '@hiveio/wax@1.27.12-rc3':
-    resolution: {integrity: sha1-zq62YrSQGjkVhuNlh9MJ6g3xatg=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax/-/@hiveio/wax-1.27.12-rc3.tgz}
+  '@hiveio/wax@1.28.4-rc0':
+    resolution: {integrity: sha1-/Bn76DnbBPd8keqwsSzr3e7FFVc=, tarball: https://gitlab.syncad.com/api/v4/projects/419/packages/npm/@hiveio/wax/-/@hiveio/wax-1.28.4-rc0.tgz}
     engines: {node: ^20.11 || >= 21.2}
 
   '@humanfs/core@0.19.1':
@@ -923,11 +923,11 @@ packages:
     resolution: {integrity: sha512-w8CVbdkDrVXFJbfBSlDfafDR6BAkpDmv1bC1UJVCoVny5tW2RKAdn9i68Xf7asYT4TnUhl/hN4zfUiKQq9II4g==}
     engines: {node: '>=16.0.0'}
 
-  '@mtyszczak-cargo/htm@1.2.1':
-    resolution: {integrity: sha1-n+Z2u7/X/JFLc3EYyCFZom+gjKo=, tarball: https://gitlab.syncad.com/api/v4/projects/541/packages/npm/@mtyszczak-cargo/htm/-/@mtyszczak-cargo/htm-1.2.1.tgz}
+  '@mtyszczak-cargo/htm@1.3.0':
+    resolution: {integrity: sha1-SUdjQjKklrPcF8o78IljJjA4AC4=, tarball: https://gitlab.syncad.com/api/v4/projects/541/packages/npm/@mtyszczak-cargo/htm/-/@mtyszczak-cargo/htm-1.3.0.tgz}
     engines: {node: ^20.11 || >= 21.2}
     peerDependencies:
-      '@hiveio/wax': '>=1.27.12-rc1-251007115925'
+      '@hiveio/wax': '>=1.28.4-rc0'
 
   '@nabla/vite-plugin-eslint@2.0.6':
     resolution: {integrity: sha512-QQZwq7aTx2WtG2/c2ASF+amNAytbLY8LYYc71bECIMzRr7Y7Cx3o6oAQrcb1qQbq2+z2S2rq7i7o5LTskQi8sA==}
@@ -6632,25 +6632,25 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@hiveio/beekeeper@1.28.0': {}
+  '@hiveio/beekeeper@1.28.4-rc0': {}
 
-  '@hiveio/wax-signers-keychain@1.27.12-rc3':
+  '@hiveio/wax-signers-keychain@1.28.4-rc0':
     dependencies:
-      '@hiveio/wax': 1.27.12-rc3
+      '@hiveio/wax': 1.28.4-rc0
 
-  '@hiveio/wax-signers-metamask@1.27.12-rc3(webextension-polyfill@0.12.0)':
+  '@hiveio/wax-signers-metamask@1.28.4-rc0(webextension-polyfill@0.12.0)':
     dependencies:
-      '@hiveio/wax': 1.27.12-rc3
+      '@hiveio/wax': 1.28.4-rc0
       '@metamask/providers': 21.0.0(webextension-polyfill@0.12.0)
     transitivePeerDependencies:
       - supports-color
       - webextension-polyfill
 
-  '@hiveio/wax-signers-peakvault@1.27.12-rc3':
+  '@hiveio/wax-signers-peakvault@1.28.4-rc0':
     dependencies:
-      '@hiveio/wax': 1.27.12-rc3
+      '@hiveio/wax': 1.28.4-rc0
 
-  '@hiveio/wax@1.27.12-rc3':
+  '@hiveio/wax@1.28.4-rc0':
     dependencies:
       events: 3.3.0
 
@@ -6901,9 +6901,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mtyszczak-cargo/htm@1.2.1(@hiveio/wax@1.27.12-rc3)':
+  '@mtyszczak-cargo/htm@1.3.0(@hiveio/wax@1.28.4-rc0)':
     dependencies:
-      '@hiveio/wax': 1.27.12-rc3
+      '@hiveio/wax': 1.28.4-rc0
       protobufjs: 7.2.5
 
   '@nabla/vite-plugin-eslint@2.0.6(eslint@9.32.0(jiti@2.6.1))(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))':
diff --git a/src/components/HTMTokenPreview.vue b/src/components/HTMTokenPreview.vue
index 22d00ac..22bbeef 100644
--- a/src/components/HTMTokenPreview.vue
+++ b/src/components/HTMTokenPreview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { IWaxBaseInterface } from '@hiveio/wax/vite';
+import type { IWaxBaseInterface } from '@hiveio/wax';
 import { computed, onMounted, ref } from 'vue';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
diff --git a/src/components/onboarding/wallets/metamask/MetamaskConnect.vue b/src/components/onboarding/wallets/metamask/MetamaskConnect.vue
index 52a33cc..2908215 100644
--- a/src/components/onboarding/wallets/metamask/MetamaskConnect.vue
+++ b/src/components/onboarding/wallets/metamask/MetamaskConnect.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TRole } from '@hiveio/wax/vite';
-import { AccountAuthorityUpdateOperation } from '@hiveio/wax/vite';
+import type { TRole } from '@hiveio/wax';
+import { AccountAuthorityUpdateOperation } from '@hiveio/wax';
 import { mdiClose } from '@mdi/js';
 import { Check, Search } from 'lucide-vue-next';
 import { ref } from 'vue';
diff --git a/src/components/utilcards/ConfirmAccountUpdateCard.vue b/src/components/utilcards/ConfirmAccountUpdateCard.vue
index 4396883..4e16ab0 100644
--- a/src/components/utilcards/ConfirmAccountUpdateCard.vue
+++ b/src/components/utilcards/ConfirmAccountUpdateCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AccountAuthorityUpdateOperation } from '@hiveio/wax/vite';
+import { AccountAuthorityUpdateOperation } from '@hiveio/wax';
 import { mdiAccountArrowUpOutline } from '@mdi/js';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
diff --git a/src/components/utilcards/RequestAccountCreateManual.vue b/src/components/utilcards/RequestAccountCreateManual.vue
index 284ab31..840227a 100644
--- a/src/components/utilcards/RequestAccountCreateManual.vue
+++ b/src/components/utilcards/RequestAccountCreateManual.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TRole } from '@hiveio/wax/vite';
+import type { TRole } from '@hiveio/wax';
 import {
   mdiAccountPlusOutline,
   mdiCheckCircle,
diff --git a/src/components/utilcards/RequestAccountCreateWithWallet.vue b/src/components/utilcards/RequestAccountCreateWithWallet.vue
index 03f82ed..1c03c5a 100644
--- a/src/components/utilcards/RequestAccountCreateWithWallet.vue
+++ b/src/components/utilcards/RequestAccountCreateWithWallet.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TRole } from '@hiveio/wax/vite';
+import type { TRole } from '@hiveio/wax';
 import { mdiAccountPlusOutline, mdiHelpCircleOutline, mdiShieldCheckOutline } from '@mdi/js';
 import { computed, ref } from 'vue';
 
diff --git a/src/components/utilcards/SignTransactionCard.vue b/src/components/utilcards/SignTransactionCard.vue
index 33233d2..6a7444c 100644
--- a/src/components/utilcards/SignTransactionCard.vue
+++ b/src/components/utilcards/SignTransactionCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ITransaction, TRole, TTransactionRequiredAuthorities } from '@hiveio/wax/vite';
+import type { ITransaction, TRole, TTransactionRequiredAuthorities } from '@hiveio/wax';
 import { mdiFileSign } from '@mdi/js';
 import { AlertCircle } from 'lucide-vue-next';
 import { computed, onMounted, ref } from 'vue';
diff --git a/src/components/wallet/MetamaskConnectionManager.vue b/src/components/wallet/MetamaskConnectionManager.vue
index 509ec11..4d74b9a 100644
--- a/src/components/wallet/MetamaskConnectionManager.vue
+++ b/src/components/wallet/MetamaskConnectionManager.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TRole } from '@hiveio/wax/vite';
+import type { TRole } from '@hiveio/wax';
 import MetaMaskProvider from '@hiveio/wax-signers-metamask';
 import { computed, ref, onMounted, watch, readonly } from 'vue';
 import { toast } from 'vue-sonner';
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 2a3401a..9e33dcc 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -1,4 +1,4 @@
-import type { IWaxBaseInterface } from '@hiveio/wax/vite';
+import type { IWaxBaseInterface } from '@hiveio/wax';
 import { HtmTransaction } from '@mtyszczak-cargo/htm';
 import { defineStore } from 'pinia';
 import { shallowRef } from 'vue';
diff --git a/src/stores/user.store.ts b/src/stores/user.store.ts
index 84ee94d..7068ed6 100644
--- a/src/stores/user.store.ts
+++ b/src/stores/user.store.ts
@@ -1,4 +1,4 @@
-import type { ApiAccount, IManabarData } from '@hiveio/wax/vite';
+import type { ApiAccount, IManabarData } from '@hiveio/wax';
 import { defineStore } from 'pinia';
 
 import { getWax } from '@/stores/wax.store';
diff --git a/src/stores/wallet.store.ts b/src/stores/wallet.store.ts
index 69ba2eb..fe0281c 100644
--- a/src/stores/wallet.store.ts
+++ b/src/stores/wallet.store.ts
@@ -1,4 +1,4 @@
-import type { AEncryptionProvider, TRole } from '@hiveio/wax/vite';
+import type { AEncryptionProvider, TRole } from '@hiveio/wax';
 import KeychainProvider from '@hiveio/wax-signers-keychain';
 import MetaMaskProvider from '@hiveio/wax-signers-metamask';
 import PeakVaultProvider from '@hiveio/wax-signers-peakvault';
diff --git a/src/stores/wax.store.ts b/src/stores/wax.store.ts
index 21b1cc2..26af5b9 100644
--- a/src/stores/wax.store.ts
+++ b/src/stores/wax.store.ts
@@ -1,4 +1,4 @@
-import type { NaiAsset, TWaxRestExtended, TWaxExtended, asset } from '@hiveio/wax/vite';
+import type { NaiAsset, TWaxRestExtended, TWaxExtended, asset } from '@hiveio/wax';
 
 import CTokensApi from '@/utils/wallet/ctokens/api';
 
@@ -146,7 +146,7 @@ export const getWax = async () => {
     const chainId = typeof hiveChainId === 'number' || hiveChainId.length > 0 ? String(hiveChainId) : undefined;
     const apiEndpoint = hiveNodeEndpoint.length > 0 ? hiveNodeEndpoint : undefined;
 
-    chain = (await (await import('@hiveio/wax/vite')).createHiveChain({ apiEndpoint, chainId })).extend<WaxApi>().extendRest(CTokensApi);
+    chain = (await (await import('@hiveio/wax')).createHiveChain({ apiEndpoint, chainId })).extend<WaxApi>().extendRest(CTokensApi);
 
     // These steps are repeated in the CtokensProvider constructor, but we need them here too as for now - maybe find a better way of handling this?
     chain.restApi.ctokensApi.endpointUrl = ctokensApiUrl || 'http://192.168.6.7';
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index 548ff83..5acfdea 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -1,6 +1,6 @@
-import type { IBeekeeperInstance, IBeekeeperOptions, IBeekeeperUnlockedWallet } from '@hiveio/beekeeper/vite';
-import type { IHiveChainInterface, ISignatureTransaction, TPublicKey, TRole, TSignature, TWaxRestExtended } from '@hiveio/wax/vite';
-import { AEncryptionProvider } from '@hiveio/wax/vite';
+import type { IBeekeeperInstance, IBeekeeperUnlockedWallet } from '@hiveio/beekeeper';
+import type { IHiveChainInterface, ISignatureTransaction, TPublicKey, TRole, TSignature, TWaxRestExtended } from '@hiveio/wax';
+import { AEncryptionProvider } from '@hiveio/wax';
 
 import RestApi from './api';
 
@@ -89,8 +89,8 @@ export class CTokensProvider extends AEncryptionProvider {
   private static async prepareBeekeeper () {
     if (!CTokensProvider.#beekeeper) {
       // XXX: Fix dynamic beekeeeper import
-      CTokensProvider.#beekeeper = await (import('@hiveio/beekeeper/vite') as unknown as Promise<{ createBeekeeper: (options: Partial<IBeekeeperOptions>) => Promise<IBeekeeperInstance> }>).then(async bk => {
-        return await bk.createBeekeeper({ inMemory: false, enableLogs: false, unlockTimeout: /* 1 day: */ 1440 });
+      CTokensProvider.#beekeeper = await (import('@hiveio/beekeeper')).then(async bk => {
+        return await bk.default({ inMemory: false, enableLogs: false, unlockTimeout: /* 1 day: */ 1440 });
       });
     }
   }
-- 
GitLab


From 8fbbab3689b5898c500cc83af3bfe38ae106ef4e Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 13 Nov 2025 17:32:49 +0100
Subject: [PATCH 082/102] Fix docker image build on the CI

---
 .env.dev       |  4 ++--
 .gitlab-ci.yml | 13 +------------
 Dockerfile     | 37 ++++++++++++++++++++-----------------
 3 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/.env.dev b/.env.dev
index 509a8b5..7f26fcf 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,3 +1,3 @@
-NUXT_PUBLIC_CTOKENS_API_URL=https://htm.fqdn.pl:10081
-NUXT_PUBLIC_HIVE_NODE_ENDPOINT=https://htm.fqdn.pl:18091
+NUXT_PUBLIC_CTOKENS_API_URL=https://15.bc.fqdn.pl:10081
+NUXT_PUBLIC_HIVE_NODE_ENDPOINT=https://15.bc.fqdn.pl:18091
 NUXT_PUBLIC_HIVE_CHAIN_ID=42
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index b1177b5..9aa24ef 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -34,7 +34,7 @@ build:
     - pnpm build
   artifacts:
     paths:
-      - dist
+      - .output
     when: always
     expire_in: 1 week
 
@@ -78,17 +78,6 @@ push_protected_app_image:
       when: on_success
     - when: never
 
-pages:
-  stage: deploy
-  script:
-    - echo "The site will be deployed to $CI_PAGES_URL"
-  publish: dist
-  artifacts:
-    paths:
-      - dist
-  only:
-    - main
-
 deploy_dev_environment:
   extends: .webapp_deploy_template
   stage: deploy
diff --git a/Dockerfile b/Dockerfile
index 164ed23..a19e965 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,17 +1,7 @@
-FROM caddy AS app
-COPY ./dist/ /usr/share/caddy/
-COPY ./.env.example /usr/share/caddy/.env
-
-RUN cat > /etc/caddy/Caddyfile <<EOF
-
-:8080 {
-  root * /usr/share/caddy
-  file_server
-  try_files {path} /
-}
-
-EOF
+FROM node:22-slim AS app
+WORKDIR /app
 
+# Metadata from original Dockerfile (kept as labels/args)
 ARG BUILD_TIME
 ARG GIT_COMMIT_SHA
 ARG GIT_CURRENT_BRANCH
@@ -28,12 +18,25 @@ LABEL org.opencontainers.image.revision="$GIT_COMMIT_SHA"
 LABEL org.opencontainers.image.licenses="MIT"
 LABEL org.opencontainers.image.ref.name="Metamask dApp providing a bridge to Hive blockchain"
 LABEL org.opencontainers.image.title="Hive Bridge Application Image"
-LABEL org.opencontainers.image.description="Runs Hive Bridge applicaton)"
+LABEL org.opencontainers.image.description="Runs Hive Bridge application"
 LABEL io.hive.image.branch="$GIT_CURRENT_BRANCH"
 LABEL io.hive.image.commit.log_message="$GIT_LAST_LOG_MESSAGE"
 LABEL io.hive.image.commit.author="$GIT_LAST_COMMITTER"
 LABEL io.hive.image.commit.date="$GIT_LAST_COMMIT_DATE"
 
-ENV VITE_CTOKENS_API_URL=
-ENV VITE_HIVE_NODE_ENDPOINT=
-ENV VITE_HIVE_CHAIN_ID=
+# Runtime environment defaults
+ENV NODE_ENV=production
+ENV PORT=8080
+ENV HOST=0.0.0.0
+ENV NUXT_PUBLIC_CTOKENS_API_URL=
+ENV NUXT_PUBLIC_HIVE_NODE_ENDPOINT=
+ENV NUXT_PUBLIC_HIVE_CHAIN_ID=
+
+# .output contains the server and public assets built by Nuxt.
+COPY .output/ .output/
+
+# Expose the Nuxt server port
+EXPOSE 8080
+
+# Run the Nuxt server from the generated .output
+CMD ["node", ".output/server/index.mjs"]
-- 
GitLab


From d0496bbb462862b3aee395f9f4cc39b67b427bbc Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 13 Nov 2025 17:33:02 +0100
Subject: [PATCH 083/102] Fix production build by forcing to use specific
 nuxt-supported version of vue

This was caused by loosened peerDependency of vue in other packages
---
 nuxt.config.ts |  13 ++-
 package.json   |   6 ++
 pnpm-lock.yaml | 218 +++++++++++++------------------------------------
 3 files changed, 74 insertions(+), 163 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9860dbd..1e7b51a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -27,6 +27,11 @@ export default defineNuxtConfig({
       ]
     }
   },
+  vite: {
+    esbuild: {
+      target: 'es2022'
+    }
+  },
   dir: {
     app: 'src',
     assets: 'src/assets',
@@ -35,9 +40,13 @@ export default defineNuxtConfig({
     middleware: 'src/middleware',
     plugins: 'src/plugins'
   },
-  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', '@nuxt/eslint', '@pinia/nuxt'],
+  modules: [
+    '@nuxtjs/tailwindcss',
+    '@nuxtjs/color-mode',
+    '@nuxt/eslint',
+    '@pinia/nuxt'
+  ],
   alias: {
-
     '@': path.resolve(import.meta.dirname, './src')
   },
   eslint: {
diff --git a/package.json b/package.json
index b5ebbb3..b0cecdc 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,12 @@
     "postinstall": "nuxt prepare",
     "regenerate-ctokens-api": "pnpm --package @hiveio/wax-spec-generator dlx generate-wax-spec -o src/utils/wallet/ctokens/api -i"
   },
+  "pnpm": {
+    "overrides": {
+      "vue": "3.5.22",
+      "@vue/server-renderer": "3.5.22"
+    }
+  },
   "devDependencies": {
     "@eslint/compat": "^1.3.1",
     "@eslint/eslintrc": "^3.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9db4acb..a10d216 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,10 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+overrides:
+  vue: 3.5.22
+  '@vue/server-renderer': 3.5.22
+
 importers:
 
   .:
@@ -65,13 +69,13 @@ importers:
         version: 6.13.1(magicast@0.3.5)(ts-node@10.9.2(@swc/core@1.3.78(@swc/helpers@0.5.15))(@types/node@22.13.9)(typescript@5.7.3))
       '@pinia/nuxt':
         specifier: 0.11.2
-        version: 0.11.2(magicast@0.3.5)(pinia@3.0.3(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))
+        version: 0.11.2(magicast@0.3.5)(pinia@3.0.3(typescript@5.7.3)(vue@3.5.22(typescript@5.7.3)))
       '@stylistic/eslint-plugin':
         specifier: ^5.2.2
         version: 5.2.2(eslint@9.32.0(jiti@2.6.1))
       '@tanstack/vue-table':
         specifier: ^8.21.2
-        version: 8.21.2(vue@3.5.13(typescript@5.7.3))
+        version: 8.21.2(vue@3.5.22(typescript@5.7.3))
       '@types/jsonwebtoken':
         specifier: ^9.0.10
         version: 9.0.10
@@ -89,13 +93,13 @@ importers:
         version: 8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
       '@vitejs/plugin-vue':
         specifier: ^5.2.1
-        version: 5.2.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.13(typescript@5.7.3))
+        version: 5.2.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.22(typescript@5.7.3))
       '@vue/eslint-config-typescript':
         specifier: ^14.6.0
         version: 14.6.0(eslint-plugin-vue@10.3.0(@typescript-eslint/parser@8.38.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3))(eslint@9.32.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.32.0(jiti@2.6.1))))(eslint@9.32.0(jiti@2.6.1))(typescript@5.7.3)
       '@vue/tsconfig':
         specifier: ^0.7.0
-        version: 0.7.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
+        version: 0.7.0(typescript@5.7.3)(vue@3.5.22(typescript@5.7.3))
       '@vueuse/core':
         specifier: ^12.8.2
         version: 12.8.2(typescript@5.7.3)
@@ -122,16 +126,16 @@ importers:
         version: 16.3.0
       lucide-vue-next:
         specifier: ^0.477.0
-        version: 0.477.0(vue@3.5.13(typescript@5.7.3))
+        version: 0.477.0(vue@3.5.22(typescript@5.7.3))
       nuxt:
         specifier: ^4.2.0
         version: 4.2.0(@parcel/watcher@2.5.1)(@types/node@22.13.9)(@vue/compiler-sfc@3.5.22)(db0@0.3.4)(eslint@9.32.0(jiti@2.6.1))(ioredis@5.8.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.5)(terser@5.39.0)(tsx@4.19.3)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue-tsc@3.1.2(typescript@5.7.3))(yaml@2.8.1)
       pinia:
         specifier: ^3.0.3
-        version: 3.0.3(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
+        version: 3.0.3(typescript@5.7.3)(vue@3.5.22(typescript@5.7.3))
       reka-ui:
         specifier: ^2.0.2
-        version: 2.0.2(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
+        version: 2.0.2(typescript@5.7.3)(vue@3.5.22(typescript@5.7.3))
       tailwind-merge:
         specifier: ^3.0.2
         version: 3.0.2
@@ -154,11 +158,11 @@ importers:
         specifier: ^5.0.4
         version: 5.0.4(@types/eslint@9.6.1)(eslint@9.32.0(jiti@2.6.1))(rollup@4.52.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))
       vue:
-        specifier: ^3.5.13
-        version: 3.5.13(typescript@5.7.3)
+        specifier: 3.5.22
+        version: 3.5.22(typescript@5.7.3)
       vue-router:
         specifier: '4'
-        version: 4.5.0(vue@3.5.13(typescript@5.7.3))
+        version: 4.5.0(vue@3.5.22(typescript@5.7.3))
       vue-sonner:
         specifier: ^1.3.0
         version: 1.3.0
@@ -1054,7 +1058,7 @@ packages:
     peerDependencies:
       nuxt: 4.2.0
       rolldown: ^1.0.0-beta.38
-      vue: ^3.3.4
+      vue: 3.5.22
     peerDependenciesMeta:
       rolldown:
         optional: true
@@ -1881,12 +1885,12 @@ packages:
     resolution: {integrity: sha512-KBgOWxha/x4m1EdhVWxOpqHb661UjqAxzPcmXR3QiA7aShZ547x19Gw0UJX9we+m+tVcPuLRZ61JsYW47QZFfQ==}
     engines: {node: '>=12'}
     peerDependencies:
-      vue: '>=3.2'
+      vue: 3.5.22
 
   '@tanstack/vue-virtual@3.13.2':
     resolution: {integrity: sha512-z4swzjdhzCh95n9dw9lTvw+t3iwSkYRlVkYkra3C9mul/m5fTzHR7KmtkwH4qXMTXGJUbngtC/bz2cHQIHkO8g==}
     peerDependencies:
-      vue: ^2.7.0 || ^3.0.0
+      vue: 3.5.22
 
   '@tsconfig/node10@1.0.11':
     resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
@@ -2064,7 +2068,7 @@ packages:
   '@unhead/vue@2.0.19':
     resolution: {integrity: sha512-7BYjHfOaoZ9+ARJkT10Q2TjnTUqDXmMpfakIAsD/hXiuff1oqWg1xeXT5+MomhNcC15HbiABpbbBmITLSHxdKg==}
     peerDependencies:
-      vue: '>=3.5.18'
+      vue: 3.5.22
 
   '@unrs/resolver-binding-android-arm-eabi@1.11.1':
     resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
@@ -2171,21 +2175,21 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0
-      vue: ^3.0.0
+      vue: 3.5.22
 
   '@vitejs/plugin-vue@5.2.1':
     resolution: {integrity: sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: ^5.0.0 || ^6.0.0
-      vue: ^3.2.25
+      vue: 3.5.22
 
   '@vitejs/plugin-vue@6.0.1':
     resolution: {integrity: sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0
-      vue: ^3.2.25
+      vue: 3.5.22
 
   '@volar/language-core@2.4.23':
     resolution: {integrity: sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==}
@@ -2200,7 +2204,7 @@ packages:
     resolution: {integrity: sha512-afW2DMjgCBVs33mWRlz7YsGHzoEEupnl0DK5ZTKsgziAlLh5syc5m+GM7eqeYrgiQpwMaVxa1fk73caCvPxyAw==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
-      vue: ^2.7.0 || ^3.2.25
+      vue: 3.5.22
     peerDependenciesMeta:
       vue:
         optional: true
@@ -2221,27 +2225,15 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@vue/compiler-core@3.5.13':
-    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
-
   '@vue/compiler-core@3.5.22':
     resolution: {integrity: sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==}
 
-  '@vue/compiler-dom@3.5.13':
-    resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
-
   '@vue/compiler-dom@3.5.22':
     resolution: {integrity: sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==}
 
-  '@vue/compiler-sfc@3.5.13':
-    resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
-
   '@vue/compiler-sfc@3.5.22':
     resolution: {integrity: sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==}
 
-  '@vue/compiler-ssr@3.5.13':
-    resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
-
   '@vue/compiler-ssr@3.5.22':
     resolution: {integrity: sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==}
 
@@ -2254,7 +2246,7 @@ packages:
   '@vue/devtools-core@7.7.7':
     resolution: {integrity: sha512-9z9TLbfC+AjAi1PQyWX+OErjIaJmdFlbDHcD+cAMYKY6Bh5VlsAtCeGyRMrXwIlMEQPukvnWt3gZBLwTAIMKzQ==}
     peerDependencies:
-      vue: ^3.0.0
+      vue: 3.5.22
 
   '@vue/devtools-kit@7.7.7':
     resolution: {integrity: sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==}
@@ -2281,37 +2273,20 @@ packages:
       typescript:
         optional: true
 
-  '@vue/reactivity@3.5.13':
-    resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
-
   '@vue/reactivity@3.5.22':
     resolution: {integrity: sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==}
 
-  '@vue/runtime-core@3.5.13':
-    resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
-
   '@vue/runtime-core@3.5.22':
     resolution: {integrity: sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==}
 
-  '@vue/runtime-dom@3.5.13':
-    resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
-
   '@vue/runtime-dom@3.5.22':
     resolution: {integrity: sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==}
 
-  '@vue/server-renderer@3.5.13':
-    resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==}
-    peerDependencies:
-      vue: 3.5.13
-
   '@vue/server-renderer@3.5.22':
     resolution: {integrity: sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==}
     peerDependencies:
       vue: 3.5.22
 
-  '@vue/shared@3.5.13':
-    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
-
   '@vue/shared@3.5.22':
     resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
 
@@ -2319,7 +2294,7 @@ packages:
     resolution: {integrity: sha512-ku2uNz5MaZ9IerPPUyOHzyjhXoX2kVJaVf7hL315DC17vS6IiZRmmCPfggNbU16QTvM80+uYYy3eYJB59WCtvg==}
     peerDependencies:
       typescript: 5.x
-      vue: ^3.4.0
+      vue: 3.5.22
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -4160,7 +4135,7 @@ packages:
   lucide-vue-next@0.477.0:
     resolution: {integrity: sha512-C7azIKO7aJKf5MD7OIzV7NRDtnjXH3KSXfyJgGqRIMemuMzW/9esuMxDXIXDhBZcJgRtXMUN0FcJwOJZQ8SywA==}
     peerDependencies:
-      vue: '>=3.0.1'
+      vue: 3.5.22
 
   magic-regexp@0.10.0:
     resolution: {integrity: sha512-Uly1Bu4lO1hwHUW0CQeSWuRtzCMNO00CmXtS8N6fyvB3B979GOEEeAkiTUDsmbYLAbvpUS/Kt5c4ibosAzVyVg==}
@@ -4169,9 +4144,6 @@ packages:
     resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
     engines: {node: '>=20.19.0'}
 
-  magic-string@0.30.17:
-    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
-
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -4655,7 +4627,7 @@ packages:
     resolution: {integrity: sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==}
     peerDependencies:
       typescript: '>=4.4.4'
-      vue: ^2.7.0 || ^3.5.11
+      vue: 3.5.22
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -5025,7 +4997,7 @@ packages:
   reka-ui@2.0.2:
     resolution: {integrity: sha512-pC2UF6Z+kJF96aJvIErhkSO4DJYIeq9pgvh3pntNqcZb3zFGMzw8h2uny+GnLX2CKiQV54kZNYXxecYIiPMGyg==}
     peerDependencies:
-      vue: '>= 3.2.0'
+      vue: 3.5.22
 
   replace-in-file@6.3.5:
     resolution: {integrity: sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==}
@@ -5800,7 +5772,7 @@ packages:
     resolution: {integrity: sha512-L5/vAhT6oYbH4RSQYGLN9VfHexWe7SGzca1pJ7oPkL6KtxWA1jbGeb3Ri1JptKzqtd42HinOq4uEYqzhVWrzig==}
     peerDependencies:
       vite: ^6.0.0 || ^7.0.0
-      vue: ^3.5.0
+      vue: 3.5.22
 
   vite@6.2.0:
     resolution: {integrity: sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==}
@@ -5894,7 +5866,7 @@ packages:
     hasBin: true
     peerDependencies:
       '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
+      vue: 3.5.22
     peerDependenciesMeta:
       '@vue/composition-api':
         optional: true
@@ -5911,12 +5883,12 @@ packages:
   vue-router@4.5.0:
     resolution: {integrity: sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==}
     peerDependencies:
-      vue: ^3.2.0
+      vue: 3.5.22
 
   vue-router@4.6.3:
     resolution: {integrity: sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==}
     peerDependencies:
-      vue: ^3.5.0
+      vue: 3.5.22
 
   vue-sonner@1.3.0:
     resolution: {integrity: sha512-jAodBy4Mri8rQjVZGQAPs4ZYymc1ywPiwfa81qU0fFl+Suk7U8NaOxIDdI1oBGLeQJqRZi/oxNIuhCLqsBmOwg==}
@@ -5927,14 +5899,6 @@ packages:
     peerDependencies:
       typescript: '>=5.0.0'
 
-  vue@3.5.13:
-    resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   vue@3.5.22:
     resolution: {integrity: sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==}
     peerDependencies:
@@ -6623,11 +6587,11 @@ snapshots:
 
   '@floating-ui/utils@0.2.9': {}
 
-  '@floating-ui/vue@1.1.6(vue@3.5.13(typescript@5.7.3))':
+  '@floating-ui/vue@1.1.6(vue@3.5.22(typescript@5.7.3))':
     dependencies:
       '@floating-ui/dom': 1.6.13
       '@floating-ui/utils': 0.2.9
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.3))
+      vue-demi: 0.14.10(vue@3.5.22(typescript@5.7.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -7563,10 +7527,10 @@ snapshots:
       '@parcel/watcher-win32-ia32': 2.5.1
       '@parcel/watcher-win32-x64': 2.5.1
 
-  '@pinia/nuxt@0.11.2(magicast@0.3.5)(pinia@3.0.3(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))':
+  '@pinia/nuxt@0.11.2(magicast@0.3.5)(pinia@3.0.3(typescript@5.7.3)(vue@3.5.22(typescript@5.7.3)))':
     dependencies:
       '@nuxt/kit': 3.20.0(magicast@0.3.5)
-      pinia: 3.0.3(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
+      pinia: 3.0.3(typescript@5.7.3)(vue@3.5.22(typescript@5.7.3))
     transitivePeerDependencies:
       - magicast
 
@@ -7898,15 +7862,15 @@ snapshots:
 
   '@tanstack/virtual-core@3.13.2': {}
 
-  '@tanstack/vue-table@8.21.2(vue@3.5.13(typescript@5.7.3))':
+  '@tanstack/vue-table@8.21.2(vue@3.5.22(typescript@5.7.3))':
     dependencies:
       '@tanstack/table-core': 8.21.2
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.22(typescript@5.7.3)
 
-  '@tanstack/vue-virtual@3.13.2(vue@3.5.13(typescript@5.7.3))':
+  '@tanstack/vue-virtual@3.13.2(vue@3.5.22(typescript@5.7.3))':
     dependencies:
       '@tanstack/virtual-core': 3.13.2
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.22(typescript@5.7.3)
 
   '@tsconfig/node10@1.0.11':
     optional: true
@@ -8247,10 +8211,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.13(typescript@5.7.3))':
+  '@vitejs/plugin-vue@5.2.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.22(typescript@5.7.3))':
     dependencies:
       vite: 6.2.0(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1)
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.22(typescript@5.7.3)
 
   '@vitejs/plugin-vue@6.0.1(vite@7.1.12(@types/node@22.13.9)(jiti@2.6.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.8.1))(vue@3.5.22(typescript@5.7.3))':
     dependencies:
@@ -8309,14 +8273,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vue/compiler-core@3.5.13':
-    dependencies:
-      '@babel/parser': 7.26.9
-      '@vue/shared': 3.5.13
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.1
-
   '@vue/compiler-core@3.5.22':
     dependencies:
       '@babel/parser': 7.28.5
@@ -8325,28 +8281,11 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.5.13':
-    dependencies:
-      '@vue/compiler-core': 3.5.13
-      '@vue/shared': 3.5.13
-
   '@vue/compiler-dom@3.5.22':
     dependencies:
       '@vue/compiler-core': 3.5.22
       '@vue/shared': 3.5.22
 
-  '@vue/compiler-sfc@3.5.13':
-    dependencies:
-      '@babel/parser': 7.26.9
-      '@vue/compiler-core': 3.5.13
-      '@vue/compiler-dom': 3.5.13
-      '@vue/compiler-ssr': 3.5.13
-      '@vue/shared': 3.5.13
-      estree-walker: 2.0.2
-      magic-string: 0.30.17
-      postcss: 8.5.3
-      source-map-js: 1.2.1
-
   '@vue/compiler-sfc@3.5.22':
     dependencies:
       '@babel/parser': 7.28.5
@@ -8359,11 +8298,6 @@ snapshots:
       postcss: 8.5.6
       source-map-js: 1.2.1
 
-  '@vue/compiler-ssr@3.5.13':
-    dependencies:
-      '@vue/compiler-dom': 3.5.13
-      '@vue/shared': 3.5.13
-
   '@vue/compiler-ssr@3.5.22':
     dependencies:
       '@vue/compiler-dom': 3.5.22
@@ -8426,31 +8360,15 @@ snapshots:
     optionalDependencies:
       typescript: 5.7.3
 
-  '@vue/reactivity@3.5.13':
-    dependencies:
-      '@vue/shared': 3.5.13
-
   '@vue/reactivity@3.5.22':
     dependencies:
       '@vue/shared': 3.5.22
 
-  '@vue/runtime-core@3.5.13':
-    dependencies:
-      '@vue/reactivity': 3.5.13
-      '@vue/shared': 3.5.13
-
   '@vue/runtime-core@3.5.22':
     dependencies:
       '@vue/reactivity': 3.5.22
       '@vue/shared': 3.5.22
 
-  '@vue/runtime-dom@3.5.13':
-    dependencies:
-      '@vue/reactivity': 3.5.13
-      '@vue/runtime-core': 3.5.13
-      '@vue/shared': 3.5.13
-      csstype: 3.1.3
-
   '@vue/runtime-dom@3.5.22':
     dependencies:
       '@vue/reactivity': 3.5.22
@@ -8458,33 +8376,25 @@ snapshots:
       '@vue/shared': 3.5.22
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.7.3))':
-    dependencies:
-      '@vue/compiler-ssr': 3.5.13
-      '@vue/shared': 3.5.13
-      vue: 3.5.13(typescript@5.7.3)
-
   '@vue/server-renderer@3.5.22(vue@3.5.22(typescript@5.7.3))':
     dependencies:
       '@vue/compiler-ssr': 3.5.22
       '@vue/shared': 3.5.22
       vue: 3.5.22(typescript@5.7.3)
 
-  '@vue/shared@3.5.13': {}
-
   '@vue/shared@3.5.22': {}
 
-  '@vue/tsconfig@0.7.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))':
+  '@vue/tsconfig@0.7.0(typescript@5.7.3)(vue@3.5.22(typescript@5.7.3))':
     optionalDependencies:
       typescript: 5.7.3
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.22(typescript@5.7.3)
 
   '@vueuse/core@12.8.2(typescript@5.7.3)':
     dependencies:
       '@types/web-bluetooth': 0.0.21
       '@vueuse/metadata': 12.8.2
       '@vueuse/shared': 12.8.2(typescript@5.7.3)
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.22(typescript@5.7.3)
     transitivePeerDependencies:
       - typescript
 
@@ -8492,7 +8402,7 @@ snapshots:
 
   '@vueuse/shared@12.8.2(typescript@5.7.3)':
     dependencies:
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.22(typescript@5.7.3)
     transitivePeerDependencies:
       - typescript
 
@@ -10536,9 +10446,9 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-vue-next@0.477.0(vue@3.5.13(typescript@5.7.3)):
+  lucide-vue-next@0.477.0(vue@3.5.22(typescript@5.7.3)):
     dependencies:
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.22(typescript@5.7.3)
 
   magic-regexp@0.10.0:
     dependencies:
@@ -10554,10 +10464,6 @@ snapshots:
     dependencies:
       magic-string: 0.30.21
 
-  magic-string@0.30.17:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -11215,10 +11121,10 @@ snapshots:
 
   pify@2.3.0: {}
 
-  pinia@3.0.3(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)):
+  pinia@3.0.3(typescript@5.7.3)(vue@3.5.22(typescript@5.7.3)):
     dependencies:
       '@vue/devtools-api': 7.7.2
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.22(typescript@5.7.3)
     optionalDependencies:
       typescript: 5.7.3
 
@@ -11594,19 +11500,19 @@ snapshots:
     dependencies:
       jsesc: 3.0.2
 
-  reka-ui@2.0.2(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)):
+  reka-ui@2.0.2(typescript@5.7.3)(vue@3.5.22(typescript@5.7.3)):
     dependencies:
       '@floating-ui/dom': 1.6.13
-      '@floating-ui/vue': 1.1.6(vue@3.5.13(typescript@5.7.3))
+      '@floating-ui/vue': 1.1.6(vue@3.5.22(typescript@5.7.3))
       '@internationalized/date': 3.7.0
       '@internationalized/number': 3.6.0
-      '@tanstack/vue-virtual': 3.13.2(vue@3.5.13(typescript@5.7.3))
+      '@tanstack/vue-virtual': 3.13.2(vue@3.5.22(typescript@5.7.3))
       '@vueuse/core': 12.8.2(typescript@5.7.3)
       '@vueuse/shared': 12.8.2(typescript@5.7.3)
       aria-hidden: 1.2.4
       defu: 6.1.4
       ohash: 1.1.6
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.22(typescript@5.7.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - typescript
@@ -12567,9 +12473,9 @@ snapshots:
     dependencies:
       ufo: 1.6.1
 
-  vue-demi@0.14.10(vue@3.5.13(typescript@5.7.3)):
+  vue-demi@0.14.10(vue@3.5.22(typescript@5.7.3)):
     dependencies:
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.22(typescript@5.7.3)
 
   vue-devtools-stub@0.1.0: {}
 
@@ -12585,10 +12491,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)):
+  vue-router@4.5.0(vue@3.5.22(typescript@5.7.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.22(typescript@5.7.3)
 
   vue-router@4.6.3(vue@3.5.22(typescript@5.7.3)):
     dependencies:
@@ -12603,16 +12509,6 @@ snapshots:
       '@vue/language-core': 3.1.2(typescript@5.7.3)
       typescript: 5.7.3
 
-  vue@3.5.13(typescript@5.7.3):
-    dependencies:
-      '@vue/compiler-dom': 3.5.13
-      '@vue/compiler-sfc': 3.5.13
-      '@vue/runtime-dom': 3.5.13
-      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.7.3))
-      '@vue/shared': 3.5.13
-    optionalDependencies:
-      typescript: 5.7.3
-
   vue@3.5.22(typescript@5.7.3):
     dependencies:
       '@vue/compiler-dom': 3.5.22
-- 
GitLab


From 793264881ba6c90e01c9a962f7be5e12901d12e4 Mon Sep 17 00:00:00 2001
From: Bartek Wrona <wrona@syncad.com>
Date: Fri, 14 Nov 2025 00:37:14 +0100
Subject: [PATCH 084/102] Fixed env-file passing to underlying docker container
 running application

---
 Dockerfile              | 4 +++-
 scripts/run_instance.sh | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index a19e965..f5327e7 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -38,5 +38,7 @@ COPY .output/ .output/
 # Expose the Nuxt server port
 EXPOSE 8080
 
+# warning: while starting this image, external env file must be mapped as /app/mapped.env
+
 # Run the Nuxt server from the generated .output
-CMD ["node", ".output/server/index.mjs"]
+CMD ["node", "--env-file=/app/mapped.env", ".output/server/index.mjs"]
diff --git a/scripts/run_instance.sh b/scripts/run_instance.sh
index ad2d030..23a5351 100755
--- a/scripts/run_instance.sh
+++ b/scripts/run_instance.sh
@@ -1,6 +1,6 @@
 #! /bin/bash
 
-set -e
+set -xe
 
 print_help () {
     cat <<-EOF
@@ -74,7 +74,8 @@ RUN_OPTIONS=(
 )
 
 if [ -n "${CUSTOM_ENV_FILE}" ]; then
-    RUN_OPTIONS+=("-v" "${CUSTOM_ENV_FILE}:/usr/share/caddy/.env")
+    RUN_OPTIONS+=("-v" "${CUSTOM_ENV_FILE}:/app/mapped.env")
+    RUN_OPTIONS+=("--env-file" "${CUSTOM_ENV_FILE}")
 else
     echo "ERROR: Env file must be specified at command line using option: --env-file"
     exit 2
-- 
GitLab


From 2c5dbee0270eda42daf1e34bef658be6f81d6b2d Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Fri, 14 Nov 2025 13:51:03 +0100
Subject: [PATCH 085/102] Allow usage of L2 proxy

---
 src/components/TransferDetailsCard.vue  |  5 ----
 src/components/navigation/AppHeader.vue | 16 ++++++++++
 src/pages/tokens/register-account.vue   |  5 +---
 src/pages/tokens/token.vue              |  3 --
 src/utils/transaction-status.ts         | 39 +++++++++++++++----------
 5 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/components/TransferDetailsCard.vue b/src/components/TransferDetailsCard.vue
index df6912c..497ce21 100644
--- a/src/components/TransferDetailsCard.vue
+++ b/src/components/TransferDetailsCard.vue
@@ -14,7 +14,6 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
-import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
@@ -48,7 +47,6 @@ const emit = defineEmits<{
 const router = useRouter();
 const settingsStore = useSettingsStore();
 const tokensStore = useTokensStore();
-const walletStore = useWalletStore();
 
 // Form state
 const form = ref({
@@ -201,9 +199,6 @@ const handleSend = async () => {
     return;
   }
 
-  if (typeof settingsStore.settings.account === 'undefined' || walletStore.isL2Wallet)
-    throw new Error('Transferring via proxy is not supported yet. Please log in using your L1 wallet first.');
-
   try {
     isSending.value = true;
 
diff --git a/src/components/navigation/AppHeader.vue b/src/components/navigation/AppHeader.vue
index 2183547..13977e2 100644
--- a/src/components/navigation/AppHeader.vue
+++ b/src/components/navigation/AppHeader.vue
@@ -17,10 +17,26 @@ const hasAnyAccount = computed(() =>
   (settingsStore.settings.account !== undefined && walletStore.hasWallet) ||
   tokensStore.wallet !== undefined
 );
+
+const route = useRoute();
+
+const hasTokenInRoute = computed(() => {
+  return route.fullPath.includes('/tokens/');
+});
+const hasL1WalletConnected = computed(() => walletStore.hasWallet && !walletStore.isL2Wallet);
 </script>
 
 <template>
   <header class="w-full h-[60px] bg-background">
+    <div
+      v-if="hasTokenInRoute && !hasL1WalletConnected"
+      class="fixed bottom-0 z-12 select-none cursor-pointer dark:bg-blue-800 bg-blue-600 px-4 h-[20px] w-full md:w-[calc(100%-var(--sidebar-width))] flex flex-row justify-center items-center"
+      @click="walletStore.openWalletSelectModal()"
+    >
+      <span class="text-xs font-semibold text-white/90">
+        You are using L2 proxy account.
+      </span>
+    </div>
     <div class="fixed top-0 z-10 bg-background/60 backdrop-blur-sm px-4 h-[60px] border-b w-full md:w-[calc(100%-var(--sidebar-width))] flex items-center justify-between">
       <ToggleSidebar />
       <AccountSwitcher v-if="settingsStore.isLoaded && hasAnyAccount" />
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index ca9cb3a..31bab54 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -270,9 +270,6 @@ const registerHTMAccount = async () => {
       registrationData.value.walletPassword
     );
 
-    if (typeof settingsStore.settings.account === 'undefined' || walletStore.isL2Wallet)
-      throw new Error('Setting HTM Account via proxy is not supported yet. Please log in using your L1 wallet first.');
-
     const explicitWallet = await CTokensProvider.for(wax, 'owner', false);
 
     // Wait for transaction status
@@ -305,7 +302,7 @@ const registerHTMAccount = async () => {
 
     // After successful registration, redirect to login
     showRegistrationForm.value = false;
-    showHTMLogin();
+    showLoginSuccess.value = true;
   } catch (error) {
     toastError('Failed to create HTM account', error);
   } finally {
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index e10397c..8ed8203 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -368,9 +368,6 @@ const handleTransfer = async () => {
     return;
   }
 
-  if (typeof settingsStore.settings.account === 'undefined' || walletStore.isL2Wallet)
-    throw new Error('Transferring via proxy is not supported yet. Please log in using your L1 wallet first.');
-
   try {
     isTransferring.value = true;
 
diff --git a/src/utils/transaction-status.ts b/src/utils/transaction-status.ts
index 601a072..4789b59 100644
--- a/src/utils/transaction-status.ts
+++ b/src/utils/transaction-status.ts
@@ -84,12 +84,10 @@ const broadcastHtmOperation = async (
   const wax = await getWax();
   const walletStore = useWalletStore();
 
-  // Remove later on. No checks for other wallets or any connection type here as users may not be connected yet, but want to register an account
-  if (walletStore.isL2Wallet)
-    throw new Error('HTM transactions are not supported with Layer 2 wallets at this time.');
+  const hasL1Wallet = typeof settingsStore.settings.account !== 'undefined' && !walletStore.isL2Wallet;
 
   // Set proxy account for HTM transactions
-  HtmTransaction.HiveProxyAccount = settingsStore.settings.account!;
+  HtmTransaction.HiveProxyAccount = hasL1Wallet ? settingsStore.settings.account! : 'htm.proxy'; // TODO: Move this to .env config later
 
   // Create Layer 2 HTM transaction for user signup
   const l2Transaction = new HtmTransaction(wax);
@@ -101,28 +99,39 @@ const broadcastHtmOperation = async (
 
   // We are in the scope of the automated function for retrieving status of HTM transactions.
   // Therefore, we must ensure that no custom, injected HTM operations are mixed with proper, observable operations in the same transaction.
-  for(const op of l1Transaction.transaction.operations)
-  {if (op.custom_json_operation?.id === PROTOCOL_OPERATION_ID)
-    throw new Error('Custom, injected HTM operations cannot be mixed with other operations in the same transaction.');
+  for(const op of l1Transaction.transaction.operations) {
+    if (op.custom_json_operation?.id === PROTOCOL_OPERATION_ID)
+      throw new Error('Custom, injected HTM operations cannot be mixed with other operations in the same transaction.');
   }
 
+  // TODO: Add specific command to check if active authority is required
+  const requiresActive = (l2Transaction.toLayer1Operation().custom_json_operation?.required_auths.length ?? 0) > 0;
+
+  if (requiresActive && hasL1Wallet)
+    throw new Error('Requested active authority action - involving transfers on L1 Hive blockchain. This action is not supported by proxy. Please log in using your L1 wallet first.');
+
   await (l2Wallet ?? tokensStore.wallet!).signTransaction(l2Transaction);
 
   const l1Op = l2Transaction.toLayer1Operation();
 
   l1Transaction.pushOperation(l1Op);
 
-  if (!walletStore.wallet)
-    throw new Error('No wallet available for signing the transaction. Currently, you are required to connect a Layer 1 wallet to perform HTM transactions.');
+  if (hasL1Wallet) {
+    // Sign Layer 1 transaction with the Hive active key
+    await walletStore.createWalletFor(settingsStore.settings, l1Op.custom_json_operation!.required_auths.length > 0 ? 'active' : 'posting');
+    await walletStore.wallet!.signTransaction(l1Transaction);
 
-  // Sign Layer 1 transaction with the Hive active key
-  await walletStore.createWalletFor(settingsStore.settings, l1Op.custom_json_operation!.required_auths.length > 0 ? 'active' : 'posting');
-  await walletStore.wallet!.signTransaction(l1Transaction);
+    // Broadcast the transaction
+    await wax.broadcast(l1Transaction);
+  } else { // Use proxy
+    const { 'ref-id': refId } = await wax.restApi.ctokensApi.broadcastProxy({
+      trx: l2Transaction.transaction
+    });
 
-  // Broadcast the transaction
-  await wax.broadcast(l1Transaction);
+    return refId!;
+  }
 
-  return `${l1Transaction.legacy_id}_${l1Transaction.transaction.operations.length - 1}`;
+  return l2Transaction.getRefId(l1Transaction);
 };
 
 /**
-- 
GitLab


From ec57cec943afe370b7a4020c6202d164dc501e9a Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Fri, 14 Nov 2025 13:51:22 +0100
Subject: [PATCH 086/102] Add display name to google wallet QR code

---
 server/api/google-wallet.ts                 | 12 ++++++++----
 src/components/wallet/AddToGoogleWallet.vue | 13 ++++++++++++-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/server/api/google-wallet.ts b/server/api/google-wallet.ts
index 6a49312..e349fc8 100644
--- a/server/api/google-wallet.ts
+++ b/server/api/google-wallet.ts
@@ -29,6 +29,9 @@ export default defineEventHandler(async (event) => {
     return { error: 'Missing operationalPublicKey' };
 
   const credentials = init();
+  const displayName = body.displayName || 'User';
+
+  // XXX: For security reasons baseUrl should not come from the client side in production
   const barcodeValue = `${body.baseUrl}/tokens/send-token?to=${operationalPublicKey}`;
 
   console.log('Creating QR code leading to:', barcodeValue);
@@ -38,7 +41,7 @@ export default defineEventHandler(async (event) => {
 
   // Use service account email for object suffix
   const objectSuffix = `${credentials.client_email.replace(/[^\w.-]/g, '_')}`;
-  const objectId = `${issuerId}.${objectSuffix}`;
+  const objectId = `${issuerId}.${objectSuffix}.${operationalPublicKey}`;
 
   const genericObject = {
     'id': `${objectId}`,
@@ -46,6 +49,7 @@ export default defineEventHandler(async (event) => {
     'genericType': 'GENERIC_TYPE_UNSPECIFIED',
     'hexBackgroundColor': '#e62525',
     'logo': {
+      // TODO: Change this to BASE_URL/logo.png or similar later on
       'sourceUri': {
         'uri': 'https://media.licdn.com/dms/image/v2/C560BAQEj8gDq4ohhoQ/company-logo_200_200/company-logo_200_200/0/1630629402152?e=2147483647&v=beta&t=WZow0_vCgExHDDmERSks6s_teABUIkfcaQDuA5oBegM'
       }
@@ -53,19 +57,19 @@ export default defineEventHandler(async (event) => {
     'cardTitle': {
       'defaultValue': {
         'language': 'en',
-        'value': 'hallmann at HTM'
+        'value': `${displayName} at HTM`
       }
     },
     'subheader': {
       'defaultValue': {
         'language': 'en',
-        'value': 'HTM Account'
+        'value': 'HTM Operational Key'
       }
     },
     'header': {
       'defaultValue': {
         'language': 'en',
-        'value': 'hallmann'
+        'value': 'Operational Key for HTM'
       }
     },
     'barcode': {
diff --git a/src/components/wallet/AddToGoogleWallet.vue b/src/components/wallet/AddToGoogleWallet.vue
index 02808bf..fe81429 100644
--- a/src/components/wallet/AddToGoogleWallet.vue
+++ b/src/components/wallet/AddToGoogleWallet.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 
 import { Button } from '@/components/ui/button';
+import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
@@ -12,13 +13,23 @@ const addToGoogleWallet = async () => {
   googleWalletLoading.value = true;
 
   try {
+    const wax = await getWax();
+
     const operationalPublicKey = CTokensProvider.getOperationalPublicKey();
+    if (!operationalPublicKey)
+      throw new Error('Operational public key not found');
+
+    const { metadata } = await wax.restApi.ctokensApi.users({ user: operationalPublicKey });
     const baseUrl = window.location.origin;
     const res = await fetch('/api/google-wallet', {
       method: 'POST',
 
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ operationalPublicKey, baseUrl })
+      body: JSON.stringify({
+        operationalPublicKey,
+        displayName: metadata?.name || 'User',
+        baseUrl
+      })
     });
     const data = await res.text();
     const parsed = JSON.parse(data);
-- 
GitLab


From a844b755c1f4fa905d823913d6d900a851be8ff9 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Fri, 14 Nov 2025 16:13:10 +0100
Subject: [PATCH 087/102] Fix logging in using L2

---
 src/components/HTMLoginContent.vue           |  50 ++++-
 src/components/HTMLoginForm.vue              |   2 -
 src/components/HTMProvidePasswordContent.vue | 111 ++++++++++
 src/components/TransferDetailsCard.vue       |   9 +-
 src/components/wallet/HTMProvidePassword.vue |  90 +-------
 src/pages/tokens/edit.vue                    |   2 +-
 src/pages/tokens/register-account.vue        | 218 ++++++++++++++++++-
 src/pages/tokens/send-token.vue              |  13 +-
 src/stores/wax.store.ts                      |   6 +
 src/utils/transaction-status.ts              |  22 +-
 src/utils/wallet/ctokens/signer.ts           |   2 +-
 11 files changed, 400 insertions(+), 125 deletions(-)
 create mode 100644 src/components/HTMProvidePasswordContent.vue

diff --git a/src/components/HTMLoginContent.vue b/src/components/HTMLoginContent.vue
index 90a3e32..4170ba6 100644
--- a/src/components/HTMLoginContent.vue
+++ b/src/components/HTMLoginContent.vue
@@ -4,6 +4,11 @@ import { ref } from 'vue';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { useSettingsStore, UsedWallet } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
+import { useUserStore } from '@/stores/user.store';
+import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
@@ -25,6 +30,34 @@ const operationalKey = ref('');
 const password = ref('');
 const repeatPassword = ref('');
 
+const walletStore = useWalletStore();
+const settingsStore = useSettingsStore();
+const userStore = useUserStore();
+const tokensStore = useTokensStore();
+
+const handleConditionalSiteLogin = async (operationalKey: string) => {
+  const wax = await getWax();
+
+  if (walletStore.wallet !== undefined && !walletStore.isL2Wallet) {
+    // Already logged in using L1 wallet, so just add another layer on top of that
+    await tokensStore.reset(await CTokensProvider.for(wax, 'posting'));
+
+    return;
+  }
+
+  // Not logged in using any wallet so allow user log in using HTM wallet
+
+  // Set settings with the operational key as account and CTOKENS wallet
+  settingsStore.setSettings({
+    account: operationalKey,
+    wallet: UsedWallet.CTOKENS_IMPLEMENTATION
+  });
+
+  // Create wallet provider and parse user data
+  await walletStore.createWalletFor(settingsStore.settings, 'posting');
+  await userStore.parseUserData(operationalKey);
+};
+
 const connect = async () => {
   try {
     if (password.value !== repeatPassword.value) {
@@ -48,6 +81,8 @@ const connect = async () => {
 
     await CTokensProvider.login(password.value);
 
+    await handleConditionalSiteLogin(operational);
+
     emit('setaccount', operational);
   } catch (error) {
     toastError('Failed to connect to HTM', error);
@@ -67,11 +102,11 @@ const connect = async () => {
         v-else
         class="text-sm text-muted-foreground"
       >
-        Create your HTM wallet by providing your keys and setting a password:
+        Connect your HTM wallet by providing your keys and setting a password:
       </p>
 
-      <div class="space-y-2">
-        <div class="space-y-1">
+      <div>
+        <div class="mb-1 space-y-1">
           <Label for="operationalKey">Operational Private Key</Label>
           <Input
             id="operationalKey"
@@ -80,7 +115,7 @@ const connect = async () => {
             placeholder="Enter your operational key"
           />
         </div>
-        <div class="space-y-1">
+        <div class="mb-5 space-y-1">
           <Label for="managementKey">Management Private Key (optional)</Label>
           <Input
             id="managementKey"
@@ -89,7 +124,8 @@ const connect = async () => {
             placeholder="Enter your management key"
           />
         </div>
-        <div class="space-y-1">
+        <Separator />
+        <div class="mt-3 mb-1 space-y-1">
           <Label for="password">Password</Label>
           <Input
             id="password"
@@ -111,7 +147,7 @@ const connect = async () => {
 
       <div v-if="showSteps">
         <p>Step 2: Click this button to verify your configuration and connect to the wallet:</p>
-        <div class="flex justify-center">
+        <div class="flex justify-center mt-4">
           <Button
             :disabled="isLoading"
             variant="outline"
@@ -130,7 +166,7 @@ const connect = async () => {
           @click="connect"
         >
           <span v-if="isLoading">Creating Wallet...</span>
-          <span v-else>Create HTM Wallet</span>
+          <span v-else>Import to HTM Wallet</span>
         </Button>
       </div>
     </div>
diff --git a/src/components/HTMLoginForm.vue b/src/components/HTMLoginForm.vue
index c00f94d..016c317 100644
--- a/src/components/HTMLoginForm.vue
+++ b/src/components/HTMLoginForm.vue
@@ -107,8 +107,6 @@ const handleConditionalSiteLogin = async (operationalKey: string) => {
 // Handle account creation from HTMLoginContent
 const handleSetAccount = async (account: string) => {
   try {
-    await handleConditionalSiteLogin(account);
-
     toast.success('HTM wallet created successfully!');
     hasStoredHTMWallet.value = true;
     switchToLoginMode();
diff --git a/src/components/HTMProvidePasswordContent.vue b/src/components/HTMProvidePasswordContent.vue
new file mode 100644
index 0000000..eec1671
--- /dev/null
+++ b/src/components/HTMProvidePasswordContent.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { toast } from 'vue-sonner';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { UsedWallet, useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
+import { useUserStore } from '@/stores/user.store';
+import { useWalletStore } from '@/stores/wallet.store';
+import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+const props = defineProps({
+  embed: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['success']);
+
+const router = useRouter();
+const walletStore = useWalletStore();
+const userStore = useUserStore();
+const settingsStore = useSettingsStore();
+const tokensStore = useTokensStore();
+
+const isLoading = ref(false);
+
+const password = ref('');
+
+const connect = async () => {
+  try {
+    isLoading.value = true;
+
+    const wax = await getWax();
+
+    await CTokensProvider.login(password.value);
+
+    try {
+      if (walletStore.hasWallet) {
+        const ctokensWallet = await CTokensProvider.for(wax, 'posting');
+
+        await tokensStore.reset(ctokensWallet);
+      } else {
+        await walletStore.createWalletFor({
+          account: CTokensProvider.getOperationalPublicKey(),
+          wallet: UsedWallet.CTOKENS_IMPLEMENTATION
+        }, 'posting');
+        if (settingsStore.settings?.account)
+          await userStore.parseUserData(settingsStore.settings.account);
+      }
+
+      toast.success('Logged in successfully!');
+      emit('success');
+    } catch (error) {
+      toastError('Failed to create wallet', error);
+    }
+  } catch (error) {
+    toastError('Failed to connect to HTM', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const openRegistration = () => {
+  close();
+  router.push('/tokens/register-account');
+};
+</script>
+
+<template>
+  <div class="space-y-4">
+    <p>Provide your HTM wallet password:</p>
+
+    <div class="space-y-2">
+      <div class="space-y-1">
+        <Label for="password">Password</Label>
+        <Input
+          id="password"
+          v-model="password"
+          type="password"
+          placeholder="Enter a password to encrypt the wallet"
+        />
+      </div>
+    </div>
+
+    <div class="flex justify-center">
+      <Button
+        :disabled="isLoading"
+        variant="outline"
+        size="lg"
+        :class="props.embed ? 'w-full' : 'px-8 py-4 border-[2px] border-[#FBA510]'"
+        @click="connect"
+      >
+        <span class="text-md font-bold">Connect</span>
+      </Button>
+    </div>
+    <Button
+      v-if="!props.embed"
+      variant="link"
+      class="w-full justify-center text-sm"
+      @click="openRegistration"
+    >
+      Create a new HTM wallet instead
+    </Button>
+  </div>
+</template>
diff --git a/src/components/TransferDetailsCard.vue b/src/components/TransferDetailsCard.vue
index 497ce21..0513929 100644
--- a/src/components/TransferDetailsCard.vue
+++ b/src/components/TransferDetailsCard.vue
@@ -12,7 +12,6 @@ import TransferCompletedSummary from '@/components/TransferCompletedSummary.vue'
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
-import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
@@ -45,7 +44,6 @@ const emit = defineEmits<{
 }>();
 
 const router = useRouter();
-const settingsStore = useSettingsStore();
 const tokensStore = useTokensStore();
 
 // Form state
@@ -65,7 +63,7 @@ const transferCompleted = ref(false);
 const sentSummary = ref<{ amount: string; tokenLabel: string; receiver: string; remainingBalance?: string; timestamp?: string } | null>(null);
 
 // Check if user is logged in
-const isLoggedIn = computed(() => !!settingsStore.settings.account);
+const isLoggedIn = computed(() => !!tokensStore.wallet);
 
 const tokenName = computed(() => {
   if (!props.tokenData) return 'Unknown Token';
@@ -181,10 +179,7 @@ const handleSend = async () => {
   if (!isLoggedIn.value || !CTokensProvider.getOperationalPublicKey()) {
     toast.error('Please log in to your wallet first');
     router.push({
-      path: '/',
-      query: {
-        redirect: router.currentRoute.value.fullPath
-      }
+      path: '/tokens/list'
     });
     return;
   }
diff --git a/src/components/wallet/HTMProvidePassword.vue b/src/components/wallet/HTMProvidePassword.vue
index 257e3f6..85f907e 100644
--- a/src/components/wallet/HTMProvidePassword.vue
+++ b/src/components/wallet/HTMProvidePassword.vue
@@ -1,72 +1,21 @@
 <script setup lang="ts">
 import { mdiClose } from '@mdi/js';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { toast } from 'vue-sonner';
 
-import { Button } from '@/components/ui/button';
+import HTMProvidePasswordContent from '@/components/HTMProvidePasswordContent.vue';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { UsedWallet, getWalletIcon, useSettingsStore } from '@/stores/settings.store';
+import { UsedWallet, getWalletIcon } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
-import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
-import { getWax } from '@/stores/wax.store';
-import { toastError } from '@/utils/parse-error';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-const router = useRouter();
 const walletStore = useWalletStore();
-const userStore = useUserStore();
-const settingsStore = useSettingsStore();
 const tokensStore = useTokensStore();
 
-const isLoading = ref(false);
-
 const close = (ignoreLogIn = false) => {
   if (ignoreLogIn) // Do not show log in dialog every time if user ignored it
     tokensStore.ignoreLogIn = true;
 
   walletStore.isProvideWalletPasswordModalOpen = false;
 };
-
-const password = ref('');
-
-const connect = async () => {
-  try {
-    isLoading.value = true;
-
-    const wax = await getWax();
-
-    await CTokensProvider.login(password.value);
-
-    try {
-      if (walletStore.hasWallet) {
-        const ctokensWallet = await CTokensProvider.for(wax, 'posting');
-
-        await tokensStore.reset(ctokensWallet);
-      } else {
-        await walletStore.createWalletFor(settingsStore.settings, 'posting');
-        await userStore.parseUserData(settingsStore.settings!.account!);
-      }
-
-      toast.success('Logged in successfully!');
-      close(false);
-    } catch (error) {
-      toastError('Failed to create wallet', error);
-    }
-  } catch (error) {
-    toastError('Failed to connect to HTM', error);
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-const openRegistration = () => {
-  close();
-  router.push('/tokens/register-account');
-};
 </script>
 
 <template>
@@ -104,40 +53,7 @@ const openRegistration = () => {
           <CardDescription>Follow these instructions to log into Hive Token Machine wallet</CardDescription>
         </CardHeader>
         <CardContent class="text-sm space-y-4">
-          <div class="space-y-4">
-            <p>Provide your HTM wallet password:</p>
-
-            <div class="space-y-2">
-              <div class="space-y-1">
-                <Label for="password">Password</Label>
-                <Input
-                  id="password"
-                  v-model="password"
-                  type="password"
-                  placeholder="Enter a password to encrypt the wallet"
-                />
-              </div>
-            </div>
-
-            <div class="flex justify-center">
-              <Button
-                :disabled="isLoading"
-                variant="outline"
-                size="lg"
-                class="px-8 py-4 border-[#FBA510] border-[2px]"
-                @click="connect"
-              >
-                <span class="text-md font-bold">Connect</span>
-              </Button>
-            </div>
-            <Button
-              variant="link"
-              class="w-full justify-center text-sm"
-              @click="openRegistration"
-            >
-              Create a new HTM wallet instead
-            </Button>
-          </div>
+          <HTMProvidePasswordContent @success="close()" />
         </CardContent>
         <CardFooter />
       </Card>
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index 6e5820b..5ebcc52 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -198,7 +198,7 @@ const goBack = () => {
 onMounted(async () => {
   if (!isLoggedIn.value) {
     toast.error('You must be logged in to edit tokens');
-    router.push('/');
+    router.push('/tokens/register-account');
     return;
   }
 
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index 31bab54..c169f31 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -2,6 +2,8 @@
 import {
   mdiCheckCircle,
   mdiDownload,
+  mdiInformationSlabCircle,
+  mdiLockOpen,
   mdiNumeric1Circle,
   mdiNumeric2Circle,
   mdiNumeric3Circle,
@@ -12,6 +14,8 @@ import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
+import HTMLoginContent from '@/components/HTMLoginContent.vue';
+import HTMProvidePasswordContent from '@/components/HTMProvidePasswordContent.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -35,6 +39,9 @@ const router = useRouter();
 
 const showLoginSuccess = ref(false);
 const showRegistrationForm = ref(false);
+const showLoginForm = ref(false);
+const showLoginUsingPassword = ref(false);
+const showLoginUsingOtherAccount = ref(false);
 const isLoading = ref(false);
 const hasConfirmedDownload = ref(false);
 const keysGenerated = ref(false);
@@ -195,18 +202,15 @@ const resetProcess = () => {
     managementPrivateKey: '',
     managementPublicKey: ''
   };
-  toast.info('Process reset. You can generate new keys.');
-};
-
-// Show HTM login success
-const showHTMLogin = () => {
-  showLoginSuccess.value = true;
 };
 
 // Go back to main options
 const goBack = () => {
   showLoginSuccess.value = false;
   showRegistrationForm.value = false;
+  showLoginForm.value = false;
+  showLoginUsingPassword.value = false;
+  showLoginUsingOtherAccount.value = false;
   // Reset form data
   registrationData.value = {
     name: '',
@@ -219,13 +223,23 @@ const goBack = () => {
   resetProcess();
 };
 
+// Show HTM login success
+const showHTMLogin = () => {
+  showLoginForm.value = true;
+};
+
 // Handle successful login
 const goToMyAccount = () => {
-  showLoginSuccess.value = false;
+  goBack();
   // Redirect to my balance page after successful login
   router.push('/tokens/my-balance');
 };
 
+const successShow = () => {
+  goBack();
+  showLoginSuccess.value = true;
+};
+
 // @internal
 const registerHTMAccount = async () => {
   try {
@@ -276,7 +290,7 @@ const registerHTMAccount = async () => {
     await waitForTransactionStatus(
       () => ([{
         user_signup_operation: {
-          hive_account: settingsStore.settings.account,
+          hive_account: walletStore.isL2Wallet ? undefined : settingsStore.settings.account,
           management_key: keys.management!,
           operational_key: keys.operational
         }
@@ -301,8 +315,7 @@ const registerHTMAccount = async () => {
     tokensStore.reset(await CTokensProvider.for(wax, 'posting', false));
 
     // After successful registration, redirect to login
-    showRegistrationForm.value = false;
-    showLoginSuccess.value = true;
+    successShow();
   } catch (error) {
     toastError('Failed to create HTM account', error);
   } finally {
@@ -310,8 +323,16 @@ const registerHTMAccount = async () => {
   }
 };
 
+const canLogIntoL2 = computed(() => {
+  return !!CTokensProvider.getOperationalPublicKey();
+});
+
+const isLoggedIntoL2 = computed(() => {
+  return !!tokensStore.wallet;
+});
+
 onMounted(() => {
-  if (walletStore.wallet) {
+  if (walletStore.wallet && !walletStore.isL2Wallet) {
     // If already logged in using L1 wallet,
     // show the registration page in case someone wants to create another account
     showRegistrationForm.value = true;
@@ -321,9 +342,182 @@ onMounted(() => {
 
 <template>
   <div class="container mx-auto py-12 px-4 max-w-2xl">
+    <Card
+      v-if="showLoginForm && canLogIntoL2 && !showLoginUsingPassword && !showLoginUsingOtherAccount"
+      class="w-full"
+    >
+      <CardContent class="pt-6">
+        <div class="flex flex-col items-center text-center space-y-6">
+          <!-- Info Icon -->
+          <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center">
+            <svg
+              width="32"
+              height="32"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="text-blue-600 dark:text-blue-400"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiInformationSlabCircle"
+              />
+            </svg>
+          </div>
+
+          <div class="space-y-2">
+            <h2 class="text-2xl font-semibold text-blue-600 dark:text-blue-400">
+              Detected existing HTM Wallet
+            </h2>
+            <p class="text-muted-foreground">
+              You already have an HTM account.
+              You can log in using your wallet password or choose to log in to a different account.
+            </p>
+          </div>
+
+          <div v-if="!isLoggedIntoL2" class="flex flex-col w-full space-y-6">
+            <Button
+              size="lg"
+              class="mt-4 w-full"
+              @click="showLoginUsingPassword = true"
+            >
+              Provide your password
+            </Button>
+
+            <div class="relative w-full">
+              <div class="absolute inset-0 flex items-center">
+                <span class="w-full border-t" />
+              </div>
+              <div class="relative flex justify-center text-xs uppercase">
+                <span class="bg-background px-2 text-muted-foreground">
+                  Or
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Action Button -->
+          <div class="flex flex-row gap-4 w-full">
+            <Button
+              variant="outline"
+              size="lg"
+              class="mt-4 flex-1"
+              @click="goBack()"
+            >
+              Go Back
+            </Button>
+            <Button
+              size="lg"
+              class="mt-4 flex-1"
+              @click="showLoginUsingOtherAccount = true"
+            >
+              Log in to other account
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card
+      v-else-if="showLoginUsingPassword"
+      class="w-full"
+    >
+      <CardContent class="pt-6">
+        <div class="flex flex-col items-center text-center space-y-6">
+          <!-- Info Icon -->
+          <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center">
+            <svg
+              width="32"
+              height="32"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="text-blue-600 dark:text-blue-400"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiLockOpen"
+              />
+            </svg>
+          </div>
+
+          <div class="space-y-2">
+            <h2 class="text-2xl font-semibold text-blue-600 dark:text-blue-400">
+              Unlock your wallet
+            </h2>
+            <p class="text-muted-foreground">
+              You already have an HTM account.
+              Please login using your wallet password to access your tokens and manage your account.
+            </p>
+          </div>
+
+          <HTMProvidePasswordContent embed @success="successShow()" />
+
+          <!-- Action Button -->
+          <div class="flex flex-row gap-4 w-full">
+            <Button
+              variant="outline"
+              size="lg"
+              class="mt-4 flex-1"
+              @click="goBack()"
+            >
+              Go Back
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card
+      v-else-if="showLoginForm || showLoginUsingOtherAccount"
+      class="w-full"
+    >
+      <CardContent class="pt-6">
+        <div class="flex flex-col items-center space-y-6">
+          <!-- Info Icon -->
+          <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center">
+            <svg
+              width="32"
+              height="32"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="text-blue-600 dark:text-blue-400"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiLockOpen"
+              />
+            </svg>
+          </div>
+
+          <div class="space-y-2 text-center">
+            <h2 class="text-2xl font-semibold text-blue-600 dark:text-blue-400">
+              Log in to your HTM account
+            </h2>
+            <p class="text-muted-foreground">
+              You already have an HTM account.
+              Provide your credentials to import them to the underlying wallet and access your tokens and manage your account.
+            </p>
+          </div>
+
+          <HTMLoginContent :show-steps="false" @setaccount="successShow()" />
+
+          <!-- Action Button -->
+          <div class="flex flex-row gap-4 w-full">
+            <Button
+              variant="outline"
+              size="lg"
+              class="mt-4 flex-1"
+              @click="goBack()"
+            >
+              Go Back
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+
     <!-- Show HTM Login Success -->
     <Card
-      v-if="showLoginSuccess"
+      v-else-if="showLoginSuccess"
       class="w-full"
     >
       <CardContent class="pt-6">
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index c7dda5b..58ee354 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -33,7 +33,7 @@ const isLoading = ref(true);
 
 // Form state
 const form = ref({
-  nai: '',
+  assetNum: '',
   precision: '',
   amount: '',
   memo: ''
@@ -46,7 +46,7 @@ const selectedTokenAssetNum = ref<string>('');
 const assetNum = computed(() => {
   if (route.query['asset-num']) return route.query['asset-num'] as string;
   if (selectedTokenAssetNum.value) return selectedTokenAssetNum.value;
-  return form.value.nai;
+  return form.value.assetNum;
 });
 const precision = computed(() => route.query.precision as string || form.value.precision);
 const receiverKey = computed(() => route.query.to as string || CTokensProvider.getOperationalPublicKey());
@@ -54,7 +54,7 @@ const queryAmount = computed(() => route.query.amount as string | undefined);
 const queryMemo = computed(() => route.query.memo as string | undefined);
 
 // Check if NAI is provided in URL
-const hasNaiFromUrl = computed(() => !!route.query.nai);
+const hasNaiFromUrl = computed(() => !!route.query['asset-num']);
 
 // Check if we're in receive mode (when 'to' is in query params)
 // When 'to' is present, we're actually sending (confirming a transfer request)
@@ -84,7 +84,7 @@ const shouldShowTokenSelector = computed(() => {
 const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
 
 // Check if user is logged in
-const isLoggedIn = computed(() => !!settingsStore.settings.account);
+const isLoggedIn = computed(() => !!tokensStore.wallet);
 
 // Receiver display helpers (compact UI)
 const receiverDisplayName = computed(() => {
@@ -114,7 +114,7 @@ watch(selectedTokenAssetNum, async (newAssetNum, oldAssetNum) => {
     const balance = tokensStore.balances.find(b => String(b.asset_num) === newAssetNum);
     if (balance) {
       form.value.precision = balance.precision?.toString() || '';
-      form.value.nai = balance.nai!;
+      form.value.assetNum = balance.asset_num!.toString();
       await loadTokenDetails();
     } else
       token.value = null;
@@ -180,7 +180,7 @@ onMounted(async () => {
   }
 
   // Initialize form with query params
-  form.value.nai = route.query.nai as string || '';
+  form.value.assetNum = route.query['asset-num'] as string || '';
   selectedTokenAssetNum.value = route.query['asset-num'] as string || '';
   form.value.precision = route.query.precision as string || '';
 
@@ -290,7 +290,6 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
 
       <!-- Send Form -->
       <div
-        v-else-if="(token && isLoggedIn) || isReceiveMode"
         class="space-y-6"
       >
         <!-- Page Title -->
diff --git a/src/stores/wax.store.ts b/src/stores/wax.store.ts
index 26af5b9..4e89d6f 100644
--- a/src/stores/wax.store.ts
+++ b/src/stores/wax.store.ts
@@ -19,6 +19,12 @@ export interface WaxApi {
         };
       };
     };
+    get_hardfork_properties: {
+      params: {};
+      result: {
+        last_hardfork: number;
+      };
+    };
   };
   bridge: {
     get_profile: {
diff --git a/src/utils/transaction-status.ts b/src/utils/transaction-status.ts
index 4789b59..25cff78 100644
--- a/src/utils/transaction-status.ts
+++ b/src/utils/transaction-status.ts
@@ -75,6 +75,21 @@ export async function pollTransactionStatus (
   };
 }
 
+let isChainSerializationVerified = false;
+const _verifyChainSerialization = async () => {
+  if (isChainSerializationVerified) return;
+
+  const wax = await getWax();
+
+  const { last_hardfork } = await wax.api.database_api.get_hardfork_properties({});
+
+  HtmTransaction.USE_LEGACY_HIVE_SERIALIZATION = last_hardfork < 25;
+  if (HtmTransaction.USE_LEGACY_HIVE_SERIALIZATION)
+    console.warn('Using LEGACY HIVE SERIALIZATION for L1 transactions');
+
+  isChainSerializationVerified = true;
+};
+
 const broadcastHtmOperation = async (
   operationsFactory: (tx: ITransaction) => htm_operation[],
   l2Wallet: AEncryptionProvider | undefined = undefined
@@ -107,7 +122,7 @@ const broadcastHtmOperation = async (
   // TODO: Add specific command to check if active authority is required
   const requiresActive = (l2Transaction.toLayer1Operation().custom_json_operation?.required_auths.length ?? 0) > 0;
 
-  if (requiresActive && hasL1Wallet)
+  if (requiresActive && !hasL1Wallet)
     throw new Error('Requested active authority action - involving transfers on L1 Hive blockchain. This action is not supported by proxy. Please log in using your L1 wallet first.');
 
   await (l2Wallet ?? tokensStore.wallet!).signTransaction(l2Transaction);
@@ -131,6 +146,11 @@ const broadcastHtmOperation = async (
     return refId!;
   }
 
+  // await verifyChainSerialization();
+  // XXX: For some reason even though proper hardfork is applied, still need to set legacy serialization to true...
+  HtmTransaction.USE_LEGACY_HIVE_SERIALIZATION = true;
+
+  // Return HTM transaction reference ID in proper serialization (legacy_id / id)
   return l2Transaction.getRefId(l1Transaction);
 };
 
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index 5acfdea..373b949 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -67,7 +67,7 @@ export class CTokensProvider extends AEncryptionProvider {
     this.extendedChain = chain.extendRest(RestApi);
     this.extendedChain.restApi.ctokensApi.endpointUrl = endpointUrl;
 
-    const publicKey = role === 'owner' ? CTokensProvider.lastOperationalPk : CTokensProvider.lastManagementPk;
+    const publicKey = role === 'owner' ? CTokensProvider.lastManagementPk : CTokensProvider.lastOperationalPk;
 
     if (!publicKey)
       throw new WaxCTokensEncryptionProviderError('The requested wallet does not have a public key.');
-- 
GitLab


From 86a704cdd847d710d56a3f686a4a52a9bf8d7bd9 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Mon, 17 Nov 2025 16:26:34 +0100
Subject: [PATCH 088/102] Use proper chain serialization in transaction status

---
 src/utils/transaction-status.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/utils/transaction-status.ts b/src/utils/transaction-status.ts
index 25cff78..8d99ac1 100644
--- a/src/utils/transaction-status.ts
+++ b/src/utils/transaction-status.ts
@@ -76,7 +76,7 @@ export async function pollTransactionStatus (
 }
 
 let isChainSerializationVerified = false;
-const _verifyChainSerialization = async () => {
+const verifyChainSerialization = async () => {
   if (isChainSerializationVerified) return;
 
   const wax = await getWax();
@@ -146,9 +146,9 @@ const broadcastHtmOperation = async (
     return refId!;
   }
 
-  // await verifyChainSerialization();
+  await verifyChainSerialization();
   // XXX: For some reason even though proper hardfork is applied, still need to set legacy serialization to true...
-  HtmTransaction.USE_LEGACY_HIVE_SERIALIZATION = true;
+  // HtmTransaction.USE_LEGACY_HIVE_SERIALIZATION = true;
 
   // Return HTM transaction reference ID in proper serialization (legacy_id / id)
   return l2Transaction.getRefId(l1Transaction);
-- 
GitLab


From 0a3f439f2e838e8ee8165ffc474d8f200212fc45 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Tue, 18 Nov 2025 10:54:55 +0100
Subject: [PATCH 089/102] Always expect new serialization - post HF27

---
 src/components/navigation/AppHeader.vue |  2 +-
 src/utils/nai-tokens.ts                 |  4 +++-
 src/utils/transaction-status.ts         | 19 -------------------
 3 files changed, 4 insertions(+), 21 deletions(-)

diff --git a/src/components/navigation/AppHeader.vue b/src/components/navigation/AppHeader.vue
index 13977e2..f2841b8 100644
--- a/src/components/navigation/AppHeader.vue
+++ b/src/components/navigation/AppHeader.vue
@@ -34,7 +34,7 @@ const hasL1WalletConnected = computed(() => walletStore.hasWallet && !walletStor
       @click="walletStore.openWalletSelectModal()"
     >
       <span class="text-xs font-semibold text-white/90">
-        You are using L2 proxy account.
+        You are using L1 proxy account.
       </span>
     </div>
     <div class="fixed top-0 z-10 bg-background/60 backdrop-blur-sm px-4 h-[60px] border-b w-full md:w-[calc(100%-var(--sidebar-width))] flex items-center justify-between">
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index 7fdb011..b9b2fe4 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -1,4 +1,6 @@
 // Helper functions for token transformation
+// We should move these to wax to avoid duplication across projects
+
 // Note: We are using BigInt to both: handle large numbers and avoid floating point precision issues during bitwise operations.
 export const isVesting = (nai: string, precision: number): boolean =>
   (((BigInt(nai.slice(2, -1)) << 5n) | 0x10n | BigInt(precision)) & 0x20n) !== 0n;
@@ -69,7 +71,7 @@ export const toVesting = (nai: string, precision: number): string => {
   return `@@${naiVesting}${dammDigit(naiVesting)}`;
 };
 
-/// @alias toVesting
+/// @alias toVesting - those two functions are identical as liquid/vesting is just a bit flag flip
 export const toLiquid = (nai: string, precision: number): string => toVesting(nai, precision);
 
 /**
diff --git a/src/utils/transaction-status.ts b/src/utils/transaction-status.ts
index 8d99ac1..2f3cc15 100644
--- a/src/utils/transaction-status.ts
+++ b/src/utils/transaction-status.ts
@@ -75,21 +75,6 @@ export async function pollTransactionStatus (
   };
 }
 
-let isChainSerializationVerified = false;
-const verifyChainSerialization = async () => {
-  if (isChainSerializationVerified) return;
-
-  const wax = await getWax();
-
-  const { last_hardfork } = await wax.api.database_api.get_hardfork_properties({});
-
-  HtmTransaction.USE_LEGACY_HIVE_SERIALIZATION = last_hardfork < 25;
-  if (HtmTransaction.USE_LEGACY_HIVE_SERIALIZATION)
-    console.warn('Using LEGACY HIVE SERIALIZATION for L1 transactions');
-
-  isChainSerializationVerified = true;
-};
-
 const broadcastHtmOperation = async (
   operationsFactory: (tx: ITransaction) => htm_operation[],
   l2Wallet: AEncryptionProvider | undefined = undefined
@@ -146,10 +131,6 @@ const broadcastHtmOperation = async (
     return refId!;
   }
 
-  await verifyChainSerialization();
-  // XXX: For some reason even though proper hardfork is applied, still need to set legacy serialization to true...
-  // HtmTransaction.USE_LEGACY_HIVE_SERIALIZATION = true;
-
   // Return HTM transaction reference ID in proper serialization (legacy_id / id)
   return l2Transaction.getRefId(l1Transaction);
 };
-- 
GitLab


From 4f9e84fc831584a68b9e6c052efcd1205b038609 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Tue, 18 Nov 2025 17:49:16 +0100
Subject: [PATCH 090/102] Refactor tokens store

Tokens store should be the only place where raw API types are imported
and accepted
---
 src/components/HTMTokenCard.vue         |   6 +-
 src/components/HTMTokenPreview.vue      |  79 +---
 src/components/TransferDetailsCard.vue  |  37 +-
 src/components/tokens/QRCodeCard.vue    |  12 +-
 src/components/tokens/TokenSelector.vue |  90 ++--
 src/pages/tokens/edit.vue               |   5 -
 src/pages/tokens/list.vue               |  50 +-
 src/pages/tokens/my-balance.vue         | 595 ++++--------------------
 src/pages/tokens/my-tokens.vue          |   6 +-
 src/pages/tokens/send-token.vue         |  17 +-
 src/pages/tokens/token.vue              | 280 ++++-------
 src/stores/tokens.store.ts              | 485 +++++++++----------
 12 files changed, 526 insertions(+), 1136 deletions(-)

diff --git a/src/components/HTMTokenCard.vue b/src/components/HTMTokenCard.vue
index 22edf6b..24de866 100644
--- a/src/components/HTMTokenCard.vue
+++ b/src/components/HTMTokenCard.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import HTMTokenPreview from '@/components/HTMTokenPreview.vue';
-import type { CTokenDisplay } from '@/stores/tokens.store';
+import type { CTokenDefinitionDisplay } from '@/stores/tokens.store';
 
 interface Props {
-  token: CTokenDisplay;
+  token: CTokenDefinitionDisplay;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-  click: [token: CTokenDisplay];
+  click: [token: CTokenDefinitionDisplay];
 }>();
 
 // Handle card click
diff --git a/src/components/HTMTokenPreview.vue b/src/components/HTMTokenPreview.vue
index 22bbeef..4f13e7a 100644
--- a/src/components/HTMTokenPreview.vue
+++ b/src/components/HTMTokenPreview.vue
@@ -1,33 +1,10 @@
 <script setup lang="ts">
-import type { IWaxBaseInterface } from '@hiveio/wax';
-import { computed, onMounted, ref } from 'vue';
-
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import type { CTokenDisplay } from '@/stores/tokens.store';
-import { getWax } from '@/stores/wax.store';
-
-interface TokenPreviewData {
-  name?: string;
-  symbol?: string;
-  description?: string;
-  nai?: string;
-  image?: string;
-  totalSupply?: string | bigint;
-  maxSupply?: string | bigint;
-  displayTotalSupply?: string;
-  displayMaxSupply?: string;
-  precision?: number | string;
-  capped?: boolean;
-  isNft?: boolean;
-  isStaked?: boolean;
-  othersCanStake?: boolean;
-  othersCanUnstake?: boolean;
-  ownerPublicKey?: string;
-}
+import type { CTokenDefinitionDisplay } from '@/stores/tokens.store';
 
 interface Props {
-  token: TokenPreviewData | CTokenDisplay;
+  token: CTokenDefinitionDisplay;
   clickable?: boolean;
   showViewIcon?: boolean;
 }
@@ -38,11 +15,11 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  click: [token: TokenPreviewData | CTokenDisplay];
+  click: [token: CTokenDefinitionDisplay];
 }>();
 
 // Get avatar fallback text
-const getAvatarFallback = (token: TokenPreviewData | CTokenDisplay): string => {
+const getAvatarFallback = (token: CTokenDefinitionDisplay): string => {
   if (token.symbol)
     return token.symbol.slice(0, 2).toUpperCase();
 
@@ -60,50 +37,6 @@ const handleClick = () => {
   if (props.clickable)
     emit('click', props.token);
 };
-
-// Check if token is a full CTokenDisplay
-const isFullToken = (token: TokenPreviewData | CTokenDisplay): token is CTokenDisplay => {
-  return 'displayTotalSupply' in token && 'displayMaxSupply' in token;
-};
-
-const formatter = ref<IWaxBaseInterface['formatter'] | undefined>(undefined);
-
-// Format number with precision
-const formatTokenAmount = (amount: string | bigint | undefined, precision: number | string = 3): string => {
-  if (!amount) return '0';
-
-  precision = typeof precision === 'string' ? parseInt(precision) : precision;
-
-  return formatter.value?.formatNumber(amount, precision) || '0';
-};
-
-const displayTotalSupply = computed(() => {
-  if (isFullToken(props.token))
-    return props.token.displayTotalSupply;
-
-  const formatted = formatTokenAmount(props.token.totalSupply, props.token.precision);
-  const symbol = props.token.symbol || props.token.name;
-  return symbol ? `${formatted} ${symbol}` : formatted;
-});
-
-const displayMaxSupply = computed(() => {
-  if (isFullToken(props.token))
-    return props.token.displayMaxSupply;
-
-  const formatted = formatTokenAmount(props.token.maxSupply, props.token.precision);
-  const symbol = props.token.symbol || props.token.name;
-  return symbol ? `${formatted} ${symbol}` : formatted;
-});
-
-onMounted(async () => {
-  const wax = await getWax();
-
-  formatter.value = wax.formatter.extend({ asset: {
-    appendTokenName: false,
-    displayAsNai: false,
-    formatAmount: true
-  }});
-});
 </script>
 
 <template>
@@ -217,7 +150,7 @@ onMounted(async () => {
         <div class="flex items-center justify-between">
           <span class="text-muted-foreground">Total Supply:</span>
           <span class="font-semibold text-foreground">
-            {{ displayTotalSupply }}
+            {{ token.displayTotalSupply }}
           </span>
         </div>
 
@@ -225,7 +158,7 @@ onMounted(async () => {
           <span class="text-muted-foreground">Max Supply:</span>
           <span class="font-semibold text-foreground flex items-center gap-1">
             <template v-if="token.capped">
-              {{ displayMaxSupply }}
+              {{ token.displayMaxSupply }}
             </template>
             <template v-else>
               ∞ (Unlimited)
diff --git a/src/components/TransferDetailsCard.vue b/src/components/TransferDetailsCard.vue
index 0513929..0009376 100644
--- a/src/components/TransferDetailsCard.vue
+++ b/src/components/TransferDetailsCard.vue
@@ -13,10 +13,9 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { useTokensStore } from '@/stores/tokens.store';
-import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
-import type { CtokensAppBalance, CtokensAppToken } from '@/utils/wallet/ctokens/api';
+import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 interface Props {
@@ -156,20 +155,6 @@ const parseAssetAmount = (amountStr: string, precision: number): string => {
   return integerPart + normalizedFractional;
 };
 
-const formatAmount = (amount: string, precision: number, symbol?: string) => {
-  try {
-    const num = parseFloat(amount);
-    if (isNaN(num)) return amount;
-
-    const parts = num.toFixed(precision).split('.');
-    parts[0] = parts[0]!.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    const formatted = parts.join('.');
-    return symbol ? `${formatted} ${symbol}` : formatted;
-  } catch {
-    return amount;
-  }
-};
-
 const handleSend = async () => {
   if (!props.tokenData) {
     toastError('Token not loaded', new Error('Token details not available'));
@@ -199,6 +184,8 @@ const handleSend = async () => {
 
     const baseAmount = parseAssetAmount(form.value.amount, props.tokenData.precision || 0);
 
+    const sender = CTokensProvider.getOperationalPublicKey()!;
+
     await waitForTransactionStatus(
       () => ([{
         token_transfer_operation: {
@@ -208,7 +195,7 @@ const handleSend = async () => {
             precision: props.tokenData!.precision || 0
           },
           receiver: props.receiverKey!,
-          sender: CTokensProvider.getOperationalPublicKey()!,
+          sender,
           memo: form.value.memo
         }
       } satisfies htm_operation]),
@@ -217,30 +204,18 @@ const handleSend = async () => {
 
     transferCompleted.value = true;
 
-    await tokensStore.loadBalances(true);
+    const balanceObj = await tokensStore.getBalanceSingleToken(sender, props.tokenData.asset_num!);
 
     const receiverLabel = props.receiverName || props.receiverKey || 'Recipient';
     const tokenLabel = tokenSymbol.value || tokenName.value || props.tokenData!.nai || '';
 
-    let remaining = '';
-    const balanceObj = tokensStore.balances.find((b: CtokensAppBalance) => b.nai === props.tokenData!.nai) as CtokensAppBalance | undefined;
-    if (balanceObj && balanceObj.amount) {
-      try {
-        const wax = await getWax();
-        const formatted = wax.formatter.formatNumber(balanceObj.amount!, props.tokenData!.precision || 0);
-        remaining = tokenSymbol.value ? `${formatted} ${tokenSymbol.value}` : formatted;
-      } catch (_e) {
-        remaining = formatAmount(balanceObj.amount!, props.tokenData!.precision || 0, tokenSymbol.value || tokenName.value);
-      }
-    }
-
     const ts = new Date().toISOString();
 
     sentSummary.value = {
       amount: form.value.amount,
       tokenLabel,
       receiver: receiverLabel,
-      remainingBalance: remaining,
+      remainingBalance: balanceObj.displayBalance,
       timestamp: ts
     };
 
diff --git a/src/components/tokens/QRCodeCard.vue b/src/components/tokens/QRCodeCard.vue
index d0bb9b1..8b819cb 100644
--- a/src/components/tokens/QRCodeCard.vue
+++ b/src/components/tokens/QRCodeCard.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import QRCode from 'qrcode';
 import { computed, onMounted, ref, watch } from 'vue';
 
+import { Card, CardContent } from '@/components/ui/card';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import { Card, CardContent } from '../ui/card';
 
 const props = defineProps<{
   assetNum: number | string;
@@ -16,6 +15,9 @@ const qrCodeDataUrl = ref<string>('');
 
 const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
 
+/* eslint-disable-next-line @typescript-eslint/consistent-type-imports */
+let qrCode: undefined | typeof import('qrcode') = undefined;
+
 const generateQRCode = async () => {
   // Generate QR code even without amount (amount is optional)
   try {
@@ -34,7 +36,11 @@ const generateQRCode = async () => {
       params.append('memo', props.memo);
 
     const url = `${baseUrl}/tokens/send-token?${params.toString()}`;
-    const dataUrl = await QRCode.toDataURL(url, {
+
+    if (!qrCode)
+      qrCode = await import('qrcode');
+
+    const dataUrl = await qrCode.toDataURL(url, {
       width: 300,
       margin: 2,
       color: {
diff --git a/src/components/tokens/TokenSelector.vue b/src/components/tokens/TokenSelector.vue
index 22219f7..b3a910f 100644
--- a/src/components/tokens/TokenSelector.vue
+++ b/src/components/tokens/TokenSelector.vue
@@ -5,13 +5,12 @@ import { computed, onMounted, ref, watch } from 'vue';
 
 import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/components/ui/combobox';
-import { useTokensStore } from '@/stores/tokens.store';
-import type { CtokensAppBalance } from '@/utils/wallet/ctokens/api';
+import { useTokensStore, type CTokenBalanceDisplay } from '@/stores/tokens.store';
 
-import { isVesting } from '~/src/utils/nai-tokens';
+import { toastError } from '~/src/utils/parse-error';
 
 interface TokenOption {
-  balance: CtokensAppBalance;
+  balance: CTokenBalanceDisplay;
   displayName: string;
   displayBalance: string;
 }
@@ -46,40 +45,14 @@ watch(() => props.modelValue, (newValue) => {
 
 // Get user's token balances with positive amounts
 const ownedTokens = computed((): TokenOption[] => {
-  return tokensStore.balances
-    .filter(balance => isVesting(balance.nai!, balance.precision!) === false) // Exclude vesting tokens
-    .filter(balance => {
-      // Filter out zero balances
-      const amount = BigInt(balance.amount || '0');
-      return amount > 0;
-    })
-    .map(balance => {
-      // Get token metadata for display name
-      const tokenDef = tokensStore.getTokenDefinitionByNAI(balance.nai!);
-      const metadata = balance.metadata as Record<string, string> | undefined;
-      const tokenMetadata = tokenDef?.metadata as Record<string, string> | undefined;
-
-      // Use symbol from balance metadata, then token definition, then fallback to NAI
-      const symbol = metadata?.symbol || tokenMetadata?.symbol || balance.nai || 'Unknown';
-
-      // Format balance amount with proper precision
-      let formattedBalance = '0';
-      try {
-        const numAmount = parseFloat(balance.amount || '0');
-        const precision = balance.precision || 0;
-        formattedBalance = numAmount.toFixed(Math.min(precision, 6)); // Limit to 6 decimal places for display
-      } catch (error) {
-        console.warn('Failed to format balance:', error);
-        formattedBalance = balance.amount || '0';
-      }
-
-      return {
-        balance,
-        displayName: symbol,
-        displayBalance: formattedBalance
-      };
-    })
-    .sort((a, b) => a.displayName.localeCompare(b.displayName));
+  return tokensStore.fungibleBalances
+    .filter(balance => balance.liquid.balance > 0n)
+    .map(balance => ({
+      balance: balance.liquid,
+      displayName: balance.liquid.name || balance.liquid.symbol!,
+      displayBalance: balance.liquid.displayBalance
+    } satisfies TokenOption))
+    .sort((a, b) => b.balance.balance - a.balance.balance > 0n ? 1 : -1);
 });
 
 // Filtered tokens based on search query
@@ -90,35 +63,30 @@ const filteredTokens = computed((): TokenOption[] => {
   const query = searchQuery.value.toLowerCase();
   return ownedTokens.value.filter(token => {
     return token.displayName.toLowerCase().includes(query) ||
-        token.balance.metadata?.symbol?.toLowerCase().includes(query) ||
-        String(token.balance.asset_num).includes(query);
+        token.balance?.symbol!.toLowerCase().includes(query) ||
+        String(token.balance.assetNum).includes(query);
   }
   );
 });
 
 // Selected token
 const selectedToken = computed(() => {
-  return ownedTokens.value.find(token => String(token.balance.asset_num) === selectedValue.value);
+  return ownedTokens.value.find(token => String(token.balance.assetNum) === selectedValue.value);
 });
 
-// Token image URL
-const tokenImage = computed(() => {
-  if (!selectedToken.value) return undefined;
-  const metadata = selectedToken.value.balance.metadata as { image?: string } | undefined;
-  const tokenDef = tokensStore.getTokenDefinitionByNAI(selectedToken.value.balance.nai!);
-  const tokenMetadata = tokenDef?.metadata as { image?: string } | undefined;
-  return metadata?.image || tokenMetadata?.image || '';
-});
-
-// Watch for changes in balances to ensure we have the latest data
-watch(() => tokensStore.balances, () => {
-  // Balances updated, component will re-compute ownedTokens
-}, { deep: true, immediate: true });
+const fetchBalances = async () => {
+  try { // TODO: Add pagination / search support later
+    await tokensStore.loadBalances();
+  } catch (error) {
+    toastError('Failed to load token balances:', error);
+  }
+};
 
 // Load balances on mount if not already loaded
-onMounted(async () => {
-  if (tokensStore.balances.length === 0)
-    await tokensStore.loadBalances();
+onMounted(() => {
+  if (tokensStore.fungibleBalances.length === 0)
+    void fetchBalances();
+
 });
 </script>
 
@@ -131,9 +99,9 @@ onMounted(async () => {
             v-if="selectedToken"
             class="flex items-center gap-2 truncate flex-1 min-w-0"
           >
-            <Avatar v-if="tokenImage" class="h-6 w-6">
+            <Avatar v-if="selectedToken.balance.image" class="h-6 w-6">
               <AvatarImage
-                :src="tokenImage"
+                :src="selectedToken.balance.image"
                 :alt="selectedToken.displayName"
               />
             </Avatar>
@@ -177,8 +145,8 @@ onMounted(async () => {
         <ComboboxGroup class="max-h-48 overflow-y-auto">
           <ComboboxItem
             v-for="token in filteredTokens"
-            :key="String(token.balance.asset_num)"
-            :value="String(token.balance.asset_num)"
+            :key="String(token.balance.assetNum)"
+            :value="String(token.balance.assetNum)"
             class="cursor-pointer px-4 py-3 hover:bg-accent hover:text-accent-foreground transition-colors focus:bg-accent focus:text-accent-foreground"
           >
             <div class="flex w-full items-center justify-between gap-3">
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index 5ebcc52..8aab412 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -16,7 +16,6 @@ import { Separator } from '@/components/ui/separator';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Textarea } from '@/components/ui/textarea';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useTokensStore } from '@/stores/tokens.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
@@ -28,7 +27,6 @@ const route = useRoute();
 const router = useRouter();
 
 // Stores
-const tokensStore = useTokensStore();
 const settingsStore = useSettingsStore();
 
 // State
@@ -170,9 +168,6 @@ const handleUpdateToken = async () => {
       'Token metadata update'
     );
 
-    // Refresh token data after update
-    await tokensStore.loadRegisteredTokens(assetNum.value, 1, true);
-
     router.push({
       path: '/tokens/token',
       query: {
diff --git a/src/pages/tokens/list.vue b/src/pages/tokens/list.vue
index f80349a..7986f76 100644
--- a/src/pages/tokens/list.vue
+++ b/src/pages/tokens/list.vue
@@ -9,7 +9,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useTokensStore, type CTokenDisplay } from '@/stores/tokens.store';
+import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 
 // Router
@@ -24,13 +24,13 @@ const currentPage = ref(0);
 const hasMorePages = ref(true);
 
 // Navigate to token detail page (placeholder for now)
-const viewTokenDetails = (token: CTokenDisplay) => {
+const viewTokenDetails = (token: CTokenDisplayBase) => {
   router.push(`/tokens/token?asset-num=${token.assetNum}`);
 };
 
 const loadTokens = async (page: number = 1) => {
   try {
-    const result = await tokensStore.loadRegisteredTokens(undefined, page);
+    const result = await tokensStore.loadTokens(page);
 
     if (result) {
       hasMorePages.value = result.hasMore;
@@ -42,7 +42,7 @@ const loadTokens = async (page: number = 1) => {
 };
 
 const loadMore = () => {
-  if (!hasMorePages.value || tokensStore.isLoadingRegisteredTokens) return;
+  if (!hasMorePages.value || tokensStore.isLoading) return;
   void loadTokens(currentPage.value + 1);
 };
 
@@ -74,7 +74,7 @@ onMounted(() => {
         <div class="flex gap-2">
           <Button
             variant="outline"
-            :disabled="tokensStore.isLoadingRegisteredTokens"
+            :disabled="tokensStore.isLoading"
             @click="loadMore"
           >
             <svg
@@ -82,7 +82,7 @@ onMounted(() => {
               height="16"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
-              :class="{ 'animate-spin': tokensStore.isLoadingRegisteredTokens }"
+              :class="{ 'animate-spin': tokensStore.isLoading }"
               class="mr-2"
             >
               <path
@@ -116,7 +116,7 @@ onMounted(() => {
 
       <!-- Loading Skeletons -->
       <div
-        v-if="tokensStore.isLoadingRegisteredTokens && tokensStore.registeredTokens.length === 0"
+        v-if="tokensStore.isLoading && tokensStore.fungibleTokenDefinitions.length === 0"
         class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
       >
         <Card
@@ -146,29 +146,39 @@ onMounted(() => {
 
       <!-- Tokens Grid -->
       <div
-        v-else-if="tokensStore.registeredTokens.length > 0"
-        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+        v-else-if="tokensStore.fungibleTokenDefinitions.length > 0"
+        class="grid grid-cols-1 lg:grid-cols-2 gap-6"
       >
-        <HTMTokenCard
-          v-for="token in tokensStore.registeredTokens"
-          :key="token.nai"
-          :token="token"
-          @click="viewTokenDetails"
-        />
+        <div
+          v-for="token in tokensStore.fungibleTokenDefinitions"
+          :key="token.liquid.assetNum"
+          class="grid grid-cols-1 md:grid-cols-2 gap-6"
+        >
+          <HTMTokenCard
+            :key="token.liquid.assetNum"
+            :token="token.liquid"
+            @click="viewTokenDetails"
+          />
+          <HTMTokenCard
+            :key="token.vesting.assetNum"
+            :token="token.vesting"
+            @click="viewTokenDetails"
+          />
+        </div>
       </div>
 
       <!-- Load More Button -->
       <div
-        v-if="tokensStore.registeredTokens.length > 0 && hasMorePages"
+        v-if="tokensStore.fungibleTokenDefinitions.length > 0 && hasMorePages"
         class="text-center pt-4"
       >
         <Button
           variant="outline"
-          :disabled="tokensStore.isLoadingRegisteredTokens"
+          :disabled="tokensStore.isLoading"
           @click="loadMore"
         >
           <svg
-            v-if="tokensStore.isLoadingRegisteredTokens"
+            v-if="tokensStore.isLoading"
             width="16"
             height="16"
             xmlns="http://www.w3.org/2000/svg"
@@ -180,12 +190,12 @@ onMounted(() => {
               d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
             />
           </svg>
-          {{ tokensStore.isLoadingRegisteredTokens ? 'Loading...' : 'Load More Tokens' }}
+          {{ tokensStore.isLoading ? 'Loading...' : 'Load More Tokens' }}
         </Button>
       </div>
 
       <!-- Empty State -->
-      <Card v-else-if="tokensStore.registeredTokens.length === 0 && !tokensStore.isLoadingRegisteredTokens">
+      <Card v-else-if="tokensStore.fungibleTokenDefinitions.length === 0 && !tokensStore.isLoading">
         <CardContent class="text-center py-12">
           <svg
             width="64"
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index ee1a1c3..31667e7 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -10,7 +10,7 @@ import {
   mdiImageMultiple
 } from '@mdi/js';
 import type { htm_operation } from '@mtyszczak-cargo/htm';
-import { computed, onMounted, ref, watch } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
@@ -25,53 +25,31 @@ import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import AddToGoogleWallet from '@/components/wallet/AddToGoogleWallet.vue';
-import { useTokensStore } from '@/stores/tokens.store';
-import { getWax } from '@/stores/wax.store';
-import { toVesting } from '@/utils/nai-tokens';
+import { useTokensStore, type CTokenBalanceDisplay, type CTokenPairBalanceDefinition, type TokenStoreApiResponse } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
-import type { CtokensAppBalance } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 const router = useRouter();
 const tokensStore = useTokensStore();
 
-// Wax formatter reference
-const formatter = ref<{ formatNumber: (value: string, precision: number) => string } | null>(null);
-
-interface AggregatedBalance {
-  key: string;
-  nai: string;
-  precision: number;
-  liquid: CtokensAppBalance | null;
-  vesting: CtokensAppBalance | null;
-  metadata?: Record<string, unknown>;
-}
-
-type BalanceLike = AggregatedBalance | CtokensAppBalance | null | undefined;
-
 // State
 const isLoading = ref(false);
 const searchQuery = ref('');
-const failedImages = ref<Set<string>>(new Set());
-
-// Pagination state
-const itemsPerPage = ref(10);
-const displayedItemsCount = ref(10);
 
 // Transfer dialog state
 const isTransferDialogOpen = ref(false);
 const transferAmount = ref('');
 const transferRecipient = ref('');
 const transferMemo = ref('');
-const selectedTokenForTransfer = ref<CtokensAppBalance | null>(null);
+const selectedTokenForTransfer = ref<CTokenBalanceDisplay | null>(null);
 const isTransferLoading = ref(false);
 
 // Transform dialog state
 const isTransformDialogOpen = ref(false);
 const transformAmount = ref('');
 const transformDirection = ref<'liquid-to-staked' | 'staked-to-liquid'>('liquid-to-staked');
-const selectedToken = ref<CtokensAppBalance | null>(null);
+const selectedToken = ref<CTokenBalanceDisplay | null>(null);
 const isTransformLoading = ref(false);
 
 // Account statistics
@@ -80,6 +58,8 @@ const ownedTokensCount = ref(0);
 const nftCollectionsCount = ref(0);
 const stakedTokensCount = ref(0);
 
+const fetchedBalances = ref<TokenStoreApiResponse<CTokenPairBalanceDefinition> | null>(null);
+
 // Helper function to format count with >100, >60 etc
 const formatCount = (count: number): string => {
   if (count > 100) {
@@ -89,92 +69,6 @@ const formatCount = (count: number): string => {
   return count.toString();
 };
 
-// Helper functions for extracting data from metadata
-const isVesting = (nai: string, precision: number): boolean => {
-  return (((Number(nai.slice(2, -1)) << 5) | 0x10 | precision) & 0x20) !== 0;
-};
-
-const isAggregatedBalance = (balance: BalanceLike): balance is AggregatedBalance => {
-  return Boolean(balance && typeof (balance as AggregatedBalance).key === 'string');
-};
-
-const getBalanceMetadata = (balance: BalanceLike): Record<string, string> | undefined => {
-  if (!balance) return undefined;
-
-  if (isAggregatedBalance(balance)) {
-    const metadata = balance.metadata as Record<string, string> | undefined;
-    if (metadata) return metadata;
-
-    const liquidMetadata = balance.liquid?.metadata as Record<string, string> | undefined;
-    if (liquidMetadata) return liquidMetadata;
-
-    return balance.vesting?.metadata as Record<string, string> | undefined;
-  }
-
-  return balance.metadata as Record<string, string> | undefined;
-};
-
-const getBalanceNai = (balance: BalanceLike): string => {
-  if (!balance) return '';
-  if (isAggregatedBalance(balance)) return balance.nai;
-  return balance.nai || '';
-};
-
-const getTokenSymbol = (balance: BalanceLike): string => {
-  const metadata = getBalanceMetadata(balance);
-  const nai = getBalanceNai(balance);
-  return metadata?.symbol || metadata?.name || nai.replace('@@', '') || 'Unknown';
-};
-
-const getTokenName = (balance: BalanceLike): string => {
-  const metadata = getBalanceMetadata(balance);
-  return metadata?.display_name || metadata?.name || getTokenSymbol(balance);
-};
-
-const getTokenLogoUrl = (balance: BalanceLike): string | undefined => {
-  const metadata = getBalanceMetadata(balance);
-  return metadata?.logo_url || metadata?.image;
-};
-
-const aggregatedBalances = computed<AggregatedBalance[]>(() => {
-  const map = new Map<string, AggregatedBalance>();
-  const order: string[] = [];
-
-  tokensStore.balances.forEach((balance) => {
-    if (!balance.nai)
-      return;
-
-    const precision = balance.precision ?? 0;
-    const isBalanceVesting = isVesting(balance.nai, precision);
-    const baseNai = isBalanceVesting ? toVesting(balance.nai, precision) : balance.nai;
-    const key = `${baseNai}:${precision}`;
-
-    if (!map.has(key)) {
-      map.set(key, {
-        key,
-        nai: baseNai,
-        precision,
-        liquid: null,
-        vesting: null,
-        metadata: balance.metadata as Record<string, unknown> | undefined
-      });
-      order.push(key);
-    }
-
-    const entry = map.get(key)!;
-
-    if (isBalanceVesting)
-      entry.vesting = balance;
-    else
-      entry.liquid = balance;
-
-    if (!entry.metadata && balance.metadata)
-      entry.metadata = balance.metadata as Record<string, unknown>;
-  });
-
-  return order.map(key => map.get(key)!);
-});
-
 // Parse asset amount - convert decimal to base units (integer with precision zeros)
 const parseAssetAmount = (amountStr: string, precision: number): string => {
   const [integerPart, fractionalPart = ''] = amountStr.split('.');
@@ -182,298 +76,25 @@ const parseAssetAmount = (amountStr: string, precision: number): string => {
   return integerPart + normalizedFractional;
 };
 
-// Format token amount using wax formatter (accepts base units from API)
-const formatCTokenAmount = (amount: string, precision: number): string => {
-  // Use wax formatter if available - it handles conversion from base units
-  if (formatter.value)
-    return formatter.value.formatNumber(amount, precision);
-
-  // Fallback formatting - manually convert from base units to decimal
-  const num = parseFloat(amount);
-  return (num / Math.pow(10, precision)).toFixed(precision);
-};
-
-// Get numeric value from base units (for calculations)
-const getNumericBalance = (amount: string, precision: number): number => {
-  const num = parseFloat(amount);
-  return num / Math.pow(10, precision);
-};
-
-const formatBalanceAmount = (amount: string | undefined, precision: number | undefined): string => {
-  if (!amount || amount === '0') return '0';
-  return formatCTokenAmount(amount, precision ?? 0);
-};
-
-const getLiquidBalance = (balance: BalanceLike): string => {
-  if (!balance) return '0';
-
-  if (isAggregatedBalance(balance))
-    return formatBalanceAmount(balance.liquid?.amount, balance.liquid?.precision ?? balance.precision);
-
-  if (isVesting(balance.nai || '', balance.precision || 0))
-    return '0';
-
-  return formatBalanceAmount(balance.amount, balance.precision);
-};
-
-// Get liquid balance as numeric value
-const getLiquidBalanceNumeric = (balance: BalanceLike): number => {
-  if (!balance) return 0;
-
-  if (isAggregatedBalance(balance)) {
-    if (!balance.liquid?.amount) return 0;
-    return getNumericBalance(balance.liquid.amount, balance.liquid.precision ?? balance.precision);
-  }
-
-  if (isVesting(balance.nai || '', balance.precision || 0))
-    return 0;
-
-  if (!balance.amount) return 0;
-  return getNumericBalance(balance.amount, balance.precision || 0);
-};
-
-const getStakedBalance = (balance: BalanceLike): string => {
-  if (!balance) return '0';
-
-  if (isAggregatedBalance(balance))
-    return formatBalanceAmount(balance.vesting?.amount, balance.vesting?.precision ?? balance.precision);
-
-  if (isVesting(balance.nai || '', balance.precision || 0))
-    return formatBalanceAmount(balance.amount, balance.precision);
-
-  return '0';
-};
-
-// Get staked balance as numeric value
-const getStakedBalanceNumeric = (balance: BalanceLike): number => {
-  if (!balance) return 0;
-
-  if (isAggregatedBalance(balance)) {
-    if (!balance.vesting?.amount) return 0;
-    return getNumericBalance(balance.vesting.amount, balance.vesting.precision ?? balance.precision);
-  }
-
-  if (isVesting(balance.nai || '', balance.precision || 0)) {
-    if (!balance.amount) return 0;
-    return getNumericBalance(balance.amount, balance.precision || 0);
-  }
-
-  return 0;
-};
-
-// Get total balance as numeric value (for conditions)
-const getTotalBalanceNumeric = (balance: BalanceLike): number => {
-  if (!balance) return 0;
-
-  if (isAggregatedBalance(balance)) {
-    const precision = balance.precision;
-    const liquidAmount = balance.liquid?.amount ? getNumericBalance(balance.liquid.amount, balance.liquid.precision ?? precision) : 0;
-    const stakedAmount = balance.vesting?.amount ? getNumericBalance(balance.vesting.amount, balance.vesting.precision ?? precision) : 0;
-    return liquidAmount + stakedAmount;
-  }
-
-  const amount = balance.amount || '0';
-  const precision = balance.precision || 0;
-  return getNumericBalance(amount, precision);
-};
-
-const formatDisplayAmount = (amount: string | undefined, precision: number | undefined): string => {
-  if (!amount || amount === '0') return '0';
-
-  // Use wax formatter directly for display - it already handles thousand separators
-  if (formatter.value) {
-    const formatted = formatter.value.formatNumber(amount, precision ?? 0);
-    // Trim trailing zeros after decimal point
-    return formatted.replace(/(\.\d*?)0+$/, '$1').replace(/\.$/, '');
-  }
-
-  // Fallback: manual formatting
-  const normalized = formatBalanceAmount(amount, precision);
-  if (!normalized || normalized === '0')
-    return '0';
-
-  const [integerPart, decimalPart] = normalized.split('.');
-  if (!integerPart)
-    return '0';
-
-  const withSeparators = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-
-  if (!decimalPart)
-    return withSeparators;
-
-  const trimmedDecimal = decimalPart.replace(/0+$/, '');
-
-  if (!trimmedDecimal)
-    return withSeparators;
-
-  return `${withSeparators}.${trimmedDecimal}`;
-};
-
-const getLiquidBalanceDisplay = (balance: BalanceLike): string => {
-  if (!balance) return '0';
-
-  if (isAggregatedBalance(balance))
-    return formatDisplayAmount(balance.liquid?.amount, balance.liquid?.precision ?? balance.precision);
-
-  if (isVesting(balance.nai || '', balance.precision || 0))
-    return '0';
-
-  return formatDisplayAmount(balance.amount, balance.precision);
-};
-
-const getStakedBalanceDisplay = (balance: BalanceLike): string => {
-  if (!balance) return '0';
-
-  if (isAggregatedBalance(balance))
-    return formatDisplayAmount(balance.vesting?.amount, balance.vesting?.precision ?? balance.precision);
-
-  if (isVesting(balance.nai || '', balance.precision || 0))
-    return formatDisplayAmount(balance.amount, balance.precision);
-
-  return '0';
-};
-
-const getTotalBalanceDisplay = (balance: BalanceLike): string => {
-  if (!balance) return '0';
-
-  if (isAggregatedBalance(balance)) {
-    const precision = balance.precision;
-    const liquidAmount = balance.liquid?.amount ? BigInt(balance.liquid.amount) : 0n;
-    const stakedAmount = balance.vesting?.amount ? BigInt(balance.vesting.amount) : 0n;
-    return formatDisplayAmount((liquidAmount + stakedAmount).toString(), precision);
-  }
-
-  return formatDisplayAmount(balance.amount, balance.precision);
-};
-
-const getBalancePercent = (balance: BalanceLike, type: 'liquid' | 'staked'): number => {
-  if (!balance) return 0;
-
-  let liquid = 0;
-  let staked = 0;
-
-  if (isAggregatedBalance(balance)) {
-    const precision = balance.precision;
-    if (balance.liquid?.amount)
-      liquid = getNumericBalance(balance.liquid.amount, balance.liquid.precision ?? precision);
-    if (balance.vesting?.amount)
-      staked = getNumericBalance(balance.vesting.amount, balance.vesting.precision ?? precision);
-  } else {
-    const isVestingToken = isVesting(balance.nai || '', balance.precision || 0);
-    if (balance.amount) {
-      if (isVestingToken)
-        staked = getNumericBalance(balance.amount, balance.precision || 0);
-      else
-        liquid = getNumericBalance(balance.amount, balance.precision || 0);
-    }
-  }
-
-  const total = liquid + staked;
-
-  if (!total)
-    return 0;
-
-  if (type === 'liquid')
-    return Number(((liquid / total) * 100).toFixed(1));
-
-  const stakedRatio = 100 - (liquid / total) * 100;
-  return Number(stakedRatio.toFixed(1));
-};
-
-
-// Filter balances based on search query
-const filteredBalancesAll = computed(() => {
-  const balances = aggregatedBalances.value;
-
-  if (!searchQuery.value) return balances;
-
-  return balances.filter(balance => {
-    const symbol = getTokenSymbol(balance);
-    const name = getTokenName(balance);
-    const nai = balance.nai || '';
-    const liquidNai = isAggregatedBalance(balance) ? balance.liquid?.nai || '' : '';
-    const vestingNai = isAggregatedBalance(balance) ? balance.vesting?.nai || '' : '';
-
-    return symbol.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
-      name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
-      nai.includes(searchQuery.value) ||
-      liquidNai.includes(searchQuery.value) ||
-      vestingNai.includes(searchQuery.value);
-  });
-});
-
-// Paginated balances (displayed items)
-const filteredBalances = computed(() => {
-  return filteredBalancesAll.value.slice(0, displayedItemsCount.value);
-});
-
-// Check if there are more items to load
-const hasMoreItems = computed(() => {
-  return displayedItemsCount.value < filteredBalancesAll.value.length;
-});
-
-// Load more items
-const loadMoreItems = () => {
-  displayedItemsCount.value = Math.min(
-    displayedItemsCount.value + itemsPerPage.value,
-    filteredBalancesAll.value.length
-  );
-};
-
-// Reset pagination when search changes
-watch(searchQuery, () => {
-  displayedItemsCount.value = itemsPerPage.value;
-});
-
-// Methods
-const loadAccountStatistics = async () => {
+const loadAccountBalances = async (page = 1) => {
   try {
-    const operationalKey = CTokensProvider.getOperationalPublicKey();
-
-    if (!operationalKey) {
-      console.warn('No operational key available');
-      return;
-    }
-
-    const wax = await getWax();
-
-    // Get all tokens created by this user (owner field matches operational key)
-    const createdTokens = await wax.restApi.ctokensApi.tokens({ owner: operationalKey });
-    createdTokensCount.value = createdTokens.items?.length || 0;
+    isLoading.value = true;
 
-    // Get owned tokens (tokens with balance)
-    const balances = await wax.restApi.ctokensApi.balances({ user: operationalKey });
-    const uniqueBalanceKeys = new Set<string>();
-    const stakedTokenKeys = new Set<string>();
+    const [createdTokens, balances] = await Promise.all([
+      tokensStore.loadCreatedTokens(),
+      tokensStore.loadBalances(page)
+    ]);
+    createdTokensCount.value = createdTokens.total;
 
-    balances.items!.forEach(({ liquid, vesting }) => {
-      if (liquid)
-        uniqueBalanceKeys.add(`${liquid.nai}:${liquid.precision}`);
-      if (vesting)
-        stakedTokenKeys.add(`${vesting.nai}:${vesting.precision}`);
-    });
+    ownedTokensCount.value = balances.total;
 
-    ownedTokensCount.value = uniqueBalanceKeys.size;
+    fetchedBalances.value = balances;
 
     // Get NFT collections (created NFT tokens)
-    const nftTokens = createdTokens.items!.filter(token => token.liquid?.is_nft);
-    nftCollectionsCount.value = nftTokens.length;
+    nftCollectionsCount.value = 0; // TOOD: Implement NFTs
 
     // Get staked tokens (tokens with vesting bit set)
-    stakedTokensCount.value = stakedTokenKeys.size;
-  } catch (error) {
-    console.error('Failed to load account statistics:', error);
-  }
-};
-
-const loadAccountBalances = async () => {
-  try {
-    isLoading.value = true;
-
-    await Promise.all([
-      tokensStore.loadBalances(true),
-      loadAccountStatistics()
-    ]);
+    stakedTokensCount.value = 0; // TODO: Implement staked tokens I own
   } catch (error) {
     toastError('Failed to load account balances', error);
   } finally {
@@ -481,13 +102,18 @@ const loadAccountBalances = async () => {
   }
 };
 
-const openTransferDialog = (balance: AggregatedBalance) => {
-  if (!balance.liquid) {
+// Load more items
+const loadMoreItems = () => {
+  void loadAccountBalances(fetchedBalances.value!.page + 1);
+};
+
+const openTransferDialog = (balance: CTokenBalanceDisplay) => {
+  if (balance.isStaked) {
     toast.error('No liquid balance available for transfer');
     return;
   }
 
-  selectedTokenForTransfer.value = balance.liquid;
+  selectedTokenForTransfer.value = balance;
   transferAmount.value = '';
   transferRecipient.value = '';
   transferMemo.value = '';
@@ -533,16 +159,9 @@ const transferTokens = async () => {
   }
 };
 
-const openTransformDialog = (balance: AggregatedBalance, direction: 'liquid-to-staked' | 'staked-to-liquid') => {
-  const tokenEntry = direction === 'liquid-to-staked' ? balance.liquid : balance.vesting;
-
-  if (!tokenEntry) {
-    toast.error(direction === 'liquid-to-staked' ? 'No liquid balance available to stake' : 'No staked balance available to unstake');
-    return;
-  }
-
-  selectedToken.value = tokenEntry;
-  transformDirection.value = direction;
+const openTransformDialog = (balance: CTokenBalanceDisplay) => {
+  selectedToken.value = balance;
+  transformDirection.value = balance.isStaked ? 'staked-to-liquid' : 'liquid-to-staked';
   transformAmount.value = '';
   isTransformDialogOpen.value = true;
 };
@@ -565,7 +184,7 @@ const transformTokens = async () => {
         token_transform_operation: {
           amount: {
             amount: baseAmount,
-            nai: transformDirection.value === 'liquid-to-staked' ? selectedToken.value!.nai! : toVesting(selectedToken.value!.nai!, selectedToken.value!.precision!),
+            nai: selectedToken.value!.nai!,
             precision: selectedToken.value!.precision!
           },
           holder: CTokensProvider.getOperationalPublicKey()!
@@ -584,24 +203,12 @@ const transformTokens = async () => {
   }
 };
 
-// Handle image load error
-const handleImageError = (nai: string) => {
-  failedImages.value.add(nai);
-};
-
-// Check if image should be shown
-const shouldShowImage = (balance: BalanceLike): boolean => {
-  const logoUrl = getTokenLogoUrl(balance);
-  const nai = getBalanceNai(balance);
-  return !!logoUrl && !failedImages.value.has(nai);
-};
-
 // Navigate to token details page
-const navigateToToken = (balance: AggregatedBalance) => {
+const navigateToToken = (balance: CTokenBalanceDisplay) => {
   router.push({
     path: '/tokens/token',
     query: {
-      'asset-num': balance.liquid?.asset_num || balance.vesting?.asset_num || ''
+      'asset-num': balance.assetNum
     }
   });
 };
@@ -610,34 +217,18 @@ const navigateToToken = (balance: AggregatedBalance) => {
 const setMaxTransferAmount = async () => {
   if (!selectedTokenForTransfer.value) return;
 
-  try {
-    transferAmount.value = selectedTokenForTransfer.value.amount || '0';
-  } catch (error) {
-    console.error('Failed to set max transfer amount:', error);
-  }
+  transferAmount.value = String(selectedTokenForTransfer.value.balance);
 };
 
 // Set max transform amount - use raw amount without precision formatting
 const setMaxTransformAmount = async () => {
   if (!selectedToken.value) return;
 
-  try {
-    transformAmount.value = selectedToken.value.amount || '0';
-  } catch (error) {
-    console.error('Failed to set max transform amount:', error);
-  }
+  transformAmount.value = String(selectedToken.value.balance);
 };
 
 // Initialize
 onMounted(async () => {
-  // Initialize wax formatter
-  try {
-    const wax = await getWax();
-    formatter.value = wax.formatter;
-  } catch (error) {
-    console.error('Failed to initialize wax formatter:', error);
-  }
-
   loadAccountBalances();
 });
 </script>
@@ -660,7 +251,7 @@ onMounted(async () => {
           <Button
             variant="outline"
             :disabled="isLoading"
-            @click="loadAccountBalances"
+            @click="loadAccountBalances()"
           >
             <svg
               width="16"
@@ -821,7 +412,7 @@ onMounted(async () => {
 
       <!-- Loading State -->
       <div
-        v-if="tokensStore.isLoadingBalances"
+        v-if="tokensStore.isLoading"
         class="space-y-4"
       >
         <Card
@@ -858,7 +449,7 @@ onMounted(async () => {
 
       <!-- Balances Table -->
       <div
-        v-else-if="filteredBalances.length > 0"
+        v-else-if="fetchedBalances && fetchedBalances.items.length > 0"
         class="space-y-4"
       >
         <Card>
@@ -883,36 +474,35 @@ onMounted(async () => {
                 </thead>
                 <tbody>
                   <tr
-                    v-for="balance in filteredBalances"
-                    :key="balance.key"
+                    v-for="balance in fetchedBalances.items"
+                    :key="balance.liquid.assetNum"
                     class="border-b hover:bg-muted/50 transition-colors cursor-pointer"
-                    @click="navigateToToken(balance)"
+                    @click="navigateToToken(balance.liquid)"
                   >
                     <!-- Asset Info -->
                     <td class="p-4">
                       <div class="flex items-center gap-3">
                         <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center overflow-hidden">
                           <img
-                            v-if="shouldShowImage(balance)"
-                            :src="getTokenLogoUrl(balance)"
-                            :alt="getTokenSymbol(balance)"
+                            v-if="balance.liquid.image"
+                            :src="balance.liquid.image"
+                            :alt="balance.liquid.symbol"
                             class="h-full w-full object-cover"
-                            @error="handleImageError(balance.nai || '')"
                           >
                           <span
                             v-else
                             class="text-sm font-medium text-primary"
                           >
-                            {{ getTokenSymbol(balance).charAt(0).toUpperCase() }}
+                            {{ balance.liquid.symbol!.charAt(0).toUpperCase() }}
                           </span>
                         </div>
                         <div>
                           <div class="flex items-center gap-2">
                             <span class="font-semibold">
-                              {{ getTokenName(balance) }}
+                              {{ balance.liquid.name }}
                             </span>
                             <span
-                              v-if="getStakedBalanceNumeric(balance) > 0"
+                              v-if="balance.vesting.balance > 0n"
                               class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
                             >
                               <svg
@@ -930,10 +520,10 @@ onMounted(async () => {
                             </span>
                           </div>
                           <div class="text-sm text-muted-foreground">
-                            {{ getTokenSymbol(balance) }}
+                            {{ balance.liquid.symbol }}
                           </div>
                           <div class="text-xs text-muted-foreground font-mono">
-                            {{ balance.nai }}
+                            {{ balance.liquid.assetNum }}
                           </div>
                         </div>
                       </div>
@@ -946,7 +536,7 @@ onMounted(async () => {
                           <span
                             :class="[
                               'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold uppercase tracking-wide',
-                              getLiquidBalanceNumeric(balance) === 0
+                              balance.liquid.balance === 0n
                                 ? 'bg-muted text-muted-foreground border-transparent'
                                 : 'bg-emerald-50 text-emerald-700 border-emerald-200'
                             ]"
@@ -956,10 +546,10 @@ onMounted(async () => {
                           <span
                             :class="[
                               'font-medium tabular-nums',
-                              getLiquidBalanceNumeric(balance) === 0 ? 'text-muted-foreground' : 'text-foreground'
+                              balance.liquid.balance === 0n ? 'text-muted-foreground' : 'text-foreground'
                             ]"
                           >
-                            {{ getLiquidBalanceDisplay(balance) }}
+                            {{ balance.liquid.displayBalance }}
                           </span>
                         </div>
 
@@ -967,7 +557,7 @@ onMounted(async () => {
                           <span
                             :class="[
                               'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold uppercase tracking-wide',
-                              getStakedBalanceNumeric(balance) === 0
+                              balance.vesting.balance === 0n
                                 ? 'bg-muted text-muted-foreground border-transparent'
                                 : 'bg-sky-50 text-sky-700 border-sky-200'
                             ]"
@@ -977,29 +567,29 @@ onMounted(async () => {
                           <span
                             :class="[
                               'font-medium tabular-nums',
-                              getStakedBalanceNumeric(balance) === 0 ? 'text-muted-foreground' : 'text-foreground'
+                              balance.vesting.balance === 0n ? 'text-muted-foreground' : 'text-foreground'
                             ]"
                           >
-                            {{ getStakedBalanceDisplay(balance) }}
+                            {{ balance.vesting.displayBalance }}
                           </span>
                         </div>
 
-                        <template v-if="getTotalBalanceNumeric(balance) > 0">
+                        <template v-if="balance.liquid.balance > 0n || balance.vesting.balance > 0n">
                           <div class="flex h-1.5 w-full overflow-hidden rounded-full bg-muted">
                             <div
                               class="h-full bg-emerald-500 transition-all"
-                              :style="{ width: `${getBalancePercent(balance, 'liquid')}%` }"
+                              :style="{ width: `${(balance.liquid.balance * 100n / (balance.liquid.balance + balance.vesting.balance))}%` }"
                             />
                             <div
                               class="h-full bg-sky-500 transition-all"
-                              :style="{ width: `${getBalancePercent(balance, 'staked')}%` }"
+                              :style="{ width: `${(balance.vesting.balance * 100n / (balance.liquid.balance + balance.vesting.balance))}%` }"
                             />
                           </div>
                           <div class="flex items-center justify-between text-xs text-muted-foreground">
                             <span>Distribution</span>
                             <span class="tabular-nums">
-                              {{ getBalancePercent(balance, 'liquid').toFixed(1) }}% liquid ·
-                              {{ getBalancePercent(balance, 'staked').toFixed(1) }}% staked
+                              {{ (Number((balance.liquid.balance * 10000n / (balance.liquid.balance + balance.vesting.balance))) / 100).toFixed(1) }}% liquid ·
+                              {{ (Number((balance.vesting.balance * 10000n / (balance.liquid.balance + balance.vesting.balance))) / 100).toFixed(1) }}% staked
                             </span>
                           </div>
                         </template>
@@ -1016,7 +606,7 @@ onMounted(async () => {
                     <!-- Total Balance -->
                     <td class="p-4 text-right">
                       <div class="font-semibold tabular-nums">
-                        {{ getTotalBalanceDisplay(balance) }}
+                        {{ balance.liquid.balance + balance.vesting.balance /* Maybe beautify this display somehow */ }}
                       </div>
                     </td>
 
@@ -1026,9 +616,9 @@ onMounted(async () => {
                         <Button
                           variant="ghost"
                           size="sm"
-                          :disabled="getLiquidBalanceNumeric(balance) === 0"
+                          :disabled="balance.liquid.balance === 0n"
                           title="Transfer tokens"
-                          @click.stop="openTransferDialog(balance)"
+                          @click.stop="openTransferDialog(balance.liquid)"
                         >
                           <svg
                             width="14"
@@ -1046,9 +636,9 @@ onMounted(async () => {
                         <Button
                           variant="ghost"
                           size="sm"
-                          :disabled="getLiquidBalanceNumeric(balance) === 0"
+                          :disabled="balance.liquid.balance === 0n"
                           title="Stake tokens"
-                          @click.stop="openTransformDialog(balance, 'liquid-to-staked')"
+                          @click.stop="openTransformDialog(balance.liquid)"
                         >
                           <svg
                             width="14"
@@ -1066,9 +656,9 @@ onMounted(async () => {
                         <Button
                           variant="ghost"
                           size="sm"
-                          :disabled="getStakedBalanceNumeric(balance) === 0"
+                          :disabled="balance.vesting.balance === 0n"
                           title="Unstake tokens"
-                          @click.stop="openTransformDialog(balance, 'staked-to-liquid')"
+                          @click.stop="openTransformDialog(balance.vesting)"
                         >
                           <svg
                             width="14"
@@ -1093,7 +683,7 @@ onMounted(async () => {
 
         <!-- Load More Button -->
         <div
-          v-if="hasMoreItems"
+          v-if="fetchedBalances.hasMore"
           class="flex justify-center pt-4"
         >
           <Button
@@ -1103,7 +693,7 @@ onMounted(async () => {
           >
             Load More
             <span class="ml-2 text-muted-foreground">
-              ({{ displayedItemsCount }} / {{ filteredBalancesAll.length }})
+              ({{ fetchedBalances.page }} / {{ fetchedBalances.pages }})
             </span>
           </Button>
         </div>
@@ -1134,7 +724,7 @@ onMounted(async () => {
         </p>
         <Button
           v-if="!searchQuery"
-          @click="loadAccountBalances"
+          @click="loadAccountBalances()"
         >
           <svg
             width="16"
@@ -1159,23 +749,22 @@ onMounted(async () => {
             <div class="flex items-center gap-3 mb-2">
               <div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center overflow-hidden">
                 <img
-                  v-if="selectedTokenForTransfer && shouldShowImage(selectedTokenForTransfer)"
-                  :src="getTokenLogoUrl(selectedTokenForTransfer)"
-                  :alt="getTokenSymbol(selectedTokenForTransfer)"
+                  v-if="selectedTokenForTransfer && selectedTokenForTransfer.image"
+                  :src="selectedTokenForTransfer.image"
+                  :alt="selectedTokenForTransfer.symbol"
                   class="h-full w-full object-cover"
-                  @error="handleImageError(selectedTokenForTransfer.nai || '')"
                 >
                 <span
                   v-else
                   class="text-base font-medium text-primary"
                 >
-                  {{ selectedTokenForTransfer ? getTokenSymbol(selectedTokenForTransfer).charAt(0).toUpperCase() : '' }}
+                  {{ selectedTokenForTransfer ? selectedTokenForTransfer.symbol!.charAt(0).toUpperCase() : '' }}
                 </span>
               </div>
-              <DialogTitle>Transfer {{ selectedTokenForTransfer ? getTokenName(selectedTokenForTransfer) : '' }}</DialogTitle>
+              <DialogTitle>Transfer {{ selectedTokenForTransfer ? selectedTokenForTransfer.name : '' }}</DialogTitle>
             </div>
             <DialogDescription>
-              Send tokens to another account. Available balance: {{ selectedTokenForTransfer ? getLiquidBalanceDisplay(selectedTokenForTransfer) : '0' }} {{ selectedTokenForTransfer ? getTokenSymbol(selectedTokenForTransfer) : '' }}
+              Send tokens to another account. Available balance: {{ selectedTokenForTransfer ? selectedTokenForTransfer.displayBalance : '0' }} {{ selectedTokenForTransfer ? selectedTokenForTransfer.symbol : '' }}
             </DialogDescription>
           </DialogHeader>
 
@@ -1191,14 +780,14 @@ onMounted(async () => {
 
             <TokenAmountInput
               v-model="transferAmount"
-              :token-name="getTokenName(selectedTokenForTransfer!)"
-              :token-symbol="getTokenSymbol(selectedTokenForTransfer!)"
-              :token-image="getTokenLogoUrl(selectedTokenForTransfer!)"
+              :token-name="selectedTokenForTransfer!.name"
+              :token-symbol="selectedTokenForTransfer!.symbol"
+              :token-image="selectedTokenForTransfer!.image"
               :token-nai="selectedTokenForTransfer?.nai"
               :precision="selectedTokenForTransfer?.precision"
               :disabled="isTransferLoading"
-              :available-balance="getLiquidBalanceDisplay(selectedTokenForTransfer!)"
-              :show-max-button="!!(selectedTokenForTransfer && getLiquidBalanceNumeric(selectedTokenForTransfer) > 0)"
+              :available-balance="selectedTokenForTransfer!.displayBalance"
+              :show-max-button="selectedTokenForTransfer!.balance > 0n"
               @max="setMaxTransferAmount"
             />
 
@@ -1261,27 +850,25 @@ onMounted(async () => {
             <div class="flex items-center gap-3 mb-2">
               <div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center overflow-hidden">
                 <img
-                  v-if="selectedToken && shouldShowImage(selectedToken)"
-                  :src="getTokenLogoUrl(selectedToken)"
-                  :alt="getTokenSymbol(selectedToken)"
-                  class="h-full w-full object-cover"
-                  @error="handleImageError(selectedToken.nai || '')"
+                  v-if="selectedToken && selectedToken.image"
+                  :src="selectedToken.image"
+                  :alt="selectedToken.symbol"
                 >
                 <span
                   v-else
                   class="text-base font-medium text-primary"
                 >
-                  {{ selectedToken ? getTokenSymbol(selectedToken).charAt(0).toUpperCase() : '' }}
+                  {{ selectedToken ? selectedToken.symbol!.charAt(0).toUpperCase() : '' }}
                 </span>
               </div>
               <DialogTitle>
-                {{ transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake' }} {{ selectedToken ? getTokenName(selectedToken) : '' }}
+                {{ transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake' }} {{ selectedToken ? selectedToken.name : '' }}
               </DialogTitle>
             </div>
             <DialogDescription>
               {{ transformDirection === 'liquid-to-staked'
-                ? `Stake tokens to earn rewards. Available: ${selectedToken ? getLiquidBalanceDisplay(selectedToken) : '0'} ${selectedToken ? getTokenSymbol(selectedToken) : ''}`
-                : `Unstake tokens to make them liquid. Available: ${selectedToken ? getStakedBalanceDisplay(selectedToken) : '0'} ${selectedToken ? getTokenSymbol(selectedToken) : ''}`
+                ? `Stake tokens to earn rewards. Available: ${selectedToken ? selectedToken.displayBalance : '0'} ${selectedToken ? selectedToken.symbol : ''}`
+                : `Unstake tokens to make them liquid. Available: ${selectedToken ? selectedToken.displayBalance : '0'} ${selectedToken ? selectedToken.symbol : ''}`
               }}
             </DialogDescription>
           </DialogHeader>
@@ -1289,14 +876,14 @@ onMounted(async () => {
           <div class="grid gap-4 py-4">
             <TokenAmountInput
               v-model="transformAmount"
-              :token-name="getTokenName(selectedToken!)"
-              :token-symbol="getTokenSymbol(selectedToken!)"
-              :token-image="getTokenLogoUrl(selectedToken!)"
+              :token-name="selectedToken?.name"
+              :token-symbol="selectedToken?.symbol"
+              :token-image="selectedToken?.image"
               :token-nai="selectedToken?.nai"
               :precision="selectedToken?.precision"
               :disabled="isTransformLoading"
-              :available-balance="transformDirection === 'liquid-to-staked' ? getLiquidBalanceDisplay(selectedToken!) : getStakedBalanceDisplay(selectedToken!)"
-              :show-max-button="!!(selectedToken && Number(transformDirection === 'liquid-to-staked' ? getLiquidBalance(selectedToken) : getStakedBalance(selectedToken)) > 0)"
+              :available-balance="selectedToken!.displayBalance"
+              :show-max-button="selectedToken!.balance > 0n"
               @max="setMaxTransformAmount"
             />
           </div>
diff --git a/src/pages/tokens/my-tokens.vue b/src/pages/tokens/my-tokens.vue
index d77f582..c195a6d 100644
--- a/src/pages/tokens/my-tokens.vue
+++ b/src/pages/tokens/my-tokens.vue
@@ -12,7 +12,7 @@ import HTMView from '@/components/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { transformTokenToDisplayFormat, type CTokenDisplay } from '@/stores/tokens.store';
+import { transformTokenToDisplayFormat, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
@@ -21,13 +21,13 @@ import CTokensProvider from '@/utils/wallet/ctokens/signer';
 const router = useRouter();
 
 // State
-const tokensFullList = ref<CTokenDisplay[]>([]);
+const tokensFullList = ref<CTokenDefinitionDisplay[]>([]);
 const isLoading = ref(false);
 const currentPage = ref(0);
 const hasMorePages = ref(true);
 
 // Navigate to token detail page
-const viewTokenDetails = (token: CTokenDisplay) => {
+const viewTokenDetails = (token: CTokenDefinitionDisplay) => {
   router.push(`/tokens/token?asset-num=${token.assetNum}`);
 };
 
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
index 58ee354..dd60ea6 100644
--- a/src/pages/tokens/send-token.vue
+++ b/src/pages/tokens/send-token.vue
@@ -5,19 +5,19 @@ import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import HTMView from '@/components/HTMView.vue';
+import QRCodeCard from '@/components/tokens/QRCodeCard.vue';
 import TransferDetailsCard from '@/components/TransferDetailsCard.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useTokensStore } from '@/stores/tokens.store';
+import { useTokensStore, type CTokenBalanceDisplay } from '@/stores/tokens.store';
 import { useUserStore } from '@/stores/user.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import QRCodeCard from '~/src/components/tokens/QRCodeCard.vue';
 
 // Router
 const route = useRoute();
@@ -111,10 +111,19 @@ watch(selectedTokenAssetNum, async (newAssetNum, oldAssetNum) => {
   if (newAssetNum && newAssetNum !== oldAssetNum && shouldShowTokenSelector.value) {
     isLoading.value = true;
     // Get precision from the selected token's balance
-    const balance = tokensStore.balances.find(b => String(b.asset_num) === newAssetNum);
+    let balance: CTokenBalanceDisplay | undefined;
+    for(const storeBalance of tokensStore.fungibleBalances) {
+      if (storeBalance.liquid.assetNum === Number(newAssetNum)) {
+        balance = storeBalance.liquid;
+        break;
+      } else if (storeBalance.vesting.assetNum === Number(newAssetNum)) {
+        balance = storeBalance.vesting;
+        break;
+      }
+    } // TODO: Load more balances if not found?
     if (balance) {
       form.value.precision = balance.precision?.toString() || '';
-      form.value.assetNum = balance.asset_num!.toString();
+      form.value.assetNum = balance.assetNum!.toString();
       await loadTokenDetails();
     } else
       token.value = null;
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 8ed8203..9f649ad 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -18,14 +18,13 @@ import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useTokensStore } from '@/stores/tokens.store';
+import { useTokensStore, type CTokenBalanceDisplay, type CTokenDefinitionDisplay, type CTokenUserRanked } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
 import { isVesting, toLiquid, toVesting } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
-import type { CtokensAppToken, CtokensAppBalance, CtokensAppTopHolder } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 // Router
@@ -38,9 +37,9 @@ const settingsStore = useSettingsStore();
 const walletStore = useWalletStore();
 
 // State
-const token = ref<CtokensAppToken | null>(null);
-const userBalance = ref<CtokensAppBalance | null>(null);
-const topHolders = ref<CtokensAppTopHolder[]>([]);
+const token = ref<CTokenDefinitionDisplay | null>(null);
+const userBalance = ref<CTokenBalanceDisplay | null>(null);
+const topHolders = ref<CTokenUserRanked[]>([]);
 const isLoading = ref(true);
 const isLoadingHolders = ref(false);
 const isTransferring = ref(false);
@@ -65,15 +64,15 @@ const stakeForm = ref({
 });
 
 // Get NAI from route parameter
-const assetNum = computed(() => route.query['asset-num'] as string);
+const assetNum = computed(() => Number(route.query['asset-num'] as string));
 
 // Check if user is logged in
 const isLoggedIn = computed(() => !!tokensStore.wallet);
 
 // Check if current user is the token owner
 const isTokenOwner = computed(() => {
-  if (!token.value?.owner || !CTokensProvider.getOperationalPublicKey()) return false;
-  return token.value.owner === CTokensProvider.getOperationalPublicKey();
+  if (!token.value?.ownerPublicKey || !CTokensProvider.getOperationalPublicKey()) return false;
+  return token.value.ownerPublicKey === CTokensProvider.getOperationalPublicKey();
 });
 
 // Connect to HTM
@@ -112,99 +111,6 @@ const amountValidation = computed(() => {
   return validateAmountPrecision(transferForm.value.amount, token.value.precision || 0);
 });
 
-// Computed properties
-const tokenName = computed(() => {
-  if (!token.value) return 'Unknown Token';
-  const metadata = token.value.metadata as { name?: string } | undefined;
-  return metadata?.name || token.value.nai || 'Unknown Token';
-});
-
-const tokenSymbol = computed(() => {
-  if (!token.value) return '';
-  const metadata = token.value.metadata as { symbol?: string } | undefined;
-  return metadata?.symbol || '';
-});
-
-const tokenDescription = computed(() => {
-  if (!token.value) return '';
-  const metadata = token.value.metadata as { description?: string } | undefined;
-  return metadata?.description || '';
-});
-
-const tokenImage = computed(() => {
-  if (!token.value) return '';
-  const metadata = token.value.metadata as { image?: string } | undefined;
-  return metadata?.image || '';
-});
-
-const tokenOwnerShort = computed(() => {
-  if (!token.value?.owner) return '';
-  const owner = token.value.owner;
-  if (owner.length <= 16) return owner;
-  return `${owner.slice(0, 8)}...${owner.slice(-8)}`;
-});
-
-const formattedTotalSupply = ref('0');
-const formattedMaxSupply = ref('0');
-const formattedUserBalance = ref('0.000');
-
-// Formatted top holders with proper balance display
-const formattedTopHolders = computed(() => {
-  if (!token.value || topHolders.value.length === 0) return [];
-
-  return topHolders.value.map(holder => {
-    return {
-      ...holder,
-      formattedAmount: formatAmount(holder.amount || '0', token.value!.precision || 0)
-    };
-  });
-});
-
-// Helper to format amount synchronously (fallback for top holders)
-const formatAmount = (amount: string, precision: number): string => {
-  try {
-    const num = parseFloat(amount);
-    if (isNaN(num)) return amount;
-
-    // Format with precision and add thousand separators
-    const parts = num.toFixed(precision).split('.');
-    parts[0] = parts[0]!.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    return parts.join('.');
-  } catch {
-    return amount;
-  }
-};
-
-// Parse asset amount - convert decimal to base units (integer with precision zeros)
-const parseAssetAmount = (amountStr: string, precision: number): string => {
-  const [integerPart, fractionalPart = ''] = amountStr.split('.');
-  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
-  return integerPart + normalizedFractional;
-};
-
-// Update formatted values
-const updateFormattedValues = async () => {
-  if (!token.value) return;
-
-  try {
-    const wax = await getWax();
-    const formatAsset = (value: string, precision: number, name?: string): string => {
-      const formatted = wax.formatter.formatNumber(value, precision);
-      return name ? `${formatted} ${name}` : formatted;
-    };
-
-    formattedTotalSupply.value = formatAsset(token.value.total_supply!, token.value.precision || 0, tokenSymbol.value);
-    formattedMaxSupply.value = token.value.max_supply === '0'
-      ? '∞ (Unlimited)'
-      : formatAsset(token.value.max_supply!, token.value.precision || 0, tokenSymbol.value);
-
-    if (userBalance.value)
-      formattedUserBalance.value = formatAsset(userBalance.value.amount!, token.value.precision || 0, tokenSymbol.value);
-  } catch (error) {
-    console.error('Failed to format values:', error);
-  }
-};
-
 // Load token details
 const loadTokenDetails = async () => {
   try {
@@ -219,31 +125,17 @@ const loadTokenDetails = async () => {
     if (!remoteToken)
       throw new Error(`Token with asset num ${assetNum.value} not found`);
 
-    token.value = String(remoteToken.liquid?.asset_num) === assetNum.value ? remoteToken.liquid! : String(remoteToken?.vesting?.asset_num) === assetNum.value ? remoteToken.vesting! : null;
+    token.value = await tokensStore.getTokenByAssetNum(assetNum.value);
 
-    if (!token.value)
-      throw new Error(`Token with asset num ${assetNum.value} not found`);
-
-    isStaked.value = isVesting(token.value.nai!, token.value.precision || 0);
-
-    // Update formatted values
-    await updateFormattedValues();
+    isStaked.value = token.value.isStaked;
 
     // Load user balance if user is logged in
-    // FIX THIS
     if (isLoggedIn.value) {
-      try {
-        // Get user balances from the store
-        await tokensStore.loadBalances();
-        userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => String(b.asset_num) === assetNum.value) || null;
-        if (userBalance.value)
-          await updateFormattedValues();
-
-      } catch (error) {
-        console.warn('Failed to load user balance:', error);
-      }
+      userBalance.value = await tokensStore.getBalanceSingleToken(
+        CTokensProvider.getOperationalPublicKey()!,
+        assetNum.value
+      );
     }
-
   } catch (error) {
     toastError('Failed to load token details', error);
   }
@@ -255,11 +147,10 @@ const loadTopHolders = async () => {
 
   try {
     isLoadingHolders.value = true;
-    topHolders.value = await tokensStore.getTopHolders(
-      assetNum.value
-    );
+    topHolders.value = (await tokensStore.getTopHolders(
+      token.value
+    )).items;
   } catch (error) {
-    console.warn('Failed to load top holders:', error);
     toastError('Failed to load top holders', error);
   } finally {
     isLoadingHolders.value = false;
@@ -272,9 +163,9 @@ const setMaxAmount = async () => {
 
   try {
     // Use the raw amount directly from the balance
-    transferForm.value.amount = userBalance.value.amount!;
+    transferForm.value.amount = userBalance.value.balance.toString();
   } catch (error) {
-    console.error('Failed to set max amount:', error);
+    toastError('Failed to set max amount:', error);
   }
 };
 
@@ -331,7 +222,7 @@ const validateAmountPrecision = (amount: string, precision: number): { isValid:
     // Check if user has sufficient balance
     // Note: Based on API response, userBalance.value.amount appears to be a decimal value
     if (userBalance.value) {
-      const userBalanceDecimal = parseFloat(userBalance.value.amount!);
+      const userBalanceDecimal = parseFloat(userBalance.value.balance.toString());
       // Compare decimal values directly (both numAmount and userBalanceDecimal are decimal)
       if (numAmount > userBalanceDecimal)
         return { isValid: false, error: 'Insufficient balance for this transfer' };
@@ -343,6 +234,13 @@ const validateAmountPrecision = (amount: string, precision: number): { isValid:
   }
 };
 
+// Parse asset amount - convert decimal to base units (integer with precision zeros)
+const parseAssetAmount = (amountStr: string, precision: number): string => {
+  const [integerPart, fractionalPart = ''] = amountStr.split('.');
+  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
+  return integerPart + normalizedFractional;
+};
+
 // Handle transfer (simplified for now)
 const handleTransfer = async () => {
   if (!token.value || !isLoggedIn.value) {
@@ -399,12 +297,11 @@ const handleTransfer = async () => {
     };
 
     // Reload user balance
-    await Promise.allSettled([
-      tokensStore.loadBalances(true),
-      loadTokenDetails(),
+    const [tokenUserBalanceData] = await Promise.all([
+      tokensStore.getBalanceSingleToken(CTokensProvider.getOperationalPublicKey()!, assetNum.value),
       loadTopHolders()
     ]);
-    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => String(b.asset_num) === assetNum.value) || null;
+    userBalance.value = tokenUserBalanceData;
   } catch (error) {
     toastError('Transfer failed', error);
   } finally {
@@ -430,7 +327,7 @@ const handleStake = async () => {
   }
 
   // Check if staking is allowed
-  if (!token.value.others_can_stake && !isTokenOwner.value) {
+  if (!token.value.othersCanStake && !isTokenOwner.value) {
     toastError('Staking is not allowed for this token', new Error('Staking disabled'));
     return;
   }
@@ -482,12 +379,11 @@ const handleStake = async () => {
     };
 
     // Reload user balance
-    await Promise.allSettled([
-      tokensStore.loadBalances(true),
-      loadTokenDetails(),
+    const [tokenUserBalanceData] = await Promise.all([
+      tokensStore.getBalanceSingleToken(CTokensProvider.getOperationalPublicKey()!, assetNum.value),
       loadTopHolders()
     ]);
-    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => String(b.asset_num) === assetNum.value) || null;
+    userBalance.value = tokenUserBalanceData;
   } catch (error) {
     toastError('Staking failed', error);
   } finally {
@@ -513,7 +409,7 @@ const handleUnstake = async () => {
   }
 
   // Check if unstaking is allowed
-  if (!token.value.others_can_unstake && !isTokenOwner.value) {
+  if (!token.value.othersCanUnstake && !isTokenOwner.value) {
     toastError('Unstaking is not allowed for this token', new Error('Unstaking disabled'));
     return;
   }
@@ -565,12 +461,11 @@ const handleUnstake = async () => {
     };
 
     // Reload user balance
-    await Promise.allSettled([
-      tokensStore.loadBalances(true),
-      loadTokenDetails(),
+    const [tokenUserBalanceData] = await Promise.all([
+      tokensStore.getBalanceSingleToken(CTokensProvider.getOperationalPublicKey()!, assetNum.value),
       loadTopHolders()
     ]);
-    userBalance.value = tokensStore.balances.find((b: CtokensAppBalance) => String(b.asset_num) === assetNum.value) || null;
+    userBalance.value = tokenUserBalanceData;
   } catch (error) {
     toastError('Unstaking failed', error);
   } finally {
@@ -600,17 +495,17 @@ const showQRCode = () => {
 
 // Copy owner address to clipboard
 const copyOwnerAddress = () => {
-  if (!token.value?.owner) return;
+  if (!token.value?.ownerPublicKey) return;
 
   try {
-    copyText(token.value.owner);
+    copyText(token.value.ownerPublicKey);
     toast.success('Owner address copied to clipboard');
     isCopied.value = true;
     setTimeout(() => {
       isCopied.value = false;
     }, 1000);
-  } catch (_error) {
-    toast.error('Failed to copy address');
+  } catch (error) {
+    toastError('Failed to copy address', error);
   }
 };
 
@@ -625,15 +520,14 @@ const copyNAI = () => {
     setTimeout(() => {
       isNaiCopied.value = false;
     }, 1000);
-  } catch (_error) {
-    toast.error('Failed to copy NAI');
+  } catch (error) {
+    toastError('Failed to copy NAI', error);
   }
 };
 
 watch(isLoggedIn, (newValue) => {
   if (newValue)
     void loadTokenDetails();
-
 });
 
 // Initialize
@@ -760,13 +654,13 @@ onMounted(async () => {
             <div class="flex flex-col sm:flex-row items-start gap-6 mb-6">
               <Avatar class="h-20 w-20 sm:h-24 sm:w-24 flex-shrink-0">
                 <AvatarImage
-                  v-if="tokenImage"
-                  :src="tokenImage"
-                  :alt="tokenName"
+                  v-if="token.image"
+                  :src="token.image"
+                  :alt="token.name"
                 />
                 <AvatarFallback>
                   <svg
-                    v-if="!tokenImage"
+                    v-if="!token.image"
                     width="48"
                     height="48"
                     xmlns="http://www.w3.org/2000/svg"
@@ -782,7 +676,7 @@ onMounted(async () => {
                     v-else
                     class="text-xl sm:text-2xl font-bold text-primary"
                   >
-                    {{ tokenSymbol ? tokenSymbol.slice(0, 2).toUpperCase() : tokenName.slice(0, 2).toUpperCase() }}
+                    {{ token.symbol ? token.symbol.slice(0, 2).toUpperCase() : token.name ? token.name.slice(0, 2).toUpperCase() : '' }}
                   </span>
                 </AvatarFallback>
               </Avatar>
@@ -790,10 +684,10 @@ onMounted(async () => {
               <div class="flex-1 min-w-0">
                 <div class="flex flex-col sm:flex-row sm:items-center gap-2 mb-3">
                   <h1 class="text-2xl sm:text-3xl font-bold text-foreground">
-                    {{ tokenName }}
+                    {{ token.name }}
                   </h1>
                   <span
-                    v-if="token.is_nft"
+                    v-if="token.isNft"
                     class="inline-flex items-center rounded-md bg-purple-500/10 text-[16px]/[18px] px-2 font-medium text-purple-500 border border-purple-500/20"
                   >
                     NFT
@@ -807,11 +701,11 @@ onMounted(async () => {
                 </div>
 
                 <p
-                  v-if="tokenDescription"
+                  v-if="token.description"
                   class="text-muted-foreground text-base mb-4 leading-relaxed whitespace-pre-line"
                   style="word-break:break-word"
                 >
-                  {{ tokenDescription }}
+                  {{ token.description }}
                 </p>
 
                 <!-- Technical Details - Compact -->
@@ -849,7 +743,7 @@ onMounted(async () => {
                       class="bg-muted px-1.5 py-0.5 rounded text-xs font-mono hover:bg-muted/80 transition-colors inline-flex items-center gap-1.5"
                       @click="copyOwnerAddress"
                     >
-                      {{ tokenOwnerShort }}
+                      {{ token.ownerPublicKey.slice(0, 6) }}...{{ token.ownerPublicKey.slice(-6) }}
                       <svg
                         width="14"
                         height="14"
@@ -871,26 +765,26 @@ onMounted(async () => {
                   <span
                     :class="[
                       'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
-                      token.is_nft ? 'bg-purple-50 text-purple-700 border-purple-200' : 'bg-emerald-50 text-emerald-700 border-emerald-200'
+                      token.isNft ? 'bg-purple-50 text-purple-700 border-purple-200' : 'bg-emerald-50 text-emerald-700 border-emerald-200'
                     ]"
                   >
-                    {{ token.is_nft ? 'NFT' : 'Fungible' }}
+                    {{ token.isNft ? 'NFT' : 'Fungible' }}
                   </span>
                   <span
                     :class="[
                       'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
-                      token.others_can_stake ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
+                      token.othersCanStake ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
                     ]"
                   >
-                    {{ token.others_can_stake ? 'Staking ✓' : 'Staking ✗' }}
+                    {{ token.othersCanStake ? 'Staking ✓' : 'Staking ✗' }}
                   </span>
                   <span
                     :class="[
                       'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
-                      token.others_can_unstake ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
+                      token.othersCanUnstake ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
                     ]"
                   >
-                    {{ token.others_can_unstake ? 'Unstaking ✓' : 'Unstaking ✗' }}
+                    {{ token.othersCanUnstake ? 'Unstaking ✓' : 'Unstaking ✗' }}
                   </span>
                 </div>
               </div>
@@ -921,7 +815,7 @@ onMounted(async () => {
                     <span class="text-xs font-medium text-muted-foreground">Total Supply</span>
                   </div>
                   <div class="text-sm font-bold text-foreground truncate">
-                    {{ formattedTotalSupply }}
+                    {{ token.displayTotalSupply }}
                   </div>
                 </div>
 
@@ -932,7 +826,7 @@ onMounted(async () => {
                     <span class="text-xs font-medium text-muted-foreground">Max Supply</span>
                   </div>
                   <div class="text-sm font-bold text-foreground truncate">
-                    {{ formattedMaxSupply }}
+                    {{ token.displayMaxSupply }}
                   </div>
                 </div>
 
@@ -943,7 +837,7 @@ onMounted(async () => {
                     <span class="text-xs font-medium text-muted-foreground">Your Balance</span>
                   </div>
                   <div class="text-sm font-bold text-foreground truncate">
-                    {{ isLoggedIn ? formattedUserBalance : '—' }}
+                    {{ isLoggedIn ? userBalance?.displayBalance : '—' }}
                   </div>
                 </div>
 
@@ -983,7 +877,7 @@ onMounted(async () => {
                 Transfer Tokens
               </CardTitle>
               <CardDescription>
-                Send {{ tokenSymbol || tokenName }} to another account
+                Send {{ token.symbol || token.name || '' }} to another account
               </CardDescription>
             </CardHeader>
             <CardContent class="space-y-6 flex-1">
@@ -1019,7 +913,7 @@ onMounted(async () => {
 
               <!-- No balance / token not owned state -->
               <div
-                v-else-if="!userBalance || Number(userBalance.amount) === 0"
+                v-else-if="!userBalance || userBalance.balance === 0n"
                 class="text-center py-12 space-y-4"
               >
                 <div class="w-16 h-16 mx-auto bg-amber-100 dark:bg-amber-900/20 rounded-full flex items-center justify-center">
@@ -1041,7 +935,7 @@ onMounted(async () => {
                     You don't own this token
                   </p>
                   <p class="text-sm text-muted-foreground">
-                    Your account doesn't have any {{ tokenSymbol || tokenName }} tokens to transfer.
+                    Your account doesn't have any {{ token.symbol || token.name || '' }} tokens to transfer.
                   </p>
                 </div>
               </div>
@@ -1079,14 +973,14 @@ onMounted(async () => {
 
                 <TokenAmountInput
                   v-model="transferForm.amount"
-                  :token-name="tokenName"
-                  :token-symbol="tokenSymbol"
-                  :token-image="tokenImage"
+                  :token-name="token.name"
+                  :token-symbol="token.symbol"
+                  :token-image="token.image"
                   :token-nai="token.nai"
                   :precision="token.precision"
                   :disabled="isTransferring"
-                  :available-balance="formattedUserBalance"
-                  :show-max-button="userBalance && Number(userBalance.amount) > 0"
+                  :available-balance="userBalance?.displayBalance || '0'"
+                  :show-max-button="userBalance && userBalance.balance > 0n"
                   :is-valid="amountValidation.isValid"
                   :validation-error="amountValidation.error"
                   @max="setMaxAmount"
@@ -1139,7 +1033,7 @@ onMounted(async () => {
 
           <!-- Stake/Unstake Section -->
           <Card
-            v-if="token && (token.others_can_stake || token.others_can_unstake || isTokenOwner)"
+            v-if="token && (token.othersCanStake || token.othersCanUnstake || isTokenOwner)"
             class="flex flex-col h-full"
           >
             <CardHeader>
@@ -1195,7 +1089,7 @@ onMounted(async () => {
 
               <!-- No balance state -->
               <div
-                v-else-if="!userBalance || Number(userBalance.amount) === 0"
+                v-else-if="!userBalance || userBalance.balance === 0n"
                 class="text-center py-12 space-y-4"
               >
                 <div class="w-16 h-16 mx-auto bg-amber-100 dark:bg-amber-900/20 rounded-full flex items-center justify-center">
@@ -1217,7 +1111,7 @@ onMounted(async () => {
                     You don't own this token
                   </p>
                   <p class="text-sm text-muted-foreground">
-                    Your account doesn't have any {{ tokenSymbol || tokenName }} tokens to stake/unstake.
+                    Your account doesn't have any {{ token.symbol || token.name || '' }} tokens to stake/unstake.
                   </p>
                 </div>
               </div>
@@ -1229,9 +1123,9 @@ onMounted(async () => {
               >
                 <TokenAmountInput
                   v-model="stakeForm.amount"
-                  :token-name="tokenName"
-                  :token-symbol="tokenSymbol"
-                  :token-image="tokenImage"
+                  :token-name="token.name"
+                  :token-symbol="token.symbol"
+                  :token-image="token.image"
                   :token-nai="token.nai"
                   :precision="token.precision"
                   :disabled="isStaking || isUnstaking"
@@ -1258,7 +1152,7 @@ onMounted(async () => {
 
                 <div class="grid grid-cols-2 gap-3">
                   <Button
-                    v-if="token.others_can_stake || isTokenOwner"
+                    v-if="token.othersCanStake || isTokenOwner"
                     size="lg"
                     :disabled="isStaking || isUnstaking || !stakeForm.amount"
                     @click="handleStake"
@@ -1293,7 +1187,7 @@ onMounted(async () => {
                   </Button>
 
                   <Button
-                    v-if="token.others_can_unstake || isTokenOwner"
+                    v-if="token.othersCanUnstake || isTokenOwner"
                     variant="outline"
                     size="lg"
                     :disabled="isStaking || isUnstaking || !stakeForm.amount"
@@ -1330,7 +1224,7 @@ onMounted(async () => {
                 </div>
 
                 <Alert
-                  v-if="!token.others_can_stake && !isTokenOwner"
+                  v-if="!token.othersCanStake && !isTokenOwner"
                   class="bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800"
                 >
                   <AlertDescription class="text-amber-800 dark:text-amber-200 text-sm">
@@ -1339,7 +1233,7 @@ onMounted(async () => {
                 </Alert>
 
                 <Alert
-                  v-if="!token.others_can_unstake && !isTokenOwner"
+                  v-if="!token.othersCanUnstake && !isTokenOwner"
                   class="bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800"
                 >
                   <AlertDescription class="text-amber-800 dark:text-amber-200 text-sm">
@@ -1369,7 +1263,7 @@ onMounted(async () => {
                 Top Holders
               </CardTitle>
               <CardDescription>
-                Accounts with the largest {{ tokenSymbol || tokenName }} balances
+                Accounts with the largest {{ token.symbol || token.name || '' }} balances
               </CardDescription>
             </CardHeader>
             <CardContent class="flex-1">
@@ -1399,8 +1293,8 @@ onMounted(async () => {
                 class="space-y-2"
               >
                 <div
-                  v-for="(holder, index) in formattedTopHolders.slice(0, 10)"
-                  :key="holder.user"
+                  v-for="(holder, index) in topHolders.slice(0, 10)"
+                  :key="holder.operationalKey"
                   class="flex items-center gap-4 p-3 rounded-lg border hover:border-primary/20 hover:bg-accent/50 transition-colors"
                 >
                   <div class="relative flex-shrink-0">
@@ -1430,12 +1324,12 @@ onMounted(async () => {
                   <div class="flex-1 min-w-0">
                     <div class="flex flex-col sm:flex-row sm:items-center gap-1">
                       <p class="font-semibold text-foreground truncate">
-                        {{ holder.metadata?.name || holder.user }}
+                        {{ holder.displayName }}
                       </p>
                       <TooltipProvider>
                         <Tooltip>
                           <TooltipTrigger>
-                            <CopyButton :value="holder.user" />
+                            <CopyButton :value="holder.operationalKey" />
                           </TooltipTrigger>
                           <TooltipContent>
                             <p>Copy holder address</p>
@@ -1450,10 +1344,10 @@ onMounted(async () => {
 
                   <div class="text-right flex-shrink-0">
                     <p class="font-bold text-foreground">
-                      {{ holder.formattedAmount }}
+                      {{ holder.displayAmount }}
                     </p>
                     <p class="text-xs text-muted-foreground">
-                      {{ tokenSymbol || 'tokens' }}
+                      {{ token.symbol || 'tokens' }}
                     </p>
                   </div>
                 </div>
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 9e33dcc..184102b 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -1,27 +1,52 @@
 import type { IWaxBaseInterface } from '@hiveio/wax';
-import { HtmTransaction } from '@mtyszczak-cargo/htm';
 import { defineStore } from 'pinia';
 import { shallowRef } from 'vue';
 
+import { transformUserName } from '@/stores/user.store';
 import { getWax } from '@/stores/wax.store';
 import { isVesting } from '@/utils/nai-tokens';
-import type {
-  CtokensAppBalance,
-  CtokensAppToken,
-  CtokensAppTopHolder
-} from '@/utils/wallet/ctokens/api';
+import type { CtokensAppAssetType, CtokensAppBalance, CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import { useSettingsStore } from './settings.store';
-import { transformUserName } from './user.store';
-import { useWalletStore } from './wallet.store';
 
-export interface CTokenDisplay {
+export interface CTokenDisplayBase {
+  isNft: boolean;
   nai: string;
   assetNum: number;
   isStaked: boolean;
-  ownerPublicKey: string;
   precision: number;
+  metadata: Record<string, unknown>;
+  // Parsed from the metadata
+  name?: string;
+  symbol?: string;
+  description?: string;
+  website?: string;
+  image?: string;
+}
+
+export interface CTokenUser {
+  operationalKey: string;
+  metadata: Record<string, unknown>;
+  displayName: string;
+  about: string;
+  name: string;
+  profileImage: string;
+  website: string;
+}
+
+export interface CTokenUserRanked extends CTokenUser {
+  rank: number;
+  amount: bigint;
+  displayAmount: string;
+}
+
+export interface CTokenBalanceDisplay extends CTokenDisplayBase {
+  balance: bigint;
+  displayBalance: string;
+}
+
+export interface CTokenDefinitionDisplay extends CTokenDisplayBase {
+  ownerPublicKey: string;
   displayTotalSupply: string;
   totalSupply: bigint;
   maxSupply: bigint;
@@ -29,16 +54,60 @@ export interface CTokenDisplay {
   capped: boolean;
   othersCanStake: boolean;
   othersCanUnstake: boolean;
-  isNft: boolean;
-  metadata?: Record<string, unknown>;
-  // Parsed from the metadata
-  name?: string;
-  symbol?: string;
-  description?: string;
-  website?: string;
-  image?: string;
 }
 
+export interface CTokenPairBalanceDefinition {
+  liquid: CTokenBalanceDisplay;
+  vesting: CTokenBalanceDisplay;
+}
+
+export interface CTokenPairDefinition {
+  liquid: CTokenDefinitionDisplay;
+  vesting: CTokenDefinitionDisplay;
+}
+
+export interface TokenStoreApiResponse<T> {
+  items: T[];
+  total: number;
+  page: number;
+  pages: number;
+  hasMore: boolean;
+}
+
+const transformUserToDisplayFormat = <T extends {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  metadata?: Record<string, any>;
+  user?: string;
+  operational_key?: string;
+}>(userData: T): CTokenUser => {
+  const { metadata } = userData;
+
+  const operationalKey = userData.user || String(userData.operational_key);
+
+  return {
+    operationalKey,
+    metadata: metadata || {},
+    displayName: String(metadata?.name) || transformUserName(operationalKey),
+    about: metadata?.about as string,
+    name: metadata?.name as string,
+    profileImage: metadata?.profile_image as string,
+    website: metadata?.website as string
+  };
+};
+
+const transformToApiResponseFormat = <ActualDataResponse, T extends {
+  total_items?: number;
+  total_pages?: number;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  items?: any[];
+}>(transformedArrayItems: ActualDataResponse[], originalApiResponse: T, page: number): TokenStoreApiResponse<ActualDataResponse> => ({
+    items: transformedArrayItems,
+    total: originalApiResponse.total_items || 0,
+    page,
+    pages: originalApiResponse.total_pages || 1,
+    hasMore: page < (originalApiResponse.total_pages || 0)
+  });
+
 const cTokensProvider = shallowRef<CTokensProvider | undefined>(undefined);
 
 const formatAsset = (wax: IWaxBaseInterface, value: string | bigint, precision: number, name?: string): string => {
@@ -46,10 +115,11 @@ const formatAsset = (wax: IWaxBaseInterface, value: string | bigint, precision:
   return name ? `${formatted} ${name}` : formatted;
 };
 
-export const transformTokenToDisplayFormat = (wax: IWaxBaseInterface, token: Required<CtokensAppToken>): CTokenDisplay => {
+export const transformTokenToDisplayFormat = (wax: IWaxBaseInterface, token: Required<CtokensAppToken>, isNft: boolean): CTokenDefinitionDisplay => {
   const { name, symbol, description, website, image } = (token.metadata || {}) as Record<string, string>;
 
   return {
+    isNft,
     nai: token.nai,
     assetNum: Number(token.asset_num),
     isStaked: isVesting(token.nai, token.precision),
@@ -62,7 +132,26 @@ export const transformTokenToDisplayFormat = (wax: IWaxBaseInterface, token: Req
     capped: token.capped,
     othersCanStake: token.others_can_stake,
     othersCanUnstake: token.others_can_unstake,
-    isNft: token.is_nft,
+    metadata: token.metadata as Record<string, unknown>,
+    name,
+    symbol,
+    description,
+    website,
+    image
+  };
+};
+
+export const transformTokenBalanceToDisplayFormat = (wax: IWaxBaseInterface, token: Required<CtokensAppBalance>, isNft: boolean): CTokenBalanceDisplay => {
+  const { name, symbol, description, website, image } = (token.metadata || {}) as Record<string, string>;
+
+  return {
+    isNft,
+    nai: token.nai,
+    assetNum: Number(token.asset_num),
+    isStaked: isVesting(token.nai, token.precision),
+    precision: token.precision,
+    displayBalance: formatAsset(wax, token.amount, token.precision, symbol || name),
+    balance: BigInt(token.amount),
     metadata: token.metadata as Record<string, unknown>,
     name,
     symbol,
@@ -74,267 +163,191 @@ export const transformTokenToDisplayFormat = (wax: IWaxBaseInterface, token: Req
 
 export const useTokensStore = defineStore('tokens', {
   state: () => ({
-    balances: [] as CtokensAppBalance[],
-    tokenDefinitions: [] as CtokensAppBalance[],
-    registeredTokens: [] as CTokenDisplay[],
-    isLoadingBalances: false,
-    isLoadingTokens: false,
-    isLoadingRegisteredTokens: false,
-    lastError: null as string | null,
+    fungibleBalances: [] as CTokenPairBalanceDefinition[],
+    fungibleTokenDefinitions: [] as CTokenPairDefinition[],
+    fungibleTokensCreatedByUser: [] as CTokenPairDefinition[],
+    /* Helper flag to indicate if any API call is in progress */
+    isLoading: false,
     ignoreLogIn: false
   }),
   getters: {
-    wallet: () => cTokensProvider.value,
-    tokenCount: (state) => state.balances.length,
-    hasBalances: (state) => state.balances.length > 0,
-    hasTokenDefinitions: (state) => state.tokenDefinitions.length > 0,
-    hasRegisteredTokens: (state) => state.registeredTokens.length > 0,
-    // Filtered getters for registered tokens
-    filteredTokens: (state) => (nai?: string, precision?: number) => {
-      let filtered = state.registeredTokens;
-
-      if (nai)
-        filtered = filtered.filter((token: CTokenDisplay) => token.nai === nai);
-
-      if (precision !== undefined)
-        filtered = filtered.filter((token: CTokenDisplay) => token.precision === precision);
-
-      return filtered;
-    },
-    stakedTokens: (state) => state.registeredTokens.filter((token: CTokenDisplay) => token.isStaked),
-    unstakedTokens: (state) => state.registeredTokens.filter((token: CTokenDisplay) => !token.isStaked),
-    nftTokens: (state) => state.registeredTokens.filter((token: CTokenDisplay) => token.isNft),
-    fungibleTokens: (state) => state.registeredTokens.filter((token: CTokenDisplay) => !token.isNft)
+    wallet: () => cTokensProvider.value
   },
   actions: {
-    async loadBalances (forceRefresh = false) {
-      const operationalKey = CTokensProvider.getOperationalPublicKey();
-
-      if (!operationalKey) {
-        this.lastError = 'No operational key available';
-        return;
-      }
-
-      if (this.isLoadingBalances && !forceRefresh) return;
-
-      this.isLoadingBalances = true;
-      this.lastError = null;
+    async getBalance (user: string, assetNum: number | undefined, page = 1, assetType: CtokensAppAssetType = 'token' as CtokensAppAssetType): Promise<TokenStoreApiResponse<CTokenPairBalanceDefinition>> {
+      this.isLoading = true;
 
       try {
         const wax = await getWax();
 
-        // TODO: Implement NFT filtering
-
-        // Get balances from ctokens-api
-        const cTokenBalances = await wax.restApi.ctokensApi.balances({ user: operationalKey, page: 1 });
+        const cTokenBalances = await wax.restApi.ctokensApi.balances({ user, 'asset-num': assetNum, page, 'asset-type': assetType });
 
         // Filter out null values when flattening
-        this.balances = cTokenBalances.items!.flatMap(balance => {
-          const result: CtokensAppBalance[] = [];
-          if (balance.liquid) result.push(balance.liquid);
-          if (balance.vesting) result.push(balance.vesting);
-          return result;
+        const balancesNormalized = cTokenBalances.items!.map(token => {
+          const liquid = transformTokenBalanceToDisplayFormat(wax, token.liquid as Required<CtokensAppBalance>, token.is_nft!);
+          const vesting = transformTokenBalanceToDisplayFormat(wax, token.vesting as Required<CtokensAppBalance>, token.is_nft!);
+
+          return {
+            liquid,
+            vesting,
+            isNft: token.is_nft!
+          };
         });
-      } catch (error) {
-        console.error('Failed to load balances:', error);
-        this.lastError = error instanceof Error ? error.message : 'Failed to load balances';
-        this.balances = [];
+
+        return transformToApiResponseFormat(balancesNormalized, cTokenBalances, page);
       } finally {
-        this.isLoadingBalances = false;
+        this.isLoading = false;
       }
     },
-    async loadTokenDefinitions (creator?: string, forceRefresh = false) {
-      if (this.isLoadingTokens && !forceRefresh) return;
+    async getBalanceSingleToken (user: string, assetNum: number): Promise<CTokenBalanceDisplay> {
+      const balanceObj = await this.getBalance(user, assetNum);
+      const itemRequested = balanceObj.items[0]?.liquid.assetNum === assetNum
+        ? balanceObj.items[0]!.liquid
+        : balanceObj.items[0]?.vesting.assetNum === assetNum
+          ? balanceObj.items[0]!.vesting
+          : null;
+
+      if (!itemRequested)
+        throw new Error(`Balance for asset number ${assetNum} not found`);
+
+      return itemRequested;
+    },
+    getUserPublicKey (): string | undefined {
+      return CTokensProvider.getOperationalPublicKey();
+    },
+    async loadBalances (page = 1): Promise<TokenStoreApiResponse<CTokenPairBalanceDefinition>> {
+      const operationalKey = this.getUserPublicKey();
+
+      if (!operationalKey)
+        throw new Error('CTokens operational key not found - failed to load balances');
 
-      this.isLoadingTokens = true;
-      this.lastError = null;
+      const balances = await this.getBalance(operationalKey, undefined, page);
+
+      this.fungibleBalances = balances.items;
+
+      return balances;
+    },
+    async getCreatedTokens (user: string, page = 1): Promise<TokenStoreApiResponse<CTokenPairDefinition>> {
+      this.isLoading = true;
 
       try {
         const wax = await getWax();
 
-        // Get registered tokens from ctokens-api
-        const tokens = await wax.restApi.ctokensApi.tokens({ owner: creator });
+        const cTokensCreated = await wax.restApi.ctokensApi.tokens({ owner: user, page, 'asset-type': 'token' as CtokensAppAssetType });
 
-        // Filter by creator if provided
-        this.tokenDefinitions = tokens.items!.flatMap(token => {
-          const result: CtokensAppBalance[] = [];
-          if (token.liquid) result.push(token.liquid);
-          if (token.vesting) result.push(token.vesting);
-          return result;
+        const normalizedTokens = cTokensCreated.items!.map(token => {
+          const liquid = transformTokenToDisplayFormat(wax, token.liquid as Required<CtokensAppToken>, false);
+          const vesting = transformTokenToDisplayFormat(wax, token.vesting as Required<CtokensAppToken>, false);
+
+          return {
+            liquid,
+            vesting,
+            isNft: false
+          };
         });
-      } catch (error) {
-        console.error('Failed to load token definitions:', error);
-        this.lastError = error instanceof Error ? error.message : 'Failed to load token definitions';
-        this.tokenDefinitions = [];
+
+        return transformToApiResponseFormat(normalizedTokens, cTokensCreated, page);
       } finally {
-        this.isLoadingTokens = false;
+        this.isLoading = false;
       }
     },
-    async getCurrentUserMetadata () {
-      const wax = await getWax();
-
-      if (this.wallet?.publicKey === undefined)
-        throw new Error('Could not load CTokens wallet');
+    async loadCreatedTokens (page = 1): Promise<TokenStoreApiResponse<CTokenPairDefinition>> {
+      const operationalKey = this.getUserPublicKey();
 
-      const user = await wax.restApi.ctokensApi.users({ user: this.wallet.publicKey });
+      if (!operationalKey)
+        throw new Error('CTokens operational key not found - failed to load created tokens');
 
-      if (!user?.management_key)
-        throw new Error('CTokens user not found');
+      const tokens = await this.getCreatedTokens(operationalKey, page);
 
-      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-      const metadata = user.metadata as Record<string, any>;
+      this.fungibleTokensCreatedByUser = tokens.items;
 
-      return {
-        displayName: metadata?.name || transformUserName(this.wallet.publicKey),
-        about: metadata?.about,
-        name: metadata?.name,
-        profileImage: metadata?.profile_image,
-        website: metadata?.website
-      };
+      return tokens;
     },
-    /**
-     * Load registered tokens with pre-formatted display data
-     */
-    async loadRegisteredTokens (assetNum?: string | number, page = 1, forceRefresh = false) {
-      if (this.isLoadingRegisteredTokens && !forceRefresh) return;
-
-      this.isLoadingRegisteredTokens = true;
-      this.lastError = null;
+    async loadTokens (page = 1): Promise<TokenStoreApiResponse<CTokenPairDefinition>> {
+      this.isLoading = true;
 
       try {
         const wax = await getWax();
-        // Get raw tokens from API
-        const tokens = await wax.restApi.ctokensApi.tokens(assetNum ? { 'asset-num': Number(assetNum) } : {});
-
-        // Transform tokens to display format
-        const transformedTokens = tokens.items!.flatMap(token => ([
-          transformTokenToDisplayFormat(wax, token.liquid as Required<CtokensAppToken>),
-          transformTokenToDisplayFormat(wax, token.vesting as Required<CtokensAppToken>)
-        ]));
-
-        // For pagination, we append or replace based on page
-        if (page === 1)
-          this.registeredTokens = transformedTokens;
-        else
-          this.registeredTokens.push(...transformedTokens);
-
-        // TODO: Implement proper pagination handling
-
-        return {
-          tokens: transformedTokens,
-          hasMore: tokens.items!.length === 100 // API returns 100 results per page
-        };
-      } catch (error) {
-        console.error('Failed to load registered tokens:', error);
-        this.lastError = error instanceof Error ? error.message : 'Failed to load registered tokens';
-        throw error;
+
+        const cTokensCreated = await wax.restApi.ctokensApi.tokens({ page, 'asset-type': 'token' as CtokensAppAssetType });
+
+        this.fungibleTokenDefinitions = cTokensCreated.items!.map(token => {
+          const liquid = transformTokenToDisplayFormat(wax, token.liquid as Required<CtokensAppToken>, false);
+          const vesting = transformTokenToDisplayFormat(wax, token.vesting as Required<CtokensAppToken>, false);
+
+          return {
+            liquid,
+            vesting,
+            isNft: false
+          };
+        });
+
+        return transformToApiResponseFormat(this.fungibleTokenDefinitions, cTokensCreated, page);
       } finally {
-        this.isLoadingRegisteredTokens = false;
+        this.isLoading = false;
       }
     },
-    /**
-     * Get filtered registered tokens list
-     */
-    getFilteredRegisteredTokens (nai?: string, precision?: number): CTokenDisplay[] {
-      return this.filteredTokens(nai, precision);
-    },
-    /**
-     * Get single registered token by NAI and precision
-     */
-    getRegisteredTokenByNAI (nai: string, precision?: number): CTokenDisplay | undefined {
-      return this.registeredTokens.find((token: CTokenDisplay) =>
-        token.nai === nai && (precision === undefined || token.precision === precision)
-      );
+    async getTokenByAssetNum (assetNum: number, page = 1): Promise<CTokenDefinitionDisplay> {
+      this.isLoading = true;
+
+      try {
+        const wax = await getWax();
+
+        const cToken = await wax.restApi.ctokensApi.tokens({ 'asset-num': assetNum, page, 'asset-type': 'token' as CtokensAppAssetType });
+
+        const itemRequested = cToken.items?.[0]?.liquid?.asset_num === assetNum
+          ? cToken.items[0]!.liquid!
+          : cToken.items?.[0]?.vesting?.asset_num === assetNum
+            ? cToken.items[0]!.vesting!
+            : null;
+
+        if (!itemRequested)
+          throw new Error(`Definition for asset number ${assetNum} not found`);
+
+        return transformTokenToDisplayFormat(wax, itemRequested as Required<CtokensAppToken>, false);
+      } finally {
+        this.isLoading = false;
+      }
     },
-    async getTopHolders (assetNum: number | string, page = 1): Promise<CtokensAppTopHolder[]> {
+    async getCurrentUserMetadata (): Promise<CTokenUser> {
       const wax = await getWax();
-      const response = await wax.restApi.ctokensApi.topHolders({ 'asset-num': Number(assetNum), page });
 
-      return response.items || [];
-    },
-    getTokenByNAI (nai: string): CtokensAppBalance | undefined {
-      return this.balances.find(balance => balance.nai === nai);
-    },
-    getTokenDefinitionByNAI (nai: string): CtokensAppToken | undefined {
-      return this.tokenDefinitions.find(token => token.nai === nai);
-    },
-    async refreshAll () {
-      await Promise.all([
-        this.loadBalances(true),
-        this.loadTokenDefinitions(undefined, true),
-        this.loadRegisteredTokens(undefined, 1, true)
-      ]);
-    },
-    clearError () {
-      this.lastError = null;
-    },
-    async updateTokenMetadata (
-      nai: string,
-      precision: number,
-      metadata: Record<string, string>
-    ): Promise<string> {
-      const operationalKey = CTokensProvider.getOperationalPublicKey();
+      const operationalKey = this.getUserPublicKey();
       if (!operationalKey)
-        throw new Error('No operational key available');
+        throw new Error('Could not retrieve user metadata - CTokens wallet not connected');
 
-      // Get operational account from settings
-      const settingsStore = useSettingsStore();
-      const operationalAccount = settingsStore.settings.account;
+      const user = await wax.restApi.ctokensApi.users({ user: operationalKey });
 
-      if (!operationalAccount)
-        throw new Error('No operational account configured');
+      if (!user?.management_key)
+        throw new Error('CTokens user not found');
 
-      // Get L1 wallet for signing the transaction
-      const walletStore = useWalletStore();
-      await walletStore.createWalletFor(settingsStore.settings, 'posting');
+      return transformUserToDisplayFormat(user);
+    },
+    async getTopHolders (assetData: Pick<CTokenDefinitionDisplay, 'precision' | 'assetNum' | 'symbol' | 'name'>, page = 1): Promise<TokenStoreApiResponse<CTokenUserRanked>> {
+      this.isLoading = true;
 
-      if (!walletStore.wallet)
-        throw new Error('No L1 wallet available');
+      try {
+        const wax = await getWax();
 
-      const wax = await getWax();
+        const cTokensTopHolders = await wax.restApi.ctokensApi.topHolders({ page, 'asset-num': assetData.assetNum });
+
+        const topHolders = cTokensTopHolders.items!.map(holder => {
+          const balance = BigInt(holder.amount || '0');
+          const userData = transformUserToDisplayFormat(holder);
+          const displayAmount = formatAsset(wax, balance, assetData.precision, assetData.symbol || assetData.name);
+
+          return {
+            ...userData,
+            rank: Number(holder.rank || 0),
+            amount: balance,
+            displayAmount
+          } satisfies CTokenUserRanked;
+        });
 
-      // Create CTokensProvider instance for L2 signing (owner role for metadata updates)
-      const l2Wallet = await CTokensProvider.for(wax, 'owner');
-
-      // Convert metadata object to array of key-value pairs
-      const metadataItems = Object.entries(metadata).map(([key, value]) => ({
-        key,
-        value
-      }));
-
-      // Set proxy account for HTM transactions
-      HtmTransaction.HiveProxyAccount = operationalAccount;
-
-      // Create L2 HTM transaction for asset metadata update
-      const l2Transaction = new HtmTransaction(wax);
-      l2Transaction.pushOperation({
-        asset_metadata_update_operation: {
-          owner: operationalKey,
-          identifier: {
-            amount: '0',
-            nai,
-            precision
-          },
-          metadata: {
-            items: metadataItems
-          }
-        }
-      });
-
-      // Sign L2 transaction with management wallet (owner role)
-      await l2Wallet.signTransaction(l2Transaction);
-
-      // Create L1 transaction to broadcast the HTM transaction
-      const l1Transaction = await wax.createTransaction();
-      l1Transaction.pushOperation(l2Transaction);
-
-      // Sign L1 transaction with active wallet
-      await walletStore.wallet.signTransaction(l1Transaction);
-
-      // Broadcast the transaction
-      await wax.broadcast(l1Transaction);
-
-      return l1Transaction.legacy_id;
+        return transformToApiResponseFormat(topHolders, cTokensTopHolders, page);
+      } finally {
+        this.isLoading = false;
+      }
     },
     async reset (cTokensWallet?: CTokensProvider | undefined) {
       // Cleanup only if we don't want to use any other L2 wallet
-- 
GitLab


From 71b2271fee78ddefb628820c28a2a59617ba55aa Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 19 Nov 2025 08:24:38 +0100
Subject: [PATCH 091/102] Create separated directory for HTM components

---
 src/components/TransferDetailsCard.vue        | 374 ------------------
 src/components/{ => htm}/HTMHeader.vue        |   0
 src/components/{ => htm}/HTMLoginContent.vue  |   0
 src/components/{ => htm}/HTMLoginForm.vue     |   3 +-
 .../{wallet => htm}/HTMProvidePassword.vue    |   3 +-
 .../{ => htm}/HTMProvidePasswordContent.vue   |   0
 src/components/{ => htm}/HTMTokenCard.vue     |   3 +-
 src/components/{ => htm}/HTMTokenPreview.vue  |   0
 src/components/{ => htm}/HTMView.vue          |   3 +-
 .../{ => htm}/tokens/QRCodeCard.vue           |   2 +-
 .../{ => htm/tokens}/TokenAmountInput.vue     |   0
 .../{ => htm}/tokens/TokenSelector.vue        |   0
 .../tokens}/TokenSelectorWithAmount.vue       |   2 +-
 .../onboarding/wallets/htm/HTMConnect.vue     |   3 +-
 src/layouts/default.vue                       |   3 +-
 src/pages/tokens/create.vue                   |   4 +-
 src/pages/tokens/edit.vue                     |   2 +-
 src/pages/tokens/invoice.vue                  |   2 +-
 src/pages/tokens/list.vue                     |   4 +-
 src/pages/tokens/my-balance.vue               |   4 +-
 src/pages/tokens/my-tokens.vue                |   4 +-
 src/pages/tokens/register-account.vue         |   4 +-
 src/pages/tokens/send-token.vue               | 343 ----------------
 src/pages/tokens/token.vue                    |   4 +-
 24 files changed, 28 insertions(+), 739 deletions(-)
 delete mode 100644 src/components/TransferDetailsCard.vue
 rename src/components/{ => htm}/HTMHeader.vue (100%)
 rename src/components/{ => htm}/HTMLoginContent.vue (100%)
 rename src/components/{ => htm}/HTMLoginForm.vue (98%)
 rename src/components/{wallet => htm}/HTMProvidePassword.vue (95%)
 rename src/components/{ => htm}/HTMProvidePasswordContent.vue (100%)
 rename src/components/{ => htm}/HTMTokenCard.vue (87%)
 rename src/components/{ => htm}/HTMTokenPreview.vue (100%)
 rename src/components/{ => htm}/HTMView.vue (98%)
 rename src/components/{ => htm}/tokens/QRCodeCard.vue (97%)
 rename src/components/{ => htm/tokens}/TokenAmountInput.vue (100%)
 rename src/components/{ => htm}/tokens/TokenSelector.vue (100%)
 rename src/components/{ => htm/tokens}/TokenSelectorWithAmount.vue (96%)
 delete mode 100644 src/pages/tokens/send-token.vue

diff --git a/src/components/TransferDetailsCard.vue b/src/components/TransferDetailsCard.vue
deleted file mode 100644
index 0009376..0000000
--- a/src/components/TransferDetailsCard.vue
+++ /dev/null
@@ -1,374 +0,0 @@
-<script setup lang="ts">
-import type { htm_operation } from '@mtyszczak-cargo/htm';
-import { computed, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
-import { toast } from 'vue-sonner';
-
-import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
-import ReceiverTokenSummary from '@/components/ReceiverTokenSummary.vue';
-import TokenAmountInput from '@/components/TokenAmountInput.vue';
-import TokenSelectorWithAmount from '@/components/TokenSelectorWithAmount.vue';
-import TransferCompletedSummary from '@/components/TransferCompletedSummary.vue';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { useTokensStore } from '@/stores/tokens.store';
-import { toastError } from '@/utils/parse-error';
-import { waitForTransactionStatus } from '@/utils/transaction-status';
-import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
-
-interface Props {
-  isReceiveMode: boolean;
-  hasNaiFromUrl: boolean;
-  shouldShowTokenSelector: boolean;
-  receiverName?: string;
-  receiverKey?: string;
-  receiverAvatar?: string;
-  tokenData?: CtokensAppToken | null;
-  queryAmount?: string;
-  queryMemo?: string;
-  assetNum: string;
-  precision: string;
-  selectedTokenAssetNum?: string;
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-  updateSelectedTokenAssetNum: [value: string];
-  transferCompleted: [summary: { amount: string; tokenLabel: string; receiver: string; remainingBalance?: string; timestamp?: string }];
-  updateAmount: [value: string];
-  updateMemo: [value: string];
-}>();
-
-const router = useRouter();
-const tokensStore = useTokensStore();
-
-// Form state
-const form = ref({
-  amount: props.queryAmount || '',
-  memo: props.queryMemo || ''
-});
-
-const selectedTokenAssetNum = computed({
-  get: () => props.selectedTokenAssetNum || '',
-  set: (value: string) => emit('updateSelectedTokenAssetNum', value)
-});
-const showDetails = ref(false);
-const isUpdating = ref(false);
-const isSending = ref(false);
-const transferCompleted = ref(false);
-const sentSummary = ref<{ amount: string; tokenLabel: string; receiver: string; remainingBalance?: string; timestamp?: string } | null>(null);
-
-// Check if user is logged in
-const isLoggedIn = computed(() => !!tokensStore.wallet);
-
-const tokenName = computed(() => {
-  if (!props.tokenData) return 'Unknown Token';
-  const metadata = props.tokenData.metadata as { name?: string } | undefined;
-  return metadata?.name || props.tokenData.nai || 'Unknown Token';
-});
-
-const tokenSymbol = computed(() => {
-  if (!props.tokenData) return '';
-  const metadata = props.tokenData.metadata as { symbol?: string } | undefined;
-  return metadata?.symbol || '';
-});
-
-const tokenImage = computed(() => {
-  if (!props.tokenData) return '';
-  const metadata = props.tokenData.metadata as { image?: string } | undefined;
-  return metadata?.image || '';
-});
-
-const amountValidation = computed(() => {
-  if (!form.value.amount)
-    return { isValid: true, error: '' };
-
-  if (!props.tokenData)
-    return { isValid: true, error: '' };
-
-  return validateAmountPrecision(form.value.amount, props.tokenData.precision || 0);
-});
-
-const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
-  try {
-    const cleanAmount = amount.replace(/[,\s]/g, '');
-
-    if (!/^\d*\.?\d*$/.test(cleanAmount))
-      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
-
-    const numAmount = parseFloat(cleanAmount);
-    if (isNaN(numAmount) || numAmount <= 0)
-      return { isValid: false, error: 'Amount must be a positive number' };
-
-    if (!isFinite(numAmount))
-      return { isValid: false, error: 'Amount value is too large' };
-
-    const decimalIndex = cleanAmount.indexOf('.');
-    if (decimalIndex !== -1) {
-      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
-      if (decimalPlaces > precision) {
-        return {
-          isValid: false,
-          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
-        };
-      }
-    }
-
-    const multiplier = Math.pow(10, precision);
-    const baseUnits = numAmount * multiplier;
-
-    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
-    if (baseUnits > MAX_SAFE_BASE_UNITS)
-      return { isValid: false, error: 'Amount is too large and would cause overflow' };
-
-    const roundedBaseUnits = Math.round(baseUnits);
-    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
-      return {
-        isValid: false,
-        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
-      };
-    }
-
-    return { isValid: true, parsedAmount: roundedBaseUnits.toString() };
-  } catch (_error) {
-    return { isValid: false, error: 'Invalid amount format' };
-  }
-};
-
-const isFormValid = computed(() => {
-  if (props.isReceiveMode) {
-    if (!props.tokenData) return false;
-    if (form.value.amount.trim() === '') return true;
-    return amountValidation.value.isValid;
-  }
-  if (props.shouldShowTokenSelector && !selectedTokenAssetNum.value) return false;
-  if (form.value.amount.trim() === '') return true;
-  return amountValidation.value.isValid;
-});
-
-const parseAssetAmount = (amountStr: string, precision: number): string => {
-  const [integerPart, fractionalPart = ''] = amountStr.split('.');
-  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
-  return integerPart + normalizedFractional;
-};
-
-const handleSend = async () => {
-  if (!props.tokenData) {
-    toastError('Token not loaded', new Error('Token details not available'));
-    return;
-  }
-
-  if (!isLoggedIn.value || !CTokensProvider.getOperationalPublicKey()) {
-    toast.error('Please log in to your wallet first');
-    router.push({
-      path: '/tokens/list'
-    });
-    return;
-  }
-
-  if (!form.value.amount || !props.receiverKey) {
-    toastError('Missing required fields', new Error('Amount and receiver are required'));
-    return;
-  }
-
-  if (!amountValidation.value.isValid) {
-    toastError('Invalid amount', new Error(amountValidation.value.error || 'Invalid amount format'));
-    return;
-  }
-
-  try {
-    isSending.value = true;
-
-    const baseAmount = parseAssetAmount(form.value.amount, props.tokenData.precision || 0);
-
-    const sender = CTokensProvider.getOperationalPublicKey()!;
-
-    await waitForTransactionStatus(
-      () => ([{
-        token_transfer_operation: {
-          amount: {
-            amount: baseAmount,
-            nai: props.tokenData!.nai!,
-            precision: props.tokenData!.precision || 0
-          },
-          receiver: props.receiverKey!,
-          sender,
-          memo: form.value.memo
-        }
-      } satisfies htm_operation]),
-      'Transfer'
-    );
-
-    transferCompleted.value = true;
-
-    const balanceObj = await tokensStore.getBalanceSingleToken(sender, props.tokenData.asset_num!);
-
-    const receiverLabel = props.receiverName || props.receiverKey || 'Recipient';
-    const tokenLabel = tokenSymbol.value || tokenName.value || props.tokenData!.nai || '';
-
-    const ts = new Date().toISOString();
-
-    sentSummary.value = {
-      amount: form.value.amount,
-      tokenLabel,
-      receiver: receiverLabel,
-      remainingBalance: balanceObj.displayBalance,
-      timestamp: ts
-    };
-
-    emit('transferCompleted', sentSummary.value);
-  } catch (error) {
-    toastError('Transfer failed', error);
-  } finally {
-    isSending.value = false;
-  }
-};
-
-// Watch query params changes to update form
-watch(() => props.queryAmount, (newValue) => {
-  if (newValue)
-    form.value.amount = newValue;
-});
-
-watch(() => props.queryMemo, (newValue) => {
-  if (newValue)
-    form.value.memo = newValue;
-});
-
-// Watch form changes to emit updates
-watch(() => form.value.amount, (newValue) => {
-  emit('updateAmount', newValue);
-});
-
-watch(() => form.value.memo, (newValue) => {
-  emit('updateMemo', newValue);
-});
-</script>
-
-<template>
-  <Card>
-    <CardHeader>
-      <CardTitle>Transfer details</CardTitle>
-      <CardDescription>
-        {{ isReceiveMode ? 'Review the transfer details' : (hasNaiFromUrl ? 'Specify the transfer amount' : 'Enter token details and specify the transfer amount') }}
-      </CardDescription>
-    </CardHeader>
-    <CardContent class="space-y-4">
-      <!-- Compact recipient + token summary -->
-      <ReceiverTokenSummary
-        :receiver-name="receiverName"
-        :receiver-key="receiverKey"
-        :receiver-avatar="receiverAvatar"
-        :label="isReceiveMode ? 'Recipient' : 'Receiver'"
-      />
-
-      <!-- Token selector (compact) -->
-      <TokenSelectorWithAmount
-        v-if="shouldShowTokenSelector"
-        v-model="form.amount"
-        v-model:selected-token-asset-num="selectedTokenAssetNum"
-        :token-symbol="tokenSymbol"
-        :token-name="tokenName"
-        :token-precision="props?.precision"
-        :token-image="props.tokenData?.metadata?.image"
-        :is-valid="amountValidation.isValid"
-        :validation-error="amountValidation.error"
-      />
-
-      <!-- Small details toggle for NAI/precision when needed -->
-      <div
-        v-if="!hasNaiFromUrl && !shouldShowTokenSelector"
-        class="flex items-center justify-between"
-      >
-        <div class="text-xs text-muted-foreground">
-          Asset num / precision
-        </div>
-        <Button
-          size="sm"
-          variant="ghost"
-          class="px-2 py-1"
-          @click="showDetails = !showDetails"
-        >
-          {{ showDetails ? 'Hide' : 'Show' }}
-        </Button>
-      </div>
-
-      <div
-        v-if="showDetails && !hasNaiFromUrl && !shouldShowTokenSelector"
-        class="grid grid-cols-2 gap-2"
-      >
-        <Input
-          id="asset-num"
-          type="text"
-          placeholder="Asset number"
-          class="transition-colors"
-          disabled
-          :value="assetNum"
-        />
-        <Input
-          id="precision"
-          type="number"
-          placeholder="Precision"
-          min="0"
-          max="18"
-          class="transition-colors"
-          disabled
-          :value="precision"
-        />
-      </div>
-
-      <!-- Amount compact -->
-      <TokenAmountInput
-        v-if="!shouldShowTokenSelector"
-        v-model="form.amount"
-        :token-name="tokenName"
-        :token-symbol="tokenSymbol"
-        :token-image="tokenImage"
-        :token-asset-num="assetNum"
-        :precision="tokenData?.precision"
-        :is-valid="amountValidation.isValid"
-        :validation-error="amountValidation.error"
-      />
-
-      <!-- Memo compact -->
-      <CollapsibleMemoInput
-        v-model="form.memo"
-        :readonly="isReceiveMode"
-        :disabled="isUpdating"
-        :auto-expand="!!queryMemo"
-      />
-
-      <!-- Actions / Summary -->
-      <div class="pt-3">
-        <!-- Send button (only shown when confirming a transfer request / receive-mode) -->
-        <Button
-          v-if="isReceiveMode && !transferCompleted"
-          class="w-full"
-          :disabled="isSending || !isFormValid"
-          @click="handleSend"
-        >
-          {{ isSending ? 'Sending...' : (isLoggedIn ? 'Send Token' : 'Log in to Send Token') }}
-        </Button>
-
-        <!-- Bank-style confirmation summary shown after a successful transfer -->
-        <TransferCompletedSummary
-          v-if="transferCompleted"
-          :amount="sentSummary?.amount || form.amount"
-          :token-symbol="tokenSymbol"
-          :token-name="tokenName"
-          :is-receive-mode="isReceiveMode"
-          :receiver-key="receiverKey"
-          :receiver-name="receiverName"
-          :remaining-balance="sentSummary?.remainingBalance"
-          :timestamp="sentSummary?.timestamp"
-          :asset-num="assetNum"
-          :precision="precision"
-          :memo="form.memo"
-        />
-      </div>
-    </CardContent>
-  </Card>
-</template>
diff --git a/src/components/HTMHeader.vue b/src/components/htm/HTMHeader.vue
similarity index 100%
rename from src/components/HTMHeader.vue
rename to src/components/htm/HTMHeader.vue
diff --git a/src/components/HTMLoginContent.vue b/src/components/htm/HTMLoginContent.vue
similarity index 100%
rename from src/components/HTMLoginContent.vue
rename to src/components/htm/HTMLoginContent.vue
diff --git a/src/components/HTMLoginForm.vue b/src/components/htm/HTMLoginForm.vue
similarity index 98%
rename from src/components/HTMLoginForm.vue
rename to src/components/htm/HTMLoginForm.vue
index 016c317..385b47e 100644
--- a/src/components/HTMLoginForm.vue
+++ b/src/components/htm/HTMLoginForm.vue
@@ -3,7 +3,6 @@ import { mdiClose } from '@mdi/js';
 import { onMounted, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
-import HTMLoginContent from '@/components/HTMLoginContent.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -16,6 +15,8 @@ import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+import HTMLoginContent from '~/src/components/htm/HTMLoginContent.vue';
+
 interface Props {
   showCloseButton?: boolean;
   title?: string;
diff --git a/src/components/wallet/HTMProvidePassword.vue b/src/components/htm/HTMProvidePassword.vue
similarity index 95%
rename from src/components/wallet/HTMProvidePassword.vue
rename to src/components/htm/HTMProvidePassword.vue
index 85f907e..1063488 100644
--- a/src/components/wallet/HTMProvidePassword.vue
+++ b/src/components/htm/HTMProvidePassword.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { mdiClose } from '@mdi/js';
 
-import HTMProvidePasswordContent from '@/components/HTMProvidePasswordContent.vue';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { UsedWallet, getWalletIcon } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 
+import HTMProvidePasswordContent from '~/src/components/htm/HTMProvidePasswordContent.vue';
+
 const walletStore = useWalletStore();
 const tokensStore = useTokensStore();
 
diff --git a/src/components/HTMProvidePasswordContent.vue b/src/components/htm/HTMProvidePasswordContent.vue
similarity index 100%
rename from src/components/HTMProvidePasswordContent.vue
rename to src/components/htm/HTMProvidePasswordContent.vue
diff --git a/src/components/HTMTokenCard.vue b/src/components/htm/HTMTokenCard.vue
similarity index 87%
rename from src/components/HTMTokenCard.vue
rename to src/components/htm/HTMTokenCard.vue
index 24de866..bbc3d14 100644
--- a/src/components/HTMTokenCard.vue
+++ b/src/components/htm/HTMTokenCard.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import HTMTokenPreview from '@/components/HTMTokenPreview.vue';
 import type { CTokenDefinitionDisplay } from '@/stores/tokens.store';
 
+import HTMTokenPreview from '~/src/components/htm/HTMTokenPreview.vue';
+
 interface Props {
   token: CTokenDefinitionDisplay;
 }
diff --git a/src/components/HTMTokenPreview.vue b/src/components/htm/HTMTokenPreview.vue
similarity index 100%
rename from src/components/HTMTokenPreview.vue
rename to src/components/htm/HTMTokenPreview.vue
diff --git a/src/components/HTMView.vue b/src/components/htm/HTMView.vue
similarity index 98%
rename from src/components/HTMView.vue
rename to src/components/htm/HTMView.vue
index 4b92a15..7c02968 100644
--- a/src/components/HTMView.vue
+++ b/src/components/htm/HTMView.vue
@@ -2,11 +2,12 @@
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import HTMLoginForm from '@/components/HTMLoginForm.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useTokensStore } from '@/stores/tokens.store';
 
+import HTMLoginForm from '~/src/components/htm/HTMLoginForm.vue';
+
 const tokensStore = useTokensStore();
 const router = useRouter();
 
diff --git a/src/components/tokens/QRCodeCard.vue b/src/components/htm/tokens/QRCodeCard.vue
similarity index 97%
rename from src/components/tokens/QRCodeCard.vue
rename to src/components/htm/tokens/QRCodeCard.vue
index 8b819cb..8938fa8 100644
--- a/src/components/tokens/QRCodeCard.vue
+++ b/src/components/htm/tokens/QRCodeCard.vue
@@ -35,7 +35,7 @@ const generateQRCode = async () => {
     if (props.memo?.trim())
       params.append('memo', props.memo);
 
-    const url = `${baseUrl}/tokens/send-token?${params.toString()}`;
+    const url = `${baseUrl}/tokens/pos/receive?${params.toString()}`;
 
     if (!qrCode)
       qrCode = await import('qrcode');
diff --git a/src/components/TokenAmountInput.vue b/src/components/htm/tokens/TokenAmountInput.vue
similarity index 100%
rename from src/components/TokenAmountInput.vue
rename to src/components/htm/tokens/TokenAmountInput.vue
diff --git a/src/components/tokens/TokenSelector.vue b/src/components/htm/tokens/TokenSelector.vue
similarity index 100%
rename from src/components/tokens/TokenSelector.vue
rename to src/components/htm/tokens/TokenSelector.vue
diff --git a/src/components/TokenSelectorWithAmount.vue b/src/components/htm/tokens/TokenSelectorWithAmount.vue
similarity index 96%
rename from src/components/TokenSelectorWithAmount.vue
rename to src/components/htm/tokens/TokenSelectorWithAmount.vue
index e0df92c..a2f2ace 100644
--- a/src/components/TokenSelectorWithAmount.vue
+++ b/src/components/htm/tokens/TokenSelectorWithAmount.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import TokenSelector from '@/components/tokens/TokenSelector.vue';
+import TokenSelector from '@/components/htm/tokens/TokenSelector.vue';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
diff --git a/src/components/onboarding/wallets/htm/HTMConnect.vue b/src/components/onboarding/wallets/htm/HTMConnect.vue
index a242aff..c4693b8 100644
--- a/src/components/onboarding/wallets/htm/HTMConnect.vue
+++ b/src/components/onboarding/wallets/htm/HTMConnect.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { mdiClose } from '@mdi/js';
 
-import HTMLoginContent from '@/components/HTMLoginContent.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { UsedWallet, getWalletIcon } from '@/stores/settings.store';
 
+import HTMLoginContent from '~/src/components/htm/HTMLoginContent.vue';
+
 const emit = defineEmits(['setaccount', 'close']);
 
 const close = () => {
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 57bbafd..c16d402 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -5,13 +5,14 @@ import { toast } from 'vue-sonner';
 import AppSidebar from '@/components/navigation';
 import AppHeader from '@/components/navigation/AppHeader.vue';
 import { SidebarProvider } from '@/components/ui/sidebar';
-import HTMProvidePassword from '@/components/wallet/HTMProvidePassword.vue';
 import type { UsedWallet } from '@/stores/settings.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { toastError } from '@/utils/parse-error';
 
+import HTMProvidePassword from '~/src/components/htm/HTMProvidePassword.vue';
+
 const route = useRoute();
 
 const hasTokenInRoute = computed(() => {
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index db4f79f..22a8041 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -12,8 +12,8 @@ import { computed, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-import HTMTokenPreview from '@/components/HTMTokenPreview.vue';
-import HTMView from '@/components/HTMView.vue';
+import HTMTokenPreview from '~/src/components/htm/HTMTokenPreview.vue';
+import HTMView from '~/src/components/htm/HTMView.vue';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index 8aab412..23d2320 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -5,7 +5,7 @@ import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-import HTMView from '@/components/HTMView.vue';
+import HTMView from '~/src/components/htm/HTMView.vue';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
diff --git a/src/pages/tokens/invoice.vue b/src/pages/tokens/invoice.vue
index b09e04c..5637d3e 100644
--- a/src/pages/tokens/invoice.vue
+++ b/src/pages/tokens/invoice.vue
@@ -4,7 +4,7 @@ import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-import HTMView from '@/components/HTMView.vue';
+import HTMView from '~/src/components/htm/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
diff --git a/src/pages/tokens/list.vue b/src/pages/tokens/list.vue
index 7986f76..e3ddb9c 100644
--- a/src/pages/tokens/list.vue
+++ b/src/pages/tokens/list.vue
@@ -3,8 +3,8 @@ import { mdiRefresh, mdiPlus } from '@mdi/js';
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import HTMTokenCard from '@/components/HTMTokenCard.vue';
-import HTMView from '@/components/HTMView.vue';
+import HTMTokenCard from '~/src/components/htm/HTMTokenCard.vue';
+import HTMView from '~/src/components/htm/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 31667e7..b7c50fb 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -15,8 +15,8 @@ import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
-import HTMView from '@/components/HTMView.vue';
-import TokenAmountInput from '@/components/TokenAmountInput.vue';
+import HTMView from '~/src/components/htm/HTMView.vue';
+import TokenAmountInput from '~/src/components/htm/tokens/TokenAmountInput.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
diff --git a/src/pages/tokens/my-tokens.vue b/src/pages/tokens/my-tokens.vue
index c195a6d..c9c4985 100644
--- a/src/pages/tokens/my-tokens.vue
+++ b/src/pages/tokens/my-tokens.vue
@@ -7,8 +7,8 @@ import {
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import HTMTokenCard from '@/components/HTMTokenCard.vue';
-import HTMView from '@/components/HTMView.vue';
+import HTMTokenCard from '~/src/components/htm/HTMTokenCard.vue';
+import HTMView from '~/src/components/htm/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index c169f31..b72c111 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -14,8 +14,8 @@ import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-import HTMLoginContent from '@/components/HTMLoginContent.vue';
-import HTMProvidePasswordContent from '@/components/HTMProvidePasswordContent.vue';
+import HTMLoginContent from '~/src/components/htm/HTMLoginContent.vue';
+import HTMProvidePasswordContent from '~/src/components/htm/HTMProvidePasswordContent.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
diff --git a/src/pages/tokens/send-token.vue b/src/pages/tokens/send-token.vue
deleted file mode 100644
index dd60ea6..0000000
--- a/src/pages/tokens/send-token.vue
+++ /dev/null
@@ -1,343 +0,0 @@
-<script setup lang="ts">
-import { mdiArrowLeft } from '@mdi/js';
-import { computed, onMounted, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { toast } from 'vue-sonner';
-
-import HTMView from '@/components/HTMView.vue';
-import QRCodeCard from '@/components/tokens/QRCodeCard.vue';
-import TransferDetailsCard from '@/components/TransferDetailsCard.vue';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
-import { useSettingsStore } from '@/stores/settings.store';
-import { useTokensStore, type CTokenBalanceDisplay } from '@/stores/tokens.store';
-import { useUserStore } from '@/stores/user.store';
-import { getWax } from '@/stores/wax.store';
-import { toastError } from '@/utils/parse-error';
-import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
-
-
-// Router
-const route = useRoute();
-const router = useRouter();
-
-const settingsStore = useSettingsStore();
-const tokensStore = useTokensStore();
-const userStore = useUserStore();
-
-// State
-const token = ref<CtokensAppToken | null>(null);
-const isLoading = ref(true);
-
-// Form state
-const form = ref({
-  assetNum: '',
-  precision: '',
-  amount: '',
-  memo: ''
-});
-
-// Selected token NAI from TokenSelector (used when only 'to' is provided)
-const selectedTokenAssetNum = ref<string>('');
-
-// Get NAI and precision from route parameters or form or selected token
-const assetNum = computed(() => {
-  if (route.query['asset-num']) return route.query['asset-num'] as string;
-  if (selectedTokenAssetNum.value) return selectedTokenAssetNum.value;
-  return form.value.assetNum;
-});
-const precision = computed(() => route.query.precision as string || form.value.precision);
-const receiverKey = computed(() => route.query.to as string || CTokensProvider.getOperationalPublicKey());
-const queryAmount = computed(() => route.query.amount as string | undefined);
-const queryMemo = computed(() => route.query.memo as string | undefined);
-
-// Check if NAI is provided in URL
-const hasNaiFromUrl = computed(() => !!route.query['asset-num']);
-
-// Check if we're in receive mode (when 'to' is in query params)
-// When 'to' is present, we're actually sending (confirming a transfer request)
-const isReceiveMode = computed(() => !!route.query.to);
-
-const htmUserMetadata = ref<{
-  displayName: string;
-  about?: string;
-  name?: string;
-  profileImage?: string;
-  website?: string;
-} | undefined>(undefined);
-
-const fetchHTMUserData = async () => {
-  try {
-    htmUserMetadata.value = await tokensStore.getCurrentUserMetadata();
-  } catch (_error) {
-    // toastError('Error fetching HTM user data', error); // TODO: Reformat this code to better handle edge cases...
-  }
-};
-
-// Check if we should show token selector (when only 'to' is provided)
-const shouldShowTokenSelector = computed(() => {
-  return isReceiveMode.value && !hasNaiFromUrl.value && isLoggedIn.value;
-});
-
-const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
-
-// Check if user is logged in
-const isLoggedIn = computed(() => !!tokensStore.wallet);
-
-// Receiver display helpers (compact UI)
-const receiverDisplayName = computed(() => {
-  // In receive mode the recipient is you — prefer parsed user name (L2 if available)
-  if (isReceiveMode.value) {
-    // userStore.name is a transformed display name if parseUserData ran
-    const name = userStore.name || settingsStore.settings.account || userOperationalKey.value || '';
-    if (name) return name;
-    return 'You';
-  }
-
-  // Otherwise prefer explicit name from query if present
-  const qName = route.query.toName as string | undefined;
-  if (qName && qName.trim()) return qName;
-
-  // Fall back to short key derived from receiverKey
-  const rk = receiverKey.value;
-  if (!rk) return '';
-  return `${rk.slice(0, 6)}…${rk.slice(-4)}`;
-});
-
-// Watch selected token NAI changes to load token details
-watch(selectedTokenAssetNum, async (newAssetNum, oldAssetNum) => {
-  if (newAssetNum && newAssetNum !== oldAssetNum && shouldShowTokenSelector.value) {
-    isLoading.value = true;
-    // Get precision from the selected token's balance
-    let balance: CTokenBalanceDisplay | undefined;
-    for(const storeBalance of tokensStore.fungibleBalances) {
-      if (storeBalance.liquid.assetNum === Number(newAssetNum)) {
-        balance = storeBalance.liquid;
-        break;
-      } else if (storeBalance.vesting.assetNum === Number(newAssetNum)) {
-        balance = storeBalance.vesting;
-        break;
-      }
-    } // TODO: Load more balances if not found?
-    if (balance) {
-      form.value.precision = balance.precision?.toString() || '';
-      form.value.assetNum = balance.assetNum!.toString();
-      await loadTokenDetails();
-    } else
-      token.value = null;
-
-    isLoading.value = false;
-  }
-});
-
-// Load token details
-const loadTokenDetails = async () => {
-  if (!assetNum.value) return;
-
-  try {
-    const wax = await getWax();
-
-    // Fetch token details by NAI
-    const params: { 'asset-num': number; precision?: number } = { 'asset-num': Number(assetNum.value) };
-    const tokens = await wax.restApi.ctokensApi.tokens(params);
-
-    const remoteToken = tokens && tokens.items && tokens.items.length > 0 ? tokens.items[0] : null;
-
-    if (!remoteToken)
-      throw new Error(`Token with asset number ${assetNum.value} not found`);
-
-    token.value = String(remoteToken.liquid?.asset_num) === assetNum.value ? remoteToken.liquid! : String(remoteToken.vesting?.asset_num) === assetNum.value ? remoteToken.vesting! : null;
-
-    if (!token.value)
-      throw new Error(`Token with asset number ${assetNum.value} not found`);
-
-    // Update precision if not set from balance
-    if (token.value && !form.value.precision)
-      form.value.precision = token.value.precision?.toString() || '';
-  } catch (error) {
-    toastError('Failed to load token details', error);
-    router.push('/tokens/list');
-  }
-};
-
-// Navigate back to token detail
-const goBack = () => {
-  router.push({
-    path: '/tokens/token',
-    query: { 'asset-num': assetNum.value }
-  });
-};
-
-// Initialize
-onMounted(async () => {
-  // In receive mode (when someone scans QR code), allow viewing without login
-  // Login will be required when clicking "Send Token"
-  if (!isLoggedIn.value && !isReceiveMode.value) {
-    // Only require login immediately in send/generate QR mode
-    toast.error('You must be logged in to use this feature');
-    return;
-  }
-
-  isLoading.value = true;
-
-  // Load user balances if logged in (needed for token selector)
-  if (isLoggedIn.value) {
-    await tokensStore.loadBalances();
-    await fetchHTMUserData();
-  }
-
-  // Initialize form with query params
-  form.value.assetNum = route.query['asset-num'] as string || '';
-  selectedTokenAssetNum.value = route.query['asset-num'] as string || '';
-  form.value.precision = route.query.precision as string || '';
-
-  // Initialize form with query params if in receive mode
-  if (isReceiveMode.value) {
-    form.value.amount = queryAmount.value || '';
-    form.value.memo = queryMemo.value || '';
-  }
-
-  // Load token details if asset number and precision are available
-  if (assetNum.value)
-    await loadTokenDetails();
-
-  isLoading.value = false;
-});
-
-// If the user logs in after the page mounted (for example after entering password),
-// reload balances, HTM user metadata, token details and QR code as needed.
-watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
-  // Only act when the user becomes logged in
-  if (!loggedIn || wasLoggedIn === loggedIn) return;
-
-  isLoading.value = true;
-
-  try {
-    // Load balances and HTM metadata now that we have an authenticated session
-    await tokensStore.loadBalances();
-    await fetchHTMUserData();
-
-    // If nai/precision available, load token details
-    if (assetNum.value && precision.value)
-      await loadTokenDetails();
-  } catch (e) {
-    // swallow - errors are handled inside the helpers (toastError)
-    console.error('Error reloading data after login', e);
-  } finally {
-    isLoading.value = false;
-  }
-});
-
-// Also watch the tokens store wallet instance - this changes when CTokensProvider is set
-// (e.g., user unlocked their HTM wallet). React to that to load HTM-related data.
-watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
-  if (!newWallet || newWallet === oldWallet) return;
-
-  isLoading.value = true;
-
-  try {
-    await tokensStore.loadBalances();
-    await fetchHTMUserData();
-
-    if (assetNum.value && precision.value)
-      await loadTokenDetails();
-  } catch (e) {
-    console.error('Error reloading data after tokensStore.wallet changed', e);
-  } finally {
-    isLoading.value = false;
-  }
-});
-</script>
-
-<template>
-  <HTMView>
-    <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-4xl">
-      <!-- Header -->
-      <div class="flex items-center justify-between gap-4">
-        <Button
-          v-if="hasNaiFromUrl || selectedTokenAssetNum"
-          variant="ghost"
-          size="sm"
-          class="gap-2 hover:bg-accent"
-          @click="goBack"
-        >
-          <svg
-            width="16"
-            height="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="flex-shrink-0"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiArrowLeft"
-            />
-          </svg>
-          Back to Token
-        </Button>
-      </div>
-
-      <!-- Loading State -->
-      <div
-        v-if="isLoading"
-        class="space-y-6"
-      >
-        <Card>
-          <CardHeader>
-            <Skeleton class="h-8 w-48" />
-            <Skeleton class="h-4 w-64" />
-          </CardHeader>
-          <CardContent class="space-y-4">
-            <Skeleton class="h-10 w-full" />
-            <Skeleton class="h-10 w-full" />
-            <Skeleton class="h-24 w-full" />
-          </CardContent>
-        </Card>
-      </div>
-
-      <!-- Send Form -->
-      <div
-        class="space-y-6"
-      >
-        <!-- Page Title -->
-        <div>
-          <h1 class="text-3xl font-bold text-foreground mb-2">
-            {{ isReceiveMode ? 'Send Token' : (hasNaiFromUrl ? 'Receive Token' : 'Send/Receive Token') }}
-          </h1>
-          <p class="text-muted-foreground">
-            {{ isReceiveMode ? 'Confirm and send the token transfer.' : (hasNaiFromUrl ? 'Scan the generated QR code and transfer the token.' : 'Enter token details and generate a QR code for transfer.') }}
-          </p>
-        </div>
-
-        <!-- Transfer Details Card -->
-        <TransferDetailsCard
-          :is-receive-mode="isReceiveMode"
-          :has-nai-from-url="hasNaiFromUrl"
-          :should-show-token-selector="shouldShowTokenSelector"
-          :receiver-name="htmUserMetadata?.displayName || receiverDisplayName"
-          :receiver-key="receiverKey"
-          :receiver-avatar="htmUserMetadata?.profileImage"
-          :token-data="token"
-          :query-amount="queryAmount"
-          :query-memo="queryMemo"
-          :asset-num="assetNum"
-          :precision="precision"
-          :selected-token-asset-num="selectedTokenAssetNum"
-          @update-selected-token-asset-num="selectedTokenAssetNum = $event"
-          @update-amount="form.amount = $event"
-          @update-memo="form.memo = $event"
-        />
-
-        <!-- QR Code Card (visible when asset number is available) -->
-        <QRCodeCard
-          v-if="assetNum && !isReceiveMode"
-          :asset-num="assetNum"
-          :amount="form.amount"
-          :memo="form.memo"
-        />
-      </div>
-    </div>
-  </HTMView>
-</template>
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 9f649ad..0840acf 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -6,8 +6,8 @@ import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
-import HTMView from '@/components/HTMView.vue';
-import TokenAmountInput from '@/components/TokenAmountInput.vue';
+import HTMView from '~/src/components/htm/HTMView.vue';
+import TokenAmountInput from '~/src/components/htm/tokens/TokenAmountInput.vue';
 import { AlertDescription, Alert } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
-- 
GitLab


From 8c3ee2c6ca8de60008ece83f140c269cead225b6 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 19 Nov 2025 08:50:45 +0100
Subject: [PATCH 092/102] Split send-token page into /token/pos/send and
 /token/pos/receive pages

---
 server/api/google-wallet.ts            |   2 +-
 src/components/ReceiveTransferCard.vue | 289 +++++++++++++++++++++++++
 src/components/SendTransferCard.vue    | 227 +++++++++++++++++++
 src/pages/tokens/create.vue            |   5 +-
 src/pages/tokens/edit.vue              |   3 +-
 src/pages/tokens/invoice.vue           |   3 +-
 src/pages/tokens/list.vue              |   5 +-
 src/pages/tokens/my-balance.vue        |   5 +-
 src/pages/tokens/my-tokens.vue         |   5 +-
 src/pages/tokens/pos/receive.vue       | 235 ++++++++++++++++++++
 src/pages/tokens/pos/send.vue          | 274 +++++++++++++++++++++++
 src/pages/tokens/register-account.vue  |   5 +-
 src/pages/tokens/token.vue             |   7 +-
 src/stores/wallet.store.ts             |   2 +-
 14 files changed, 1050 insertions(+), 17 deletions(-)
 create mode 100644 src/components/ReceiveTransferCard.vue
 create mode 100644 src/components/SendTransferCard.vue
 create mode 100644 src/pages/tokens/pos/receive.vue
 create mode 100644 src/pages/tokens/pos/send.vue

diff --git a/server/api/google-wallet.ts b/server/api/google-wallet.ts
index e349fc8..e086294 100644
--- a/server/api/google-wallet.ts
+++ b/server/api/google-wallet.ts
@@ -32,7 +32,7 @@ export default defineEventHandler(async (event) => {
   const displayName = body.displayName || 'User';
 
   // XXX: For security reasons baseUrl should not come from the client side in production
-  const barcodeValue = `${body.baseUrl}/tokens/send-token?to=${operationalPublicKey}`;
+  const barcodeValue = `${body.baseUrl}/tokens/pos/receive?to=${operationalPublicKey}`;
 
   console.log('Creating QR code leading to:', barcodeValue);
 
diff --git a/src/components/ReceiveTransferCard.vue b/src/components/ReceiveTransferCard.vue
new file mode 100644
index 0000000..15e49e9
--- /dev/null
+++ b/src/components/ReceiveTransferCard.vue
@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import type { htm_operation } from '@mtyszczak-cargo/htm';
+import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { toast } from 'vue-sonner';
+
+import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
+import ReceiverTokenSummary from '@/components/ReceiverTokenSummary.vue';
+import TransferCompletedSummary from '@/components/TransferCompletedSummary.vue';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useTokensStore } from '@/stores/tokens.store';
+import { toastError } from '@/utils/parse-error';
+import { waitForTransactionStatus } from '@/utils/transaction-status';
+import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+import TokenAmountInput from '~/src/components/htm/tokens/TokenAmountInput.vue';
+
+interface Props {
+  receiverName?: string;
+  receiverKey?: string;
+  receiverAvatar?: string;
+  tokenData?: CtokensAppToken | null;
+  queryAmount?: string;
+  queryMemo?: string;
+  assetNum: string;
+  precision: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  transferCompleted: [summary: { amount: string; tokenLabel: string; receiver: string; remainingBalance?: string; timestamp?: string }];
+}>();
+
+const router = useRouter();
+const tokensStore = useTokensStore();
+
+// Form state
+const form = ref({
+  amount: props.queryAmount || '',
+  memo: props.queryMemo || ''
+});
+
+const isSending = ref(false);
+const transferCompleted = ref(false);
+const sentSummary = ref<{ amount: string; tokenLabel: string; receiver: string; remainingBalance?: string; timestamp?: string } | null>(null);
+
+// Check if user is logged in
+const isLoggedIn = computed(() => !!tokensStore.wallet);
+
+const tokenName = computed(() => {
+  if (!props.tokenData) return 'Unknown Token';
+  const metadata = props.tokenData.metadata as { name?: string } | undefined;
+  return metadata?.name || props.tokenData.nai || 'Unknown Token';
+});
+
+const tokenSymbol = computed(() => {
+  if (!props.tokenData) return '';
+  const metadata = props.tokenData.metadata as { symbol?: string } | undefined;
+  return metadata?.symbol || '';
+});
+
+const tokenImage = computed(() => {
+  if (!props.tokenData) return '';
+  const metadata = props.tokenData.metadata as { image?: string } | undefined;
+  return metadata?.image || '';
+});
+
+const amountValidation = computed(() => {
+  if (!form.value.amount)
+    return { isValid: true, error: '' };
+
+  if (!props.tokenData)
+    return { isValid: true, error: '' };
+
+  return validateAmountPrecision(form.value.amount, props.tokenData.precision || 0);
+});
+
+const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
+  try {
+    const cleanAmount = amount.replace(/[,\s]/g, '');
+
+    if (!/^\d*\.?\d*$/.test(cleanAmount))
+      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
+
+    const numAmount = parseFloat(cleanAmount);
+    if (isNaN(numAmount) || numAmount <= 0)
+      return { isValid: false, error: 'Amount must be a positive number' };
+
+    if (!isFinite(numAmount))
+      return { isValid: false, error: 'Amount value is too large' };
+
+    const decimalIndex = cleanAmount.indexOf('.');
+    if (decimalIndex !== -1) {
+      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
+      if (decimalPlaces > precision) {
+        return {
+          isValid: false,
+          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
+        };
+      }
+    }
+
+    const multiplier = Math.pow(10, precision);
+    const baseUnits = numAmount * multiplier;
+
+    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
+    if (baseUnits > MAX_SAFE_BASE_UNITS)
+      return { isValid: false, error: 'Amount is too large and would cause overflow' };
+
+    const roundedBaseUnits = Math.round(baseUnits);
+    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
+      return {
+        isValid: false,
+        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
+      };
+    }
+
+    return { isValid: true, parsedAmount: roundedBaseUnits.toString() };
+  } catch (_error) {
+    return { isValid: false, error: 'Invalid amount format' };
+  }
+};
+
+const isFormValid = computed(() => {
+  if (!props.tokenData) return false;
+  if (form.value.amount.trim() === '') return true;
+  return amountValidation.value.isValid;
+});
+
+const parseAssetAmount = (amountStr: string, precision: number): string => {
+  const [integerPart, fractionalPart = ''] = amountStr.split('.');
+  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
+  return integerPart + normalizedFractional;
+};
+
+const handleSend = async () => {
+  if (!props.tokenData) {
+    toastError('Token not loaded', new Error('Token details not available'));
+    return;
+  }
+
+  if (!isLoggedIn.value || !CTokensProvider.getOperationalPublicKey()) {
+    toast.error('Please log in to your wallet first');
+    router.push({
+      path: '/tokens/list'
+    });
+    return;
+  }
+
+  if (!form.value.amount || !props.receiverKey) {
+    toastError('Missing required fields', new Error('Amount and receiver are required'));
+    return;
+  }
+
+  if (!amountValidation.value.isValid) {
+    toastError('Invalid amount', new Error(amountValidation.value.error || 'Invalid amount format'));
+    return;
+  }
+
+  try {
+    isSending.value = true;
+
+    const baseAmount = parseAssetAmount(form.value.amount, props.tokenData.precision || 0);
+
+    const sender = CTokensProvider.getOperationalPublicKey()!;
+
+    await waitForTransactionStatus(
+      () => ([{
+        token_transfer_operation: {
+          amount: {
+            amount: baseAmount,
+            nai: props.tokenData!.nai!,
+            precision: props.tokenData!.precision || 0
+          },
+          receiver: props.receiverKey!,
+          sender,
+          memo: form.value.memo
+        }
+      } satisfies htm_operation]),
+      'Transfer'
+    );
+
+    transferCompleted.value = true;
+
+    const balanceObj = await tokensStore.getBalanceSingleToken(sender, props.tokenData.asset_num!);
+
+    const receiverLabel = props.receiverName || props.receiverKey || 'Recipient';
+    const tokenLabel = tokenSymbol.value || tokenName.value || props.tokenData!.nai || '';
+
+    const ts = new Date().toISOString();
+
+    sentSummary.value = {
+      amount: form.value.amount,
+      tokenLabel,
+      receiver: receiverLabel,
+      remainingBalance: balanceObj.displayBalance,
+      timestamp: ts
+    };
+
+    emit('transferCompleted', sentSummary.value);
+  } catch (error) {
+    toastError('Transfer failed', error);
+  } finally {
+    isSending.value = false;
+  }
+};
+
+// Watch query params changes to update form
+watch(() => props.queryAmount, (newValue) => {
+  if (newValue)
+    form.value.amount = newValue;
+});
+
+watch(() => props.queryMemo, (newValue) => {
+  if (newValue)
+    form.value.memo = newValue;
+});
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Confirm Transfer</CardTitle>
+      <CardDescription>
+        Review the transfer details and confirm
+      </CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-4">
+      <!-- Compact recipient + token summary -->
+      <ReceiverTokenSummary
+        :receiver-name="receiverName"
+        :receiver-key="receiverKey"
+        :receiver-avatar="receiverAvatar"
+        label="Recipient"
+      />
+
+      <!-- Amount compact -->
+      <TokenAmountInput
+        v-model="form.amount"
+        :token-name="tokenName"
+        :token-symbol="tokenSymbol"
+        :token-image="tokenImage"
+        :token-asset-num="assetNum"
+        :precision="tokenData?.precision"
+        :is-valid="amountValidation.isValid"
+        :validation-error="amountValidation.error"
+      />
+
+      <!-- Memo compact -->
+      <CollapsibleMemoInput
+        v-model="form.memo"
+        :readonly="true"
+        :auto-expand="!!queryMemo"
+      />
+
+      <!-- Actions / Summary -->
+      <div class="pt-3">
+        <!-- Send button -->
+        <Button
+          v-if="!transferCompleted"
+          class="w-full"
+          :disabled="isSending || !isFormValid"
+          @click="handleSend"
+        >
+          {{ isSending ? 'Sending...' : (isLoggedIn ? 'Send Token' : 'Log in to Send Token') }}
+        </Button>
+
+        <!-- Bank-style confirmation summary shown after a successful transfer -->
+        <TransferCompletedSummary
+          v-if="transferCompleted"
+          :amount="sentSummary?.amount || form.amount"
+          :token-symbol="tokenSymbol"
+          :token-name="tokenName"
+          :is-receive-mode="true"
+          :receiver-key="receiverKey"
+          :receiver-name="receiverName"
+          :remaining-balance="sentSummary?.remainingBalance"
+          :timestamp="sentSummary?.timestamp"
+          :asset-num="assetNum"
+          :precision="precision"
+          :memo="form.memo"
+        />
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/components/SendTransferCard.vue b/src/components/SendTransferCard.vue
new file mode 100644
index 0000000..b2bc354
--- /dev/null
+++ b/src/components/SendTransferCard.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+import TokenAmountInput from '~/src/components/htm/tokens/TokenAmountInput.vue';
+import TokenSelectorWithAmount from '~/src/components/htm/tokens/TokenSelectorWithAmount.vue';
+
+interface Props {
+  hasNaiFromUrl: boolean;
+  shouldShowTokenSelector: boolean;
+  tokenData?: CtokensAppToken | null;
+  assetNum: string;
+  precision: string;
+  selectedTokenAssetNum?: string;
+  initialAmount?: string;
+  initialMemo?: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  updateSelectedTokenAssetNum: [value: string];
+  updateAmount: [value: string];
+  updateMemo: [value: string];
+}>();
+
+// Form state
+const form = ref({
+  amount: props.initialAmount || '',
+  memo: props.initialMemo || ''
+});
+
+const selectedTokenAssetNum = computed({
+  get: () => props.selectedTokenAssetNum || '',
+  set: (value: string) => emit('updateSelectedTokenAssetNum', value)
+});
+
+const showDetails = ref(false);
+
+const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
+
+const tokenName = computed(() => {
+  if (!props.tokenData) return 'Unknown Token';
+  const metadata = props.tokenData.metadata as { name?: string } | undefined;
+  return metadata?.name || props.tokenData.nai || 'Unknown Token';
+});
+
+const tokenSymbol = computed(() => {
+  if (!props.tokenData) return '';
+  const metadata = props.tokenData.metadata as { symbol?: string } | undefined;
+  return metadata?.symbol || '';
+});
+
+const tokenImage = computed(() => {
+  if (!props.tokenData) return '';
+  const metadata = props.tokenData.metadata as { image?: string } | undefined;
+  return metadata?.image || '';
+});
+
+const amountValidation = computed(() => {
+  if (!form.value.amount)
+    return { isValid: true, error: '' };
+
+  if (!props.tokenData)
+    return { isValid: true, error: '' };
+
+  return validateAmountPrecision(form.value.amount, props.tokenData.precision || 0);
+});
+
+const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
+  try {
+    const cleanAmount = amount.replace(/[,\s]/g, '');
+
+    if (!/^\d*\.?\d*$/.test(cleanAmount))
+      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
+
+    const numAmount = parseFloat(cleanAmount);
+    if (isNaN(numAmount) || numAmount <= 0)
+      return { isValid: false, error: 'Amount must be a positive number' };
+
+    if (!isFinite(numAmount))
+      return { isValid: false, error: 'Amount value is too large' };
+
+    const decimalIndex = cleanAmount.indexOf('.');
+    if (decimalIndex !== -1) {
+      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
+      if (decimalPlaces > precision) {
+        return {
+          isValid: false,
+          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
+        };
+      }
+    }
+
+    const multiplier = Math.pow(10, precision);
+    const baseUnits = numAmount * multiplier;
+
+    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
+    if (baseUnits > MAX_SAFE_BASE_UNITS)
+      return { isValid: false, error: 'Amount is too large and would cause overflow' };
+
+    const roundedBaseUnits = Math.round(baseUnits);
+    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
+      return {
+        isValid: false,
+        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
+      };
+    }
+
+    return { isValid: true, parsedAmount: roundedBaseUnits.toString() };
+  } catch (_error) {
+    return { isValid: false, error: 'Invalid amount format' };
+  }
+};
+
+// Watch form changes to emit updates
+watch(() => form.value.amount, (newValue) => {
+  emit('updateAmount', newValue);
+});
+
+watch(() => form.value.memo, (newValue) => {
+  emit('updateMemo', newValue);
+});
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Send Token</CardTitle>
+      <CardDescription>
+        {{ hasNaiFromUrl ? 'Specify the transfer amount and generate a QR code' : 'Enter token details and generate a QR code for transfer' }}
+      </CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-4">
+      <!-- Display receiver (you) -->
+      <div class="flex items-center gap-3 p-3 bg-muted rounded-lg">
+        <div class="flex-1">
+          <div class="text-xs text-muted-foreground mb-1">Receiver</div>
+          <div class="font-medium">You</div>
+          <div class="text-xs text-muted-foreground font-mono mt-1">
+            {{ userOperationalKey }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Token selector (compact) -->
+      <TokenSelectorWithAmount
+        v-if="shouldShowTokenSelector"
+        v-model="form.amount"
+        v-model:selected-token-asset-num="selectedTokenAssetNum"
+        :token-symbol="tokenSymbol"
+        :token-name="tokenName"
+        :token-precision="props?.precision"
+        :token-image="props.tokenData?.metadata?.image"
+        :is-valid="amountValidation.isValid"
+        :validation-error="amountValidation.error"
+      />
+
+      <!-- Small details toggle for NAI/precision when needed -->
+      <div
+        v-if="!hasNaiFromUrl && !shouldShowTokenSelector"
+        class="flex items-center justify-between"
+      >
+        <div class="text-xs text-muted-foreground">
+          Asset num / precision
+        </div>
+        <Button
+          size="sm"
+          variant="ghost"
+          class="px-2 py-1"
+          @click="showDetails = !showDetails"
+        >
+          {{ showDetails ? 'Hide' : 'Show' }}
+        </Button>
+      </div>
+
+      <div
+        v-if="showDetails && !hasNaiFromUrl && !shouldShowTokenSelector"
+        class="grid grid-cols-2 gap-2"
+      >
+        <Input
+          id="asset-num"
+          type="text"
+          placeholder="Asset number"
+          class="transition-colors"
+          disabled
+          :value="assetNum"
+        />
+        <Input
+          id="precision"
+          type="number"
+          placeholder="Precision"
+          min="0"
+          max="18"
+          class="transition-colors"
+          disabled
+          :value="precision"
+        />
+      </div>
+
+      <!-- Amount compact -->
+      <TokenAmountInput
+        v-if="!shouldShowTokenSelector"
+        v-model="form.amount"
+        :token-name="tokenName"
+        :token-symbol="tokenSymbol"
+        :token-image="tokenImage"
+        :token-asset-num="assetNum"
+        :precision="tokenData?.precision"
+        :is-valid="amountValidation.isValid"
+        :validation-error="amountValidation.error"
+      />
+
+      <!-- Memo compact -->
+      <CollapsibleMemoInput
+        v-model="form.memo"
+        :auto-expand="!!initialMemo"
+      />
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index 22a8041..afafbad 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -12,8 +12,6 @@ import { computed, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-import HTMTokenPreview from '~/src/components/htm/HTMTokenPreview.vue';
-import HTMView from '~/src/components/htm/HTMView.vue';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -32,6 +30,9 @@ import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+import HTMTokenPreview from '~/src/components/htm/HTMTokenPreview.vue';
+import HTMView from '~/src/components/htm/HTMView.vue';
+
 const router = useRouter();
 
 const tokensStore = useTokensStore();
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index 23d2320..4394f67 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -5,7 +5,6 @@ import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-import HTMView from '~/src/components/htm/HTMView.vue';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -22,6 +21,8 @@ import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+import HTMView from '~/src/components/htm/HTMView.vue';
+
 // Router
 const route = useRoute();
 const router = useRouter();
diff --git a/src/pages/tokens/invoice.vue b/src/pages/tokens/invoice.vue
index 5637d3e..2868564 100644
--- a/src/pages/tokens/invoice.vue
+++ b/src/pages/tokens/invoice.vue
@@ -4,7 +4,6 @@ import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-import HTMView from '~/src/components/htm/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
@@ -12,6 +11,8 @@ import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 
+import HTMView from '~/src/components/htm/HTMView.vue';
+
 // Router
 const route = useRoute();
 const router = useRouter();
diff --git a/src/pages/tokens/list.vue b/src/pages/tokens/list.vue
index e3ddb9c..fbd58ee 100644
--- a/src/pages/tokens/list.vue
+++ b/src/pages/tokens/list.vue
@@ -3,8 +3,6 @@ import { mdiRefresh, mdiPlus } from '@mdi/js';
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import HTMTokenCard from '~/src/components/htm/HTMTokenCard.vue';
-import HTMView from '~/src/components/htm/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -12,6 +10,9 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 
+import HTMTokenCard from '~/src/components/htm/HTMTokenCard.vue';
+import HTMView from '~/src/components/htm/HTMView.vue';
+
 // Router
 const router = useRouter();
 
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index b7c50fb..1502272 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -15,8 +15,6 @@ import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
-import HTMView from '~/src/components/htm/HTMView.vue';
-import TokenAmountInput from '~/src/components/htm/tokens/TokenAmountInput.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -30,6 +28,9 @@ import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+import HTMView from '~/src/components/htm/HTMView.vue';
+import TokenAmountInput from '~/src/components/htm/tokens/TokenAmountInput.vue';
+
 const router = useRouter();
 const tokensStore = useTokensStore();
 
diff --git a/src/pages/tokens/my-tokens.vue b/src/pages/tokens/my-tokens.vue
index c9c4985..59fee8a 100644
--- a/src/pages/tokens/my-tokens.vue
+++ b/src/pages/tokens/my-tokens.vue
@@ -7,8 +7,6 @@ import {
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import HTMTokenCard from '~/src/components/htm/HTMTokenCard.vue';
-import HTMView from '~/src/components/htm/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -18,6 +16,9 @@ import { toastError } from '@/utils/parse-error';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+import HTMTokenCard from '~/src/components/htm/HTMTokenCard.vue';
+import HTMView from '~/src/components/htm/HTMView.vue';
+
 const router = useRouter();
 
 // State
diff --git a/src/pages/tokens/pos/receive.vue b/src/pages/tokens/pos/receive.vue
new file mode 100644
index 0000000..ca8ed52
--- /dev/null
+++ b/src/pages/tokens/pos/receive.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { mdiArrowLeft } from '@mdi/js';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import ReceiveTransferCard from '@/components/ReceiveTransferCard.vue';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
+import { useUserStore } from '@/stores/user.store';
+import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
+import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+import HTMView from '~/src/components/htm/HTMView.vue';
+
+
+// Router
+const route = useRoute();
+const router = useRouter();
+
+const settingsStore = useSettingsStore();
+const tokensStore = useTokensStore();
+const userStore = useUserStore();
+
+// State
+const token = ref<CtokensAppToken | null>(null);
+const isLoading = ref(true);
+
+// Get parameters from route query
+const assetNum = computed(() => route.query['asset-num'] as string);
+const precision = computed(() => route.query.precision as string);
+const receiverKey = computed(() => route.query.to as string || CTokensProvider.getOperationalPublicKey());
+const queryAmount = computed(() => route.query.amount as string | undefined);
+const queryMemo = computed(() => route.query.memo as string | undefined);
+
+const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
+
+// Check if user is logged in
+const isLoggedIn = computed(() => !!tokensStore.wallet);
+
+const htmUserMetadata = ref<{
+  displayName: string;
+  about?: string;
+  name?: string;
+  profileImage?: string;
+  website?: string;
+} | undefined>(undefined);
+
+const fetchHTMUserData = async () => {
+  try {
+    htmUserMetadata.value = await tokensStore.getCurrentUserMetadata();
+  } catch (_error) {}
+};
+
+// Receiver display helpers
+const receiverDisplayName = computed(() => {
+  // The recipient is you — prefer parsed user name (L2 if available)
+  const name = userStore.name || settingsStore.settings.account || userOperationalKey.value || '';
+  if (name) return name;
+  return 'You';
+});
+
+// Load token details
+const loadTokenDetails = async () => {
+  if (!assetNum.value) return;
+
+  try {
+    const wax = await getWax();
+
+    // Fetch token details by NAI
+    const params: { 'asset-num': number; precision?: number } = { 'asset-num': Number(assetNum.value) };
+    const tokens = await wax.restApi.ctokensApi.tokens(params);
+
+    const remoteToken = tokens && tokens.items && tokens.items.length > 0 ? tokens.items[0] : null;
+
+    if (!remoteToken)
+      throw new Error(`Token with asset number ${assetNum.value} not found`);
+
+    token.value = String(remoteToken.liquid?.asset_num) === assetNum.value ? remoteToken.liquid! : String(remoteToken.vesting?.asset_num) === assetNum.value ? remoteToken.vesting! : null;
+
+    if (!token.value)
+      throw new Error(`Token with asset number ${assetNum.value} not found`);
+  } catch (error) {
+    toastError('Failed to load token details', error);
+    router.push('/tokens/list');
+  }
+};
+
+// Navigate back to token detail
+const goBack = () => {
+  router.push({
+    path: '/tokens/token',
+    query: { 'asset-num': assetNum.value }
+  });
+};
+
+// Initialize
+onMounted(async () => {
+  // Allow viewing without login, but login will be required when clicking "Send Token"
+
+  isLoading.value = true;
+
+  // Load user balances if logged in
+  if (isLoggedIn.value) {
+    await tokensStore.loadBalances();
+    await fetchHTMUserData();
+  }
+
+  // Load token details if asset number is available
+  if (assetNum.value)
+    await loadTokenDetails();
+
+  isLoading.value = false;
+});
+
+// If the user logs in after the page mounted, reload balances, HTM user metadata, and token details
+watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
+  // Only act when the user becomes logged in
+  if (!loggedIn || wasLoggedIn === loggedIn) return;
+
+  isLoading.value = true;
+
+  try {
+    await tokensStore.loadBalances();
+    await fetchHTMUserData();
+
+    if (assetNum.value && precision.value)
+      await loadTokenDetails();
+  } catch (e) {
+    console.error('Error reloading data after login', e);
+  } finally {
+    isLoading.value = false;
+  }
+});
+
+// Also watch the tokens store wallet instance
+watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
+  if (!newWallet || newWallet === oldWallet) return;
+
+  isLoading.value = true;
+
+  try {
+    await tokensStore.loadBalances();
+    await fetchHTMUserData();
+
+    if (assetNum.value && precision.value)
+      await loadTokenDetails();
+  } catch (e) {
+    console.error('Error reloading data after tokensStore.wallet changed', e);
+  } finally {
+    isLoading.value = false;
+  }
+});
+</script>
+
+<template>
+  <HTMView>
+    <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-4xl">
+      <!-- Header -->
+      <div class="flex items-center justify-between gap-4">
+        <Button
+          v-if="assetNum"
+          variant="ghost"
+          size="sm"
+          class="gap-2 hover:bg-accent"
+          @click="goBack"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiArrowLeft"
+            />
+          </svg>
+          Back to Token
+        </Button>
+      </div>
+
+      <!-- Loading State -->
+      <div
+        v-if="isLoading"
+        class="space-y-6"
+      >
+        <Card>
+          <CardHeader>
+            <Skeleton class="h-8 w-48" />
+            <Skeleton class="h-4 w-64" />
+          </CardHeader>
+          <CardContent class="space-y-4">
+            <Skeleton class="h-10 w-full" />
+            <Skeleton class="h-10 w-full" />
+            <Skeleton class="h-24 w-full" />
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Receive Form -->
+      <div
+        v-if="!isLoading"
+        class="space-y-6"
+      >
+        <!-- Page Title -->
+        <div>
+          <h1 class="text-3xl font-bold text-foreground mb-2">
+            Send Token
+          </h1>
+          <p class="text-muted-foreground">
+            Confirm and send the token transfer.
+          </p>
+        </div>
+
+        <!-- Receive Transfer Card -->
+        <ReceiveTransferCard
+          :receiver-name="htmUserMetadata?.displayName || receiverDisplayName"
+          :receiver-key="receiverKey"
+          :receiver-avatar="htmUserMetadata?.profileImage"
+          :token-data="token"
+          :query-amount="queryAmount"
+          :query-memo="queryMemo"
+          :asset-num="assetNum"
+          :precision="precision"
+        />
+      </div>
+    </div>
+  </HTMView>
+</template>
diff --git a/src/pages/tokens/pos/send.vue b/src/pages/tokens/pos/send.vue
new file mode 100644
index 0000000..efadea9
--- /dev/null
+++ b/src/pages/tokens/pos/send.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import { mdiArrowLeft } from '@mdi/js';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { toast } from 'vue-sonner';
+
+import QRCodeCard from '@/components/htm/tokens/QRCodeCard.vue';
+import SendTransferCard from '@/components/SendTransferCard.vue';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useTokensStore, type CTokenBalanceDisplay } from '@/stores/tokens.store';
+import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
+import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
+
+import HTMView from '~/src/components/htm/HTMView.vue';
+
+
+// Router
+const route = useRoute();
+const router = useRouter();
+
+const tokensStore = useTokensStore();
+
+// State
+const token = ref<CtokensAppToken | null>(null);
+const isLoading = ref(true);
+
+// Form state
+const form = ref({
+  assetNum: '',
+  precision: '',
+  amount: '',
+  memo: ''
+});
+
+// Selected token NAI from TokenSelector (used when no asset-num is provided)
+const selectedTokenAssetNum = ref<string>('');
+
+// Get NAI and precision from route parameters or form or selected token
+const assetNum = computed(() => {
+  if (route.query['asset-num']) return route.query['asset-num'] as string;
+  if (selectedTokenAssetNum.value) return selectedTokenAssetNum.value;
+  return form.value.assetNum;
+});
+const precision = computed(() => route.query.precision as string || form.value.precision);
+
+// Check if NAI is provided in URL
+const hasNaiFromUrl = computed(() => !!route.query['asset-num']);
+
+// Check if we should show token selector (when no asset-num is provided)
+const shouldShowTokenSelector = computed(() => {
+  return !hasNaiFromUrl.value && isLoggedIn.value;
+});
+
+// Check if user is logged in
+const isLoggedIn = computed(() => !!tokensStore.wallet);
+
+// Watch selected token NAI changes to load token details
+watch(selectedTokenAssetNum, async (newAssetNum, oldAssetNum) => {
+  if (newAssetNum && newAssetNum !== oldAssetNum && shouldShowTokenSelector.value) {
+    isLoading.value = true;
+    // Get precision from the selected token's balance
+    let balance: CTokenBalanceDisplay | undefined;
+    for(const storeBalance of tokensStore.fungibleBalances) {
+      if (storeBalance.liquid.assetNum === Number(newAssetNum)) {
+        balance = storeBalance.liquid;
+        break;
+      } else if (storeBalance.vesting.assetNum === Number(newAssetNum)) {
+        balance = storeBalance.vesting;
+        break;
+      }
+    }
+    if (balance) {
+      form.value.precision = balance.precision?.toString() || '';
+      form.value.assetNum = balance.assetNum!.toString();
+      await loadTokenDetails();
+    } else
+      token.value = null;
+
+    isLoading.value = false;
+  }
+});
+
+// Load token details
+const loadTokenDetails = async () => {
+  if (!assetNum.value) return;
+
+  try {
+    const wax = await getWax();
+
+    // Fetch token details by NAI
+    const params: { 'asset-num': number; precision?: number } = { 'asset-num': Number(assetNum.value) };
+    const tokens = await wax.restApi.ctokensApi.tokens(params);
+
+    const remoteToken = tokens && tokens.items && tokens.items.length > 0 ? tokens.items[0] : null;
+
+    if (!remoteToken)
+      throw new Error(`Token with asset number ${assetNum.value} not found`);
+
+    token.value = String(remoteToken.liquid?.asset_num) === assetNum.value ? remoteToken.liquid! : String(remoteToken.vesting?.asset_num) === assetNum.value ? remoteToken.vesting! : null;
+
+    if (!token.value)
+      throw new Error(`Token with asset number ${assetNum.value} not found`);
+
+    // Update precision if not set from balance
+    if (token.value && !form.value.precision)
+      form.value.precision = token.value.precision?.toString() || '';
+  } catch (error) {
+    toastError('Failed to load token details', error);
+    router.push('/tokens/list');
+  }
+};
+
+// Navigate back to token detail
+const goBack = () => {
+  router.push({
+    path: '/tokens/token',
+    query: { 'asset-num': assetNum.value }
+  });
+};
+
+// Initialize
+onMounted(async () => {
+  // Require login for send/generate QR mode
+  if (!isLoggedIn.value) {
+    toast.error('You must be logged in to use this feature');
+    return;
+  }
+
+  isLoading.value = true;
+
+  // Load user balances (needed for token selector)
+  await tokensStore.loadBalances();
+
+  // Initialize form with query params
+  form.value.assetNum = route.query['asset-num'] as string || '';
+  selectedTokenAssetNum.value = route.query['asset-num'] as string || '';
+  form.value.precision = route.query.precision as string || '';
+
+  // Load token details if asset number is available
+  if (assetNum.value)
+    await loadTokenDetails();
+
+  isLoading.value = false;
+});
+
+// If the user logs in after the page mounted (for example after entering password),
+// reload balances and token details
+watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
+  // Only act when the user becomes logged in
+  if (!loggedIn || wasLoggedIn === loggedIn) return;
+
+  isLoading.value = true;
+
+  try {
+    // Load balances now that we have an authenticated session
+    await tokensStore.loadBalances();
+
+    // If nai/precision available, load token details
+    if (assetNum.value && precision.value)
+      await loadTokenDetails();
+  } catch (e) {
+    console.error('Error reloading data after login', e);
+  } finally {
+    isLoading.value = false;
+  }
+});
+
+// Also watch the tokens store wallet instance - this changes when CTokensProvider is set
+watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
+  if (!newWallet || newWallet === oldWallet) return;
+
+  isLoading.value = true;
+
+  try {
+    await tokensStore.loadBalances();
+
+    if (assetNum.value && precision.value)
+      await loadTokenDetails();
+  } catch (e) {
+    console.error('Error reloading data after tokensStore.wallet changed', e);
+  } finally {
+    isLoading.value = false;
+  }
+});
+</script>
+
+<template>
+  <HTMView>
+    <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-4xl">
+      <!-- Header -->
+      <div class="flex items-center justify-between gap-4">
+        <Button
+          v-if="hasNaiFromUrl || selectedTokenAssetNum"
+          variant="ghost"
+          size="sm"
+          class="gap-2 hover:bg-accent"
+          @click="goBack"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiArrowLeft"
+            />
+          </svg>
+          Back to Token
+        </Button>
+      </div>
+
+      <!-- Loading State -->
+      <div
+        v-if="isLoading"
+        class="space-y-6"
+      >
+        <Card>
+          <CardHeader>
+            <Skeleton class="h-8 w-48" />
+            <Skeleton class="h-4 w-64" />
+          </CardHeader>
+          <CardContent class="space-y-4">
+            <Skeleton class="h-10 w-full" />
+            <Skeleton class="h-10 w-full" />
+            <Skeleton class="h-24 w-full" />
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Send Form -->
+      <div
+        v-if="!isLoading"
+        class="space-y-6"
+      >
+        <!-- Page Title -->
+        <div>
+          <h1 class="text-3xl font-bold text-foreground mb-2">
+            {{ hasNaiFromUrl ? 'Receive Token' : 'Receive Token' }}
+          </h1>
+          <p class="text-muted-foreground">
+            {{ hasNaiFromUrl ? 'Generate a QR code for others to scan and send you tokens.' : 'Select a token and generate a QR code for others to scan and send you tokens.' }}
+          </p>
+        </div>
+
+        <!-- Send Transfer Card -->
+        <SendTransferCard
+          :has-nai-from-url="hasNaiFromUrl"
+          :should-show-token-selector="shouldShowTokenSelector"
+          :token-data="token"
+          :asset-num="assetNum"
+          :precision="precision"
+          :selected-token-asset-num="selectedTokenAssetNum"
+          @update-selected-token-asset-num="selectedTokenAssetNum = $event"
+          @update-amount="form.amount = $event"
+          @update-memo="form.memo = $event"
+        />
+
+        <!-- QR Code Card (visible when asset number is available) -->
+        <QRCodeCard
+          v-if="assetNum"
+          :asset-num="assetNum"
+          :amount="form.amount"
+          :memo="form.memo"
+        />
+      </div>
+    </div>
+  </HTMView>
+</template>
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index b72c111..5e451dd 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -14,8 +14,6 @@ import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-import HTMLoginContent from '~/src/components/htm/HTMLoginContent.vue';
-import HTMProvidePasswordContent from '~/src/components/htm/HTMProvidePasswordContent.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -31,6 +29,9 @@ import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+import HTMLoginContent from '~/src/components/htm/HTMLoginContent.vue';
+import HTMProvidePasswordContent from '~/src/components/htm/HTMProvidePasswordContent.vue';
+
 const walletStore = useWalletStore();
 const tokensStore = useTokensStore();
 const settingsStore = useSettingsStore();
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 0840acf..60d2191 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -6,8 +6,6 @@ import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
-import HTMView from '~/src/components/htm/HTMView.vue';
-import TokenAmountInput from '~/src/components/htm/tokens/TokenAmountInput.vue';
 import { AlertDescription, Alert } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -27,6 +25,9 @@ import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+import HTMView from '~/src/components/htm/HTMView.vue';
+import TokenAmountInput from '~/src/components/htm/tokens/TokenAmountInput.vue';
+
 // Router
 const route = useRoute();
 const router = useRouter();
@@ -488,7 +489,7 @@ const editToken = () => {
 
 const showQRCode = () => {
   router.push({
-    path: '/tokens/send-token',
+    path: '/tokens/pos/send',
     query: { 'asset-num': assetNum.value }
   });
 };
diff --git a/src/stores/wallet.store.ts b/src/stores/wallet.store.ts
index fe0281c..82f4952 100644
--- a/src/stores/wallet.store.ts
+++ b/src/stores/wallet.store.ts
@@ -36,7 +36,7 @@ export const useWalletStore = defineStore('wallet', {
     wallet: () => currentWallet.value,
     hasWallet: () => !!currentWallet.value,
     walletsStatus: state => {
-      if (!walletRetrievalIntervalId) {
+      if (!walletRetrievalIntervalId && import.meta.client) {
         const checkForWallets = () => {
           if (!state._walletsStatus.metamask)
             MetaMaskProvider.isExtensionInstalled().then(isInstalled => state._walletsStatus.metamask = isInstalled);
-- 
GitLab


From 44b6e7b2d8d750000c63982869620a7dc0b6579b Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Wed, 19 Nov 2025 12:01:38 +0100
Subject: [PATCH 093/102] Cleanup imports

---
 eslint.config.mjs                             | 24 ++++-
 package.json                                  |  2 +-
 src/components/ErrorDialog.vue                |  1 +
 src/components/ReceiveTransferCard.vue        |  2 +-
 src/components/SendTransferCard.vue           |  4 +-
 src/components/htm/HTMLoginForm.vue           |  2 +-
 src/components/htm/HTMProvidePassword.vue     |  2 +-
 src/components/htm/HTMTokenCard.vue           |  2 +-
 src/components/htm/HTMView.vue                |  2 +-
 src/components/htm/tokens/QRCodeCard.vue      |  5 +-
 src/components/htm/tokens/TokenSelector.vue   |  3 +-
 src/components/navigation/AppSidebar.vue      |  3 +-
 .../onboarding/wallets/htm/HTMConnect.vue     |  2 +-
 src/layouts/default.vue                       |  2 +-
 src/pages/tokens/create.vue                   |  4 +-
 src/pages/tokens/edit.vue                     |  2 +-
 src/pages/tokens/invoice.vue                  |  2 +-
 src/pages/tokens/list.vue                     |  4 +-
 src/pages/tokens/my-balance.vue               |  4 +-
 src/pages/tokens/my-tokens.vue                |  4 +-
 src/pages/tokens/pos/receive.vue              |  6 +-
 src/pages/tokens/pos/send.vue                 |  6 +-
 src/pages/tokens/register-account.vue         |  4 +-
 src/pages/tokens/token.vue                    |  4 +-
 src/stores/user.store.ts                      | 90 +++++++++----------
 25 files changed, 103 insertions(+), 83 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 70fe752..c80caf9 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -2,7 +2,29 @@ import withNuxt from './.nuxt/eslint.config.mjs';
 
 // Use a functional override to avoid mutating possibly-frozen rule objects returned by withNuxt()
 // Also append a small config to add an ignore for shadcn auto-generated UI components
-export default withNuxt().override('nuxt/rules', {
+export default withNuxt(
+  // Default Nuxt configuration
+  {},
+
+  // Client-specific rules
+  {
+    files: [
+      'src/**'
+    ],
+    rules: {
+      'no-console': 'error'
+    }
+  },
+
+  // Server-specific rules
+  {
+    files: [
+      'server/**'
+    ],
+    rules: {
+      'no-console': 'off'
+    }
+  }).override('nuxt/rules', {
   ignores: ['src/components/ui/**', 'src/utils/wallet/ctokens/api/**'],
   rules: {
     // Core ESLint rules
diff --git a/package.json b/package.json
index b0cecdc..fe4ed17 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "build": "nuxt build",
     "preview": "nuxt preview",
     "lint": "npm run lint-ci -- --fix",
-    "lint-ci": "eslint --max-warnings=0",
+    "lint-ci": "eslint",
     "postinstall": "nuxt prepare",
     "regenerate-ctokens-api": "pnpm --package @hiveio/wax-spec-generator dlx generate-wax-spec -o src/utils/wallet/ctokens/api -i"
   },
diff --git a/src/components/ErrorDialog.vue b/src/components/ErrorDialog.vue
index efe3fbd..41714ef 100644
--- a/src/components/ErrorDialog.vue
+++ b/src/components/ErrorDialog.vue
@@ -13,6 +13,7 @@ const updateOpen = (value: boolean) => {
 };
 
 const logOriginator = () => {
+  /* eslint-disable-next-line no-console */
   console.error(toRaw(errorStore.originator));
 };
 
diff --git a/src/components/ReceiveTransferCard.vue b/src/components/ReceiveTransferCard.vue
index 15e49e9..ea32827 100644
--- a/src/components/ReceiveTransferCard.vue
+++ b/src/components/ReceiveTransferCard.vue
@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
+import TokenAmountInput from '@/components/htm/tokens/TokenAmountInput.vue';
 import ReceiverTokenSummary from '@/components/ReceiverTokenSummary.vue';
 import TransferCompletedSummary from '@/components/TransferCompletedSummary.vue';
 import { Button } from '@/components/ui/button';
@@ -15,7 +16,6 @@ import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import TokenAmountInput from '~/src/components/htm/tokens/TokenAmountInput.vue';
 
 interface Props {
   receiverName?: string;
diff --git a/src/components/SendTransferCard.vue b/src/components/SendTransferCard.vue
index b2bc354..bbedfa8 100644
--- a/src/components/SendTransferCard.vue
+++ b/src/components/SendTransferCard.vue
@@ -2,14 +2,14 @@
 import { computed, ref, watch } from 'vue';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
+import TokenAmountInput from '@/components/htm/tokens/TokenAmountInput.vue';
+import TokenSelectorWithAmount from '@/components/htm/tokens/TokenSelectorWithAmount.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import TokenAmountInput from '~/src/components/htm/tokens/TokenAmountInput.vue';
-import TokenSelectorWithAmount from '~/src/components/htm/tokens/TokenSelectorWithAmount.vue';
 
 interface Props {
   hasNaiFromUrl: boolean;
diff --git a/src/components/htm/HTMLoginForm.vue b/src/components/htm/HTMLoginForm.vue
index 385b47e..798e61f 100644
--- a/src/components/htm/HTMLoginForm.vue
+++ b/src/components/htm/HTMLoginForm.vue
@@ -3,6 +3,7 @@ import { mdiClose } from '@mdi/js';
 import { onMounted, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
+import HTMLoginContent from '@/components/htm/HTMLoginContent.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -15,7 +16,6 @@ import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import HTMLoginContent from '~/src/components/htm/HTMLoginContent.vue';
 
 interface Props {
   showCloseButton?: boolean;
diff --git a/src/components/htm/HTMProvidePassword.vue b/src/components/htm/HTMProvidePassword.vue
index 1063488..93a4026 100644
--- a/src/components/htm/HTMProvidePassword.vue
+++ b/src/components/htm/HTMProvidePassword.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { mdiClose } from '@mdi/js';
 
+import HTMProvidePasswordContent from '@/components/htm/HTMProvidePasswordContent.vue';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { UsedWallet, getWalletIcon } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 
-import HTMProvidePasswordContent from '~/src/components/htm/HTMProvidePasswordContent.vue';
 
 const walletStore = useWalletStore();
 const tokensStore = useTokensStore();
diff --git a/src/components/htm/HTMTokenCard.vue b/src/components/htm/HTMTokenCard.vue
index bbc3d14..3469aee 100644
--- a/src/components/htm/HTMTokenCard.vue
+++ b/src/components/htm/HTMTokenCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import HTMTokenPreview from '@/components/htm/HTMTokenPreview.vue';
 import type { CTokenDefinitionDisplay } from '@/stores/tokens.store';
 
-import HTMTokenPreview from '~/src/components/htm/HTMTokenPreview.vue';
 
 interface Props {
   token: CTokenDefinitionDisplay;
diff --git a/src/components/htm/HTMView.vue b/src/components/htm/HTMView.vue
index 7c02968..7e482ba 100644
--- a/src/components/htm/HTMView.vue
+++ b/src/components/htm/HTMView.vue
@@ -2,11 +2,11 @@
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import HTMLoginForm from '@/components/htm/HTMLoginForm.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useTokensStore } from '@/stores/tokens.store';
 
-import HTMLoginForm from '~/src/components/htm/HTMLoginForm.vue';
 
 const tokensStore = useTokensStore();
 const router = useRouter();
diff --git a/src/components/htm/tokens/QRCodeCard.vue b/src/components/htm/tokens/QRCodeCard.vue
index 8938fa8..aec84b2 100644
--- a/src/components/htm/tokens/QRCodeCard.vue
+++ b/src/components/htm/tokens/QRCodeCard.vue
@@ -2,9 +2,9 @@
 import { computed, onMounted, ref, watch } from 'vue';
 
 import { Card, CardContent } from '@/components/ui/card';
+import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-
 const props = defineProps<{
   assetNum: number | string;
   amount?: string;
@@ -49,9 +49,10 @@ const generateQRCode = async () => {
       }
     });
     qrCodeDataUrl.value = dataUrl;
+    /* eslint-disable-next-line no-console */
     console.log('Generated QR code for URL:', url);
   } catch (error) {
-    console.error('Failed to generate QR code:', error);
+    toastError('Failed to generate QR code:', error);
     qrCodeDataUrl.value = '';
   }
 };
diff --git a/src/components/htm/tokens/TokenSelector.vue b/src/components/htm/tokens/TokenSelector.vue
index b3a910f..1f0d3fc 100644
--- a/src/components/htm/tokens/TokenSelector.vue
+++ b/src/components/htm/tokens/TokenSelector.vue
@@ -6,8 +6,7 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/components/ui/combobox';
 import { useTokensStore, type CTokenBalanceDisplay } from '@/stores/tokens.store';
-
-import { toastError } from '~/src/utils/parse-error';
+import { toastError } from '@/utils/parse-error';
 
 interface TokenOption {
   balance: CTokenBalanceDisplay;
diff --git a/src/components/navigation/AppSidebar.vue b/src/components/navigation/AppSidebar.vue
index 5c643a6..2937675 100644
--- a/src/components/navigation/AppSidebar.vue
+++ b/src/components/navigation/AppSidebar.vue
@@ -9,6 +9,7 @@ import { Sidebar, SidebarContent, SidebarHeader, SidebarFooter, SidebarGroup, Si
 import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
 
 const { public: { commitHash, snapOrigin, snapVersion } } = useRuntimeConfig();
 
@@ -154,7 +155,7 @@ onMounted(async () => {
 
     waxVersion.value = wax.getVersion();
   } catch(error) {
-    console.error('Failed to get WAX instance:', error);
+    toastError('Failed to get WAX instance:', error);
   }
 });
 </script>
diff --git a/src/components/onboarding/wallets/htm/HTMConnect.vue b/src/components/onboarding/wallets/htm/HTMConnect.vue
index c4693b8..3fd425e 100644
--- a/src/components/onboarding/wallets/htm/HTMConnect.vue
+++ b/src/components/onboarding/wallets/htm/HTMConnect.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { mdiClose } from '@mdi/js';
 
+import HTMLoginContent from '@/components/htm/HTMLoginContent.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { UsedWallet, getWalletIcon } from '@/stores/settings.store';
 
-import HTMLoginContent from '~/src/components/htm/HTMLoginContent.vue';
 
 const emit = defineEmits(['setaccount', 'close']);
 
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index c16d402..66ef90d 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, defineAsyncComponent } from 'vue';
 import { toast } from 'vue-sonner';
 
+import HTMProvidePassword from '@/components/htm/HTMProvidePassword.vue';
 import AppSidebar from '@/components/navigation';
 import AppHeader from '@/components/navigation/AppHeader.vue';
 import { SidebarProvider } from '@/components/ui/sidebar';
@@ -11,7 +12,6 @@ import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { toastError } from '@/utils/parse-error';
 
-import HTMProvidePassword from '~/src/components/htm/HTMProvidePassword.vue';
 
 const route = useRoute();
 
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index afafbad..d42b7a1 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -12,6 +12,8 @@ import { computed, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
+import HTMTokenPreview from '@/components/htm/HTMTokenPreview.vue';
+import HTMView from '@/components/htm/HTMView.vue';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -30,8 +32,6 @@ import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import HTMTokenPreview from '~/src/components/htm/HTMTokenPreview.vue';
-import HTMView from '~/src/components/htm/HTMView.vue';
 
 const router = useRouter();
 
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index 4394f67..2c7d59e 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -5,6 +5,7 @@ import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
+import HTMView from '@/components/htm/HTMView.vue';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -21,7 +22,6 @@ import { waitForTransactionStatus } from '@/utils/transaction-status';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import HTMView from '~/src/components/htm/HTMView.vue';
 
 // Router
 const route = useRoute();
diff --git a/src/pages/tokens/invoice.vue b/src/pages/tokens/invoice.vue
index 2868564..ddb95b4 100644
--- a/src/pages/tokens/invoice.vue
+++ b/src/pages/tokens/invoice.vue
@@ -4,6 +4,7 @@ import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
+import HTMView from '@/components/htm/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
@@ -11,7 +12,6 @@ import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 
-import HTMView from '~/src/components/htm/HTMView.vue';
 
 // Router
 const route = useRoute();
diff --git a/src/pages/tokens/list.vue b/src/pages/tokens/list.vue
index fbd58ee..fb01b23 100644
--- a/src/pages/tokens/list.vue
+++ b/src/pages/tokens/list.vue
@@ -3,6 +3,8 @@ import { mdiRefresh, mdiPlus } from '@mdi/js';
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import HTMTokenCard from '@/components/htm/HTMTokenCard.vue';
+import HTMView from '@/components/htm/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -10,8 +12,6 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 
-import HTMTokenCard from '~/src/components/htm/HTMTokenCard.vue';
-import HTMView from '~/src/components/htm/HTMView.vue';
 
 // Router
 const router = useRouter();
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 1502272..90c8c2a 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -15,6 +15,8 @@ import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
+import HTMView from '@/components/htm/HTMView.vue';
+import TokenAmountInput from '@/components/htm/tokens/TokenAmountInput.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -28,8 +30,6 @@ import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import HTMView from '~/src/components/htm/HTMView.vue';
-import TokenAmountInput from '~/src/components/htm/tokens/TokenAmountInput.vue';
 
 const router = useRouter();
 const tokensStore = useTokensStore();
diff --git a/src/pages/tokens/my-tokens.vue b/src/pages/tokens/my-tokens.vue
index 59fee8a..8b7452f 100644
--- a/src/pages/tokens/my-tokens.vue
+++ b/src/pages/tokens/my-tokens.vue
@@ -7,6 +7,8 @@ import {
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import HTMTokenCard from '@/components/htm/HTMTokenCard.vue';
+import HTMView from '@/components/htm/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -16,8 +18,6 @@ import { toastError } from '@/utils/parse-error';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import HTMTokenCard from '~/src/components/htm/HTMTokenCard.vue';
-import HTMView from '~/src/components/htm/HTMView.vue';
 
 const router = useRouter();
 
diff --git a/src/pages/tokens/pos/receive.vue b/src/pages/tokens/pos/receive.vue
index ca8ed52..09745b5 100644
--- a/src/pages/tokens/pos/receive.vue
+++ b/src/pages/tokens/pos/receive.vue
@@ -3,6 +3,7 @@ import { mdiArrowLeft } from '@mdi/js';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
+import HTMView from '@/components/htm/HTMView.vue';
 import ReceiveTransferCard from '@/components/ReceiveTransferCard.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
@@ -15,7 +16,6 @@ import { toastError } from '@/utils/parse-error';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import HTMView from '~/src/components/htm/HTMView.vue';
 
 
 // Router
@@ -131,7 +131,7 @@ watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
     if (assetNum.value && precision.value)
       await loadTokenDetails();
   } catch (e) {
-    console.error('Error reloading data after login', e);
+    toastError('Error reloading data after login', e);
   } finally {
     isLoading.value = false;
   }
@@ -150,7 +150,7 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
     if (assetNum.value && precision.value)
       await loadTokenDetails();
   } catch (e) {
-    console.error('Error reloading data after tokensStore.wallet changed', e);
+    toastError('Error reloading data after tokensStore.wallet changed', e);
   } finally {
     isLoading.value = false;
   }
diff --git a/src/pages/tokens/pos/send.vue b/src/pages/tokens/pos/send.vue
index efadea9..83e13e9 100644
--- a/src/pages/tokens/pos/send.vue
+++ b/src/pages/tokens/pos/send.vue
@@ -4,6 +4,7 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
+import HTMView from '@/components/htm/HTMView.vue';
 import QRCodeCard from '@/components/htm/tokens/QRCodeCard.vue';
 import SendTransferCard from '@/components/SendTransferCard.vue';
 import { Button } from '@/components/ui/button';
@@ -14,7 +15,6 @@ import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 
-import HTMView from '~/src/components/htm/HTMView.vue';
 
 
 // Router
@@ -162,7 +162,7 @@ watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
     if (assetNum.value && precision.value)
       await loadTokenDetails();
   } catch (e) {
-    console.error('Error reloading data after login', e);
+    toastError('Error reloading data after login', e);
   } finally {
     isLoading.value = false;
   }
@@ -180,7 +180,7 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
     if (assetNum.value && precision.value)
       await loadTokenDetails();
   } catch (e) {
-    console.error('Error reloading data after tokensStore.wallet changed', e);
+    toastError('Error reloading data after tokensStore.wallet changed', e);
   } finally {
     isLoading.value = false;
   }
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index 5e451dd..b3aa168 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -14,6 +14,8 @@ import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
+import HTMLoginContent from '@/components/htm/HTMLoginContent.vue';
+import HTMProvidePasswordContent from '@/components/htm/HTMProvidePasswordContent.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -29,8 +31,6 @@ import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import HTMLoginContent from '~/src/components/htm/HTMLoginContent.vue';
-import HTMProvidePasswordContent from '~/src/components/htm/HTMProvidePasswordContent.vue';
 
 const walletStore = useWalletStore();
 const tokensStore = useTokensStore();
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 60d2191..b51f8f8 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -6,6 +6,8 @@ import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
+import HTMView from '@/components/htm/HTMView.vue';
+import TokenAmountInput from '@/components/htm/tokens/TokenAmountInput.vue';
 import { AlertDescription, Alert } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -25,8 +27,6 @@ import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import HTMView from '~/src/components/htm/HTMView.vue';
-import TokenAmountInput from '~/src/components/htm/tokens/TokenAmountInput.vue';
 
 // Router
 const route = useRoute();
diff --git a/src/stores/user.store.ts b/src/stores/user.store.ts
index 7068ed6..05bfb49 100644
--- a/src/stores/user.store.ts
+++ b/src/stores/user.store.ts
@@ -122,53 +122,49 @@ export const useUserStore = defineStore('user', {
       return hivePrice;
     },
     async parseUserBalances (data: ApiAccount) {
-      try {
-        const wax = await getWax();
-        const { total_vesting_fund_hive, total_vesting_shares, downvote_pool_percent, time } = await wax.api.database_api.get_dynamic_global_properties({});
-        const vestsToHp = (data: bigint) => BigInt(wax.vestsToHp(data, total_vesting_fund_hive, total_vesting_shares).amount);
-        const hivePrice = await this.getHivePrice();
-        this.balances = {
-          HP: {
-            owned: new BalanceData(vestsToHp(BigInt(data.vesting_shares.amount) - BigInt(data.delegated_vesting_shares.amount)), data.balance.precision, hivePrice),
-            received: new BalanceData(vestsToHp(BigInt(data.received_vesting_shares.amount)), data.balance.precision, hivePrice),
-            delegated: new BalanceData(vestsToHp(BigInt(data.delegated_vesting_shares.amount)), data.balance.precision, hivePrice),
-            unclaimed: new BalanceData(BigInt(data.reward_vesting_hive.amount), data.balance.precision, hivePrice),
-            poweringDown: new BalanceData(vestsToHp(BigInt(data.vesting_withdraw_rate.amount) * BigInt(Math.max(0, new Date(data.next_vesting_withdrawal).getTime() - Date.now())) / BigInt(60 * 60 * 24 * 7 * 52)), data.balance.precision, hivePrice)
-          },
-          HBD: {
-            liquid: new BalanceData(BigInt(data.hbd_balance.amount), data.hbd_balance.precision, 1),
-            savings: new BalanceData(BigInt(data.savings_hbd_balance.amount), data.savings_hbd_balance.precision, 1),
-            unclaimed: new BalanceData(BigInt(data.reward_hbd_balance.amount), data.reward_hbd_balance.precision, 1)
-          },
-          HIVE: {
-            liquid: new BalanceData(BigInt(data.balance.amount), data.balance.precision, hivePrice),
-            savings: new BalanceData(BigInt(data.savings_balance.amount), data.savings_balance.precision, hivePrice),
-            unclaimed: new BalanceData(BigInt(data.reward_hive_balance.amount), data.reward_hive_balance.precision, hivePrice)
-          }
-        };
-
-        // Maybe adjust wax code so I don't have to do all of this manually:
-        // (Currently I do this so wax does not call API multiple times for same data)
-        const { rc_accounts: [rcData] } = await wax.api.rc_api.find_rc_accounts({ accounts: [data.name] });
-        if (!rcData)
-          throw new Error('RC data not found for account');
-
-        const now = Math.floor(new Date(`${time}Z`).getTime() / 1000);
-        const downvotePoolPercent = BigInt(downvote_pool_percent);
-        let downVoteManabarMax = BigInt(data.post_voting_power.amount);
-        if(downVoteManabarMax / ONE_HUNDRED_PERCENT > ONE_HUNDRED_PERCENT)
-          downVoteManabarMax = (downVoteManabarMax / ONE_HUNDRED_PERCENT) * downvotePoolPercent;
-        else
-          downVoteManabarMax = (downVoteManabarMax * downvotePoolPercent) / ONE_HUNDRED_PERCENT;
-
-        this.manabars = {
-          upvote: wax.calculateCurrentManabarValue(now, data.post_voting_power.amount, data.voting_manabar.current_mana, data.voting_manabar.last_update_time),
-          downvote: wax.calculateCurrentManabarValue(now, downVoteManabarMax, data.downvote_manabar.current_mana, data.downvote_manabar.last_update_time),
-          rc: wax.calculateCurrentManabarValue(now, rcData.max_rc, rcData.rc_manabar.current_mana, rcData.rc_manabar.last_update_time)
-        };
-      } catch (error) {
-        console.error('Error fetching prices:', error);
-      }
+      const wax = await getWax();
+      const { total_vesting_fund_hive, total_vesting_shares, downvote_pool_percent, time } = await wax.api.database_api.get_dynamic_global_properties({});
+      const vestsToHp = (data: bigint) => BigInt(wax.vestsToHp(data, total_vesting_fund_hive, total_vesting_shares).amount);
+      const hivePrice = await this.getHivePrice();
+      this.balances = {
+        HP: {
+          owned: new BalanceData(vestsToHp(BigInt(data.vesting_shares.amount) - BigInt(data.delegated_vesting_shares.amount)), data.balance.precision, hivePrice),
+          received: new BalanceData(vestsToHp(BigInt(data.received_vesting_shares.amount)), data.balance.precision, hivePrice),
+          delegated: new BalanceData(vestsToHp(BigInt(data.delegated_vesting_shares.amount)), data.balance.precision, hivePrice),
+          unclaimed: new BalanceData(BigInt(data.reward_vesting_hive.amount), data.balance.precision, hivePrice),
+          poweringDown: new BalanceData(vestsToHp(BigInt(data.vesting_withdraw_rate.amount) * BigInt(Math.max(0, new Date(data.next_vesting_withdrawal).getTime() - Date.now())) / BigInt(60 * 60 * 24 * 7 * 52)), data.balance.precision, hivePrice)
+        },
+        HBD: {
+          liquid: new BalanceData(BigInt(data.hbd_balance.amount), data.hbd_balance.precision, 1),
+          savings: new BalanceData(BigInt(data.savings_hbd_balance.amount), data.savings_hbd_balance.precision, 1),
+          unclaimed: new BalanceData(BigInt(data.reward_hbd_balance.amount), data.reward_hbd_balance.precision, 1)
+        },
+        HIVE: {
+          liquid: new BalanceData(BigInt(data.balance.amount), data.balance.precision, hivePrice),
+          savings: new BalanceData(BigInt(data.savings_balance.amount), data.savings_balance.precision, hivePrice),
+          unclaimed: new BalanceData(BigInt(data.reward_hive_balance.amount), data.reward_hive_balance.precision, hivePrice)
+        }
+      };
+
+      // Maybe adjust wax code so I don't have to do all of this manually:
+      // (Currently I do this so wax does not call API multiple times for same data)
+      const { rc_accounts: [rcData] } = await wax.api.rc_api.find_rc_accounts({ accounts: [data.name] });
+      if (!rcData)
+        throw new Error('RC data not found for account');
+
+      const now = Math.floor(new Date(`${time}Z`).getTime() / 1000);
+      const downvotePoolPercent = BigInt(downvote_pool_percent);
+      let downVoteManabarMax = BigInt(data.post_voting_power.amount);
+      if(downVoteManabarMax / ONE_HUNDRED_PERCENT > ONE_HUNDRED_PERCENT)
+        downVoteManabarMax = (downVoteManabarMax / ONE_HUNDRED_PERCENT) * downvotePoolPercent;
+      else
+        downVoteManabarMax = (downVoteManabarMax * downvotePoolPercent) / ONE_HUNDRED_PERCENT;
+
+      this.manabars = {
+        upvote: wax.calculateCurrentManabarValue(now, data.post_voting_power.amount, data.voting_manabar.current_mana, data.voting_manabar.last_update_time),
+        downvote: wax.calculateCurrentManabarValue(now, downVoteManabarMax, data.downvote_manabar.current_mana, data.downvote_manabar.last_update_time),
+        rc: wax.calculateCurrentManabarValue(now, rcData.max_rc, rcData.rc_manabar.current_mana, rcData.rc_manabar.last_update_time)
+      };
     },
     async parseCTokenData (accountName: string) {
       const wax = await getWax();
-- 
GitLab


From 7fc44622ca0b39efa8227472c57d0f7e326ba10b Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Wed, 19 Nov 2025 13:15:01 +0100
Subject: [PATCH 094/102] Do not use ctokens API directly outside the store

---
 eslint.config.mjs                             |  2 +-
 src/components/ReceiveTransferCard.vue        | 39 +++--------
 src/components/SendTransferCard.vue           | 18 +++--
 src/components/TransferCompletedSummary.vue   |  4 +-
 src/components/htm/HTMLoginContent.vue        | 11 +--
 .../htm/tokens/TokenAmountInput.vue           |  2 +-
 .../htm/tokens/TokenSelectorWithAmount.vue    |  2 +-
 src/components/wallet/AddToGoogleWallet.vue   | 17 ++---
 src/pages/tokens/edit.vue                     | 65 ++++++-----------
 src/pages/tokens/invoice.vue                  | 27 ++-----
 src/pages/tokens/my-tokens.vue                | 70 ++++++++-----------
 src/pages/tokens/pos/receive.vue              | 26 ++-----
 src/pages/tokens/pos/send.vue                 | 28 ++------
 src/pages/tokens/token.vue                    | 17 +----
 src/stores/tokens.store.ts                    |  1 -
 15 files changed, 98 insertions(+), 231 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index c80caf9..76e1d5f 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -12,7 +12,7 @@ export default withNuxt(
       'src/**'
     ],
     rules: {
-      'no-console': 'error'
+      'no-console': 'warn'
     }
   },
 
diff --git a/src/components/ReceiveTransferCard.vue b/src/components/ReceiveTransferCard.vue
index ea32827..713b714 100644
--- a/src/components/ReceiveTransferCard.vue
+++ b/src/components/ReceiveTransferCard.vue
@@ -10,10 +10,9 @@ import ReceiverTokenSummary from '@/components/ReceiverTokenSummary.vue';
 import TransferCompletedSummary from '@/components/TransferCompletedSummary.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { useTokensStore } from '@/stores/tokens.store';
+import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
-import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 
@@ -21,10 +20,10 @@ interface Props {
   receiverName?: string;
   receiverKey?: string;
   receiverAvatar?: string;
-  tokenData?: CtokensAppToken | null;
+  tokenData?: CTokenDisplayBase | null;
   queryAmount?: string;
   queryMemo?: string;
-  assetNum: string;
+  assetNum: number;
   precision: string;
 }
 
@@ -50,24 +49,6 @@ const sentSummary = ref<{ amount: string; tokenLabel: string; receiver: string;
 // Check if user is logged in
 const isLoggedIn = computed(() => !!tokensStore.wallet);
 
-const tokenName = computed(() => {
-  if (!props.tokenData) return 'Unknown Token';
-  const metadata = props.tokenData.metadata as { name?: string } | undefined;
-  return metadata?.name || props.tokenData.nai || 'Unknown Token';
-});
-
-const tokenSymbol = computed(() => {
-  if (!props.tokenData) return '';
-  const metadata = props.tokenData.metadata as { symbol?: string } | undefined;
-  return metadata?.symbol || '';
-});
-
-const tokenImage = computed(() => {
-  if (!props.tokenData) return '';
-  const metadata = props.tokenData.metadata as { image?: string } | undefined;
-  return metadata?.image || '';
-});
-
 const amountValidation = computed(() => {
   if (!form.value.amount)
     return { isValid: true, error: '' };
@@ -185,10 +166,10 @@ const handleSend = async () => {
 
     transferCompleted.value = true;
 
-    const balanceObj = await tokensStore.getBalanceSingleToken(sender, props.tokenData.asset_num!);
+    const balanceObj = await tokensStore.getBalanceSingleToken(sender, props.tokenData.assetNum);
 
     const receiverLabel = props.receiverName || props.receiverKey || 'Recipient';
-    const tokenLabel = tokenSymbol.value || tokenName.value || props.tokenData!.nai || '';
+    const tokenLabel = props.tokenData.symbol || props.tokenData.name || String(props.tokenData.assetNum) || '';
 
     const ts = new Date().toISOString();
 
@@ -240,9 +221,9 @@ watch(() => props.queryMemo, (newValue) => {
       <!-- Amount compact -->
       <TokenAmountInput
         v-model="form.amount"
-        :token-name="tokenName"
-        :token-symbol="tokenSymbol"
-        :token-image="tokenImage"
+        :token-name="tokenData?.name"
+        :token-symbol="tokenData?.symbol"
+        :token-image="tokenData?.image"
         :token-asset-num="assetNum"
         :precision="tokenData?.precision"
         :is-valid="amountValidation.isValid"
@@ -272,8 +253,8 @@ watch(() => props.queryMemo, (newValue) => {
         <TransferCompletedSummary
           v-if="transferCompleted"
           :amount="sentSummary?.amount || form.amount"
-          :token-symbol="tokenSymbol"
-          :token-name="tokenName"
+          :token-symbol="tokenData?.symbol"
+          :token-name="tokenData!.name!"
           :is-receive-mode="true"
           :receiver-key="receiverKey"
           :receiver-name="receiverName"
diff --git a/src/components/SendTransferCard.vue b/src/components/SendTransferCard.vue
index bbedfa8..36844c1 100644
--- a/src/components/SendTransferCard.vue
+++ b/src/components/SendTransferCard.vue
@@ -7,16 +7,14 @@ import TokenSelectorWithAmount from '@/components/htm/tokens/TokenSelectorWithAm
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
-import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
+import type { CTokenDisplayBase } from '@/stores/tokens.store';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 
 interface Props {
   hasNaiFromUrl: boolean;
   shouldShowTokenSelector: boolean;
-  tokenData?: CtokensAppToken | null;
-  assetNum: string;
-  precision: string;
+  tokenData: CTokenDisplayBase | null;
   selectedTokenAssetNum?: string;
   initialAmount?: string;
   initialMemo?: string;
@@ -156,8 +154,8 @@ watch(() => form.value.memo, (newValue) => {
         v-model:selected-token-asset-num="selectedTokenAssetNum"
         :token-symbol="tokenSymbol"
         :token-name="tokenName"
-        :token-precision="props?.precision"
-        :token-image="props.tokenData?.metadata?.image"
+        :token-precision="props.tokenData!.precision"
+        :token-image="props.tokenData!.image"
         :is-valid="amountValidation.isValid"
         :validation-error="amountValidation.error"
       />
@@ -190,7 +188,7 @@ watch(() => form.value.memo, (newValue) => {
           placeholder="Asset number"
           class="transition-colors"
           disabled
-          :value="assetNum"
+          :value="tokenData!.assetNum"
         />
         <Input
           id="precision"
@@ -200,7 +198,7 @@ watch(() => form.value.memo, (newValue) => {
           max="18"
           class="transition-colors"
           disabled
-          :value="precision"
+          :value="tokenData!.assetNum"
         />
       </div>
 
@@ -211,8 +209,8 @@ watch(() => form.value.memo, (newValue) => {
         :token-name="tokenName"
         :token-symbol="tokenSymbol"
         :token-image="tokenImage"
-        :token-asset-num="assetNum"
-        :precision="tokenData?.precision"
+        :token-asset-num="tokenData!.assetNum"
+        :precision="tokenData!.precision"
         :is-valid="amountValidation.isValid"
         :validation-error="amountValidation.error"
       />
diff --git a/src/components/TransferCompletedSummary.vue b/src/components/TransferCompletedSummary.vue
index 8ea9d6a..e1c6881 100644
--- a/src/components/TransferCompletedSummary.vue
+++ b/src/components/TransferCompletedSummary.vue
@@ -15,7 +15,7 @@ interface Props {
   receiverName?: string;
   remainingBalance?: string;
   timestamp?: string;
-  assetNum: string;
+  assetNum: number;
   precision: string;
   memo?: string;
 }
@@ -28,7 +28,7 @@ const generateInvoice = () => {
   const params = new URLSearchParams({
     fromPk: props.isReceiveMode ? CTokensProvider.getOperationalPublicKey() || '' : CTokensProvider.getOperationalPublicKey() || '',
     toPk: props.isReceiveMode ? props.receiverKey || '' : CTokensProvider.getOperationalPublicKey() || '',
-    'asset-num': props.assetNum,
+    'asset-num': props.assetNum.toString(),
     amount: props.amount
   });
 
diff --git a/src/components/htm/HTMLoginContent.vue b/src/components/htm/HTMLoginContent.vue
index 4170ba6..72fdb0e 100644
--- a/src/components/htm/HTMLoginContent.vue
+++ b/src/components/htm/HTMLoginContent.vue
@@ -45,6 +45,8 @@ const handleConditionalSiteLogin = async (operationalKey: string) => {
     return;
   }
 
+  await tokensStore.getCurrentUserMetadata();
+
   // Not logged in using any wallet so allow user log in using HTM wallet
 
   // Set settings with the operational key as account and CTOKENS wallet
@@ -70,15 +72,6 @@ const connect = async () => {
 
     const { operational } = await CTokensProvider.createWallet(password.value, operationalKey.value, managementKey.value.length === 0 ? undefined : managementKey.value);
 
-    const wax = await getWax();
-
-    const users = await wax.restApi.ctokensApi.users({ user: operational });
-    if (!users?.management_key) {
-      toastError('Failed to connect to HTM', 'The provided operational key is not registered in HTM');
-
-      return;
-    }
-
     await CTokensProvider.login(password.value);
 
     await handleConditionalSiteLogin(operational);
diff --git a/src/components/htm/tokens/TokenAmountInput.vue b/src/components/htm/tokens/TokenAmountInput.vue
index 08b0088..8d184e7 100644
--- a/src/components/htm/tokens/TokenAmountInput.vue
+++ b/src/components/htm/tokens/TokenAmountInput.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
   tokenName?: string;
   tokenSymbol?: string;
   tokenImage?: string;
-  tokenAssetNum?: string;
+  tokenAssetNum?: number;
   precision?: number;
   disabled?: boolean;
   label?: string | null;
diff --git a/src/components/htm/tokens/TokenSelectorWithAmount.vue b/src/components/htm/tokens/TokenSelectorWithAmount.vue
index a2f2ace..2e17b8b 100644
--- a/src/components/htm/tokens/TokenSelectorWithAmount.vue
+++ b/src/components/htm/tokens/TokenSelectorWithAmount.vue
@@ -11,7 +11,7 @@ interface Props {
   selectedTokenAssetNum: string;
   tokenSymbol?: string;
   tokenName: string;
-  tokenPrecision?: string;
+  tokenPrecision?: number;
   tokenImage?: string;
   isValid: boolean;
   validationError?: string;
diff --git a/src/components/wallet/AddToGoogleWallet.vue b/src/components/wallet/AddToGoogleWallet.vue
index fe81429..44355b5 100644
--- a/src/components/wallet/AddToGoogleWallet.vue
+++ b/src/components/wallet/AddToGoogleWallet.vue
@@ -2,9 +2,10 @@
 import { ref } from 'vue';
 
 import { Button } from '@/components/ui/button';
-import { getWax } from '@/stores/wax.store';
+import { useTokensStore } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+const tokensStore = useTokensStore();
 
 // Google Wallet integration
 const googleWalletLoading = ref(false);
@@ -13,21 +14,15 @@ const addToGoogleWallet = async () => {
   googleWalletLoading.value = true;
 
   try {
-    const wax = await getWax();
-
-    const operationalPublicKey = CTokensProvider.getOperationalPublicKey();
-    if (!operationalPublicKey)
-      throw new Error('Operational public key not found');
-
-    const { metadata } = await wax.restApi.ctokensApi.users({ user: operationalPublicKey });
+    const { operationalKey, name } = await tokensStore.getCurrentUserMetadata();
     const baseUrl = window.location.origin;
     const res = await fetch('/api/google-wallet', {
       method: 'POST',
 
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
-        operationalPublicKey,
-        displayName: metadata?.name || 'User',
+        operationalPublicKey: operationalKey,
+        displayName: name || 'User',
         baseUrl
       })
     });
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index 2c7d59e..d59f084 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -16,22 +16,21 @@ import { Separator } from '@/components/ui/separator';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Textarea } from '@/components/ui/textarea';
 import { useSettingsStore } from '@/stores/settings.store';
-import { getWax } from '@/stores/wax.store';
+import { useTokensStore, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
-import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-
 // Router
 const route = useRoute();
 const router = useRouter();
 
 // Stores
 const settingsStore = useSettingsStore();
+const tokensStore = useTokensStore();
 
 // State
-const token = ref<CtokensAppToken | null>(null);
+const token = ref<CTokenDefinitionDisplay | null>(null);
 const isLoading = ref(true);
 const isUpdating = ref(false);
 
@@ -45,15 +44,15 @@ const form = ref({
 });
 
 // Get NAI and precision from route parameters
-const assetNum = computed(() => route.query['asset-num'] as string);
+const assetNum = computed(() => Number(route.query['asset-num']));
 
 // Check if user is logged in
 const isLoggedIn = computed(() => !!settingsStore.settings.account);
 
 // Check if current user is the token owner
 const isTokenOwner = computed(() => {
-  if (!token.value?.owner || !CTokensProvider.getOperationalPublicKey()) return false;
-  return token.value.owner === CTokensProvider.getOperationalPublicKey();
+  if (!token.value?.ownerPublicKey || !CTokensProvider.getOperationalPublicKey()) return false;
+  return token.value.ownerPublicKey === CTokensProvider.getOperationalPublicKey();
 });
 
 // Computed properties for display
@@ -91,38 +90,14 @@ const hasChanges = computed(() => {
 // Load token details
 const loadTokenDetails = async () => {
   try {
-    const wax = await getWax();
-
     // Fetch token details by NAI
-    const tokens = await wax.restApi.ctokensApi.tokens({
-      'asset-num': Number(assetNum.value)
-    });
-
-    const remoteToken = tokens.items && tokens.items.length > 0 ? tokens.items[0] : null;
-
-    if (!remoteToken)
-      throw new Error(`Token with asset num ${assetNum.value} not found`);
-
-    token.value = String(remoteToken!.liquid?.asset_num) === assetNum.value ? remoteToken!.liquid! : String(remoteToken?.vesting?.asset_num) === assetNum.value ? remoteToken!.vesting! : null;
-
-    if (!token.value)
-      throw new Error(`Token with asset num ${assetNum.value} not found`);
-
-    // Populate form with existing metadata
-    const metadata = token.value.metadata as {
-      name?: string;
-      symbol?: string;
-      description?: string;
-      image?: string;
-      website?: string;
-    } | undefined;
-
-    form.value.name = metadata?.name || '';
-    form.value.symbol = metadata?.symbol || '';
-    form.value.description = metadata?.description || '';
-    form.value.image = metadata?.image || '';
-    form.value.website = metadata?.website || '';
+    token.value = await tokensStore.getTokenByAssetNum(assetNum.value);
 
+    form.value.name = token.value?.name || '';
+    form.value.symbol = token.value?.symbol || '';
+    form.value.description = token.value?.description || '';
+    form.value.image = token.value?.image || '';
+    form.value.website = token.value?.website || '';
   } catch (error) {
     toastError('Failed to load token details', error);
     router.push('/tokens/list');
@@ -172,7 +147,7 @@ const handleUpdateToken = async () => {
     router.push({
       path: '/tokens/token',
       query: {
-        'asset-num': token.value!.asset_num
+        'asset-num': token.value!.assetNum
       }
     });
   } catch (error) {
@@ -308,26 +283,26 @@ onMounted(async () => {
               <span
                 :class="[
                   'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
-                  token?.is_nft ? 'bg-purple-50 text-purple-700 border-purple-200' : 'bg-emerald-50 text-emerald-700 border-emerald-200'
+                  token?.isNft ? 'bg-purple-50 text-purple-700 border-purple-200' : 'bg-emerald-50 text-emerald-700 border-emerald-200'
                 ]"
               >
-                {{ token?.is_nft ? 'NFT' : 'Fungible' }}
+                {{ token?.isNft ? 'NFT' : 'Fungible' }}
               </span>
               <span
                 :class="[
                   'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
-                  token?.others_can_stake ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
+                  token?.othersCanStake ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
                 ]"
               >
-                {{ token?.others_can_stake ? 'Staking ✓' : 'Staking ✗' }}
+                {{ token?.othersCanStake ? 'Staking ✓' : 'Staking ✗' }}
               </span>
               <span
                 :class="[
                   'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium border',
-                  token?.others_can_unstake ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
+                  token?.othersCanUnstake ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-gray-50 text-gray-700 border-gray-200'
                 ]"
               >
-                {{ token?.others_can_unstake ? 'Unstaking ✓' : 'Unstaking ✗' }}
+                {{ token?.othersCanUnstake ? 'Unstaking ✓' : 'Unstaking ✗' }}
               </span>
             </div>
           </CardContent>
@@ -486,7 +461,7 @@ onMounted(async () => {
                 </div>
                 <div>
                   <span class="text-muted-foreground">Owner:</span>
-                  <span class="ml-1 font-mono text-xs">{{ token.owner }}</span>
+                  <span class="ml-1 font-mono text-xs">{{ token.ownerPublicKey }}</span>
                 </div>
               </div>
             </div>
diff --git a/src/pages/tokens/invoice.vue b/src/pages/tokens/invoice.vue
index ddb95b4..4d58fbe 100644
--- a/src/pages/tokens/invoice.vue
+++ b/src/pages/tokens/invoice.vue
@@ -8,17 +8,18 @@ import HTMView from '@/components/htm/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
-import { getWax } from '@/stores/wax.store';
+import { useTokensStore, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
-import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
-
 
 // Router
 const route = useRoute();
 const router = useRouter();
 
+// Stores
+const tokensStore = useTokensStore();
+
 // State
-const token = ref<CtokensAppToken | null>(null);
+const token = ref<CTokenDefinitionDisplay | null>(null);
 const isLoading = ref(true);
 
 // Get params from route
@@ -27,7 +28,7 @@ const fromPk = computed(() => route.query.fromPk as string);
 const toName = computed(() => route.query.toName as string | undefined);
 const toPk = computed(() => route.query.toPk as string);
 const amount = computed(() => route.query.amount as string);
-const assetNum = computed(() => route.query['asset-num'] as string);
+const assetNum = computed(() => Number(route.query['asset-num']));
 const memo = computed(() => route.query.memo as string | undefined);
 
 // Invoice metadata
@@ -77,22 +78,8 @@ const goBack = () => {
 // Load token details
 const loadTokenDetails = async () => {
   try {
-    const wax = await getWax();
-
     // Fetch token details by asset number
-    const tokens = await wax.restApi.ctokensApi.tokens({
-      'asset-num': Number(assetNum.value)
-    });
-
-    const remoteToken = tokens.items && tokens.items.length > 0 ? tokens.items[0] : null;
-
-    if (!remoteToken)
-      throw new Error(`Token with asset number ${assetNum.value} not found`);
-
-    token.value = String(remoteToken.liquid?.asset_num) === assetNum.value ? remoteToken.liquid! : String(remoteToken.vesting?.asset_num) === assetNum.value ? remoteToken.vesting! : null;
-
-    if (!token.value)
-      throw new Error(`Token with asset number ${assetNum.value} not found`);
+    token.value = await tokensStore.getTokenByAssetNum(assetNum.value);
   } catch (error) {
     toastError('Failed to load token details', error);
     router.push('/tokens/list');
diff --git a/src/pages/tokens/my-tokens.vue b/src/pages/tokens/my-tokens.vue
index 8b7452f..486117a 100644
--- a/src/pages/tokens/my-tokens.vue
+++ b/src/pages/tokens/my-tokens.vue
@@ -4,7 +4,7 @@ import {
   mdiRefresh,
   mdiPlus
 } from '@mdi/js';
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import HTMTokenCard from '@/components/htm/HTMTokenCard.vue';
@@ -12,17 +12,15 @@ import HTMView from '@/components/htm/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { transformTokenToDisplayFormat, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
-import { getWax } from '@/stores/wax.store';
+import { useTokensStore, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
-import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
-
 
 const router = useRouter();
 
+// Stores
+const tokensStore = useTokensStore();
+
 // State
-const tokensFullList = ref<CTokenDefinitionDisplay[]>([]);
 const isLoading = ref(false);
 const currentPage = ref(0);
 const hasMorePages = ref(true);
@@ -37,26 +35,9 @@ const loadTokens = async (page: number = 1) => {
   try {
     isLoading.value = true;
 
-    const userPublicKey = CTokensProvider.getOperationalPublicKey();
-    if (!userPublicKey) {
-      toastError('Unable to determine your public key', 'Please make sure you are connected to a wallet');
-      return;
-    }
-
-    const wax = await getWax();
-    const tokens = await wax.restApi.ctokensApi.tokens({ owner: userPublicKey });
-
-    if (page === 1)
-      tokensFullList.value = [];
-
-    tokensFullList.value.push(...tokens.items!.flatMap(token => {
-      return [
-        transformTokenToDisplayFormat(wax, token.liquid as Required<CtokensAppToken>),
-        transformTokenToDisplayFormat(wax, token.vesting as Required<CtokensAppToken>)
-      ];
-    }));
+    const createdTokens = await tokensStore.loadCreatedTokens(page);
 
-    hasMorePages.value = tokens.items!.length === 100; // API returns 100 results per page
+    hasMorePages.value = createdTokens.hasMore;
     currentPage.value = page;
   } catch (error) {
     toastError('Failed to load tokens', error);
@@ -70,11 +51,6 @@ const loadMore = () => {
   void loadTokens(currentPage.value + 1);
 };
 
-// Computed
-const filteredTokens = computed(() => {
-  return tokensFullList.value; // No additional filtering needed since we already filter by owner
-});
-
 // Navigate to create token page
 const createNewToken = () => {
   router.push('/tokens/create');
@@ -142,7 +118,7 @@ onMounted(() => {
 
       <!-- Loading Skeletons -->
       <div
-        v-if="isLoading && tokensFullList.length === 0"
+        v-if="isLoading && tokensStore.fungibleTokensCreatedByUser.length === 0"
         class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
       >
         <Card
@@ -172,20 +148,30 @@ onMounted(() => {
 
       <!-- Tokens Grid -->
       <div
-        v-else-if="tokensFullList.length > 0"
-        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+        v-else-if="tokensStore.fungibleTokensCreatedByUser.length > 0"
+        class="grid grid-cols-1 lg:grid-cols-2 gap-6"
       >
-        <HTMTokenCard
-          v-for="token in filteredTokens"
-          :key="token.nai"
-          :token="token"
-          @click="viewTokenDetails"
-        />
+        <div
+          v-for="token in tokensStore.fungibleTokensCreatedByUser"
+          :key="token.liquid.assetNum"
+          class="grid grid-cols-1 md:grid-cols-2 gap-6"
+        >
+          <HTMTokenCard
+            :key="token.liquid.assetNum"
+            :token="token.liquid"
+            @click="viewTokenDetails"
+          />
+          <HTMTokenCard
+            :key="token.vesting.assetNum"
+            :token="token.vesting"
+            @click="viewTokenDetails"
+          />
+        </div>
       </div>
 
       <!-- Load More Button -->
       <div
-        v-if="tokensFullList.length > 0 && hasMorePages"
+        v-if="tokensStore.fungibleTokensCreatedByUser.length > 0 && hasMorePages"
         class="text-center pt-4"
       >
         <Button
@@ -211,7 +197,7 @@ onMounted(() => {
       </div>
 
       <!-- Empty State -->
-      <Card v-else-if="tokensFullList.length === 0 && !isLoading">
+      <Card v-else-if="tokensStore.fungibleTokensCreatedByUser.length === 0 && !isLoading">
         <CardContent class="text-center py-12">
           <svg
             width="64"
diff --git a/src/pages/tokens/pos/receive.vue b/src/pages/tokens/pos/receive.vue
index 09745b5..9d77bab 100644
--- a/src/pages/tokens/pos/receive.vue
+++ b/src/pages/tokens/pos/receive.vue
@@ -9,15 +9,11 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useTokensStore } from '@/stores/tokens.store';
+import { useTokensStore, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
 import { useUserStore } from '@/stores/user.store';
-import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
-import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-
-
 // Router
 const route = useRoute();
 const router = useRouter();
@@ -27,11 +23,11 @@ const tokensStore = useTokensStore();
 const userStore = useUserStore();
 
 // State
-const token = ref<CtokensAppToken | null>(null);
+const token = ref<CTokenDefinitionDisplay | null>(null);
 const isLoading = ref(true);
 
 // Get parameters from route query
-const assetNum = computed(() => route.query['asset-num'] as string);
+const assetNum = computed(() => Number(route.query['asset-num']));
 const precision = computed(() => route.query.precision as string);
 const receiverKey = computed(() => route.query.to as string || CTokensProvider.getOperationalPublicKey());
 const queryAmount = computed(() => route.query.amount as string | undefined);
@@ -69,21 +65,7 @@ const loadTokenDetails = async () => {
   if (!assetNum.value) return;
 
   try {
-    const wax = await getWax();
-
-    // Fetch token details by NAI
-    const params: { 'asset-num': number; precision?: number } = { 'asset-num': Number(assetNum.value) };
-    const tokens = await wax.restApi.ctokensApi.tokens(params);
-
-    const remoteToken = tokens && tokens.items && tokens.items.length > 0 ? tokens.items[0] : null;
-
-    if (!remoteToken)
-      throw new Error(`Token with asset number ${assetNum.value} not found`);
-
-    token.value = String(remoteToken.liquid?.asset_num) === assetNum.value ? remoteToken.liquid! : String(remoteToken.vesting?.asset_num) === assetNum.value ? remoteToken.vesting! : null;
-
-    if (!token.value)
-      throw new Error(`Token with asset number ${assetNum.value} not found`);
+    token.value = await tokensStore.getTokenByAssetNum(assetNum.value);
   } catch (error) {
     toastError('Failed to load token details', error);
     router.push('/tokens/list');
diff --git a/src/pages/tokens/pos/send.vue b/src/pages/tokens/pos/send.vue
index 83e13e9..528aea5 100644
--- a/src/pages/tokens/pos/send.vue
+++ b/src/pages/tokens/pos/send.vue
@@ -10,12 +10,8 @@ import SendTransferCard from '@/components/SendTransferCard.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useTokensStore, type CTokenBalanceDisplay } from '@/stores/tokens.store';
-import { getWax } from '@/stores/wax.store';
+import { useTokensStore, type CTokenBalanceDisplay, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
-import type { CtokensAppToken } from '@/utils/wallet/ctokens/api';
-
-
 
 // Router
 const route = useRoute();
@@ -24,7 +20,7 @@ const router = useRouter();
 const tokensStore = useTokensStore();
 
 // State
-const token = ref<CtokensAppToken | null>(null);
+const token = ref<CTokenDefinitionDisplay | null>(null);
 const isLoading = ref(true);
 
 // Form state
@@ -40,9 +36,9 @@ const selectedTokenAssetNum = ref<string>('');
 
 // Get NAI and precision from route parameters or form or selected token
 const assetNum = computed(() => {
-  if (route.query['asset-num']) return route.query['asset-num'] as string;
-  if (selectedTokenAssetNum.value) return selectedTokenAssetNum.value;
-  return form.value.assetNum;
+  if (route.query['asset-num']) return Number(route.query['asset-num']);
+  if (selectedTokenAssetNum.value) return Number(selectedTokenAssetNum.value);
+  return Number(form.value.assetNum);
 });
 const precision = computed(() => route.query.precision as string || form.value.precision);
 
@@ -88,18 +84,10 @@ const loadTokenDetails = async () => {
   if (!assetNum.value) return;
 
   try {
-    const wax = await getWax();
-
     // Fetch token details by NAI
-    const params: { 'asset-num': number; precision?: number } = { 'asset-num': Number(assetNum.value) };
-    const tokens = await wax.restApi.ctokensApi.tokens(params);
+    const tokens = await tokensStore.getTokenByAssetNum(Number(assetNum.value));
 
-    const remoteToken = tokens && tokens.items && tokens.items.length > 0 ? tokens.items[0] : null;
-
-    if (!remoteToken)
-      throw new Error(`Token with asset number ${assetNum.value} not found`);
-
-    token.value = String(remoteToken.liquid?.asset_num) === assetNum.value ? remoteToken.liquid! : String(remoteToken.vesting?.asset_num) === assetNum.value ? remoteToken.vesting! : null;
+    token.value = tokens;
 
     if (!token.value)
       throw new Error(`Token with asset number ${assetNum.value} not found`);
@@ -253,8 +241,6 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
           :has-nai-from-url="hasNaiFromUrl"
           :should-show-token-selector="shouldShowTokenSelector"
           :token-data="token"
-          :asset-num="assetNum"
-          :precision="precision"
           :selected-token-asset-num="selectedTokenAssetNum"
           @update-selected-token-asset-num="selectedTokenAssetNum = $event"
           @update-amount="form.amount = $event"
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index b51f8f8..9b8568d 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -20,14 +20,12 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore, type CTokenBalanceDisplay, type CTokenDefinitionDisplay, type CTokenUserRanked } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
-import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
 import { isVesting, toLiquid, toVesting } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-
 // Router
 const route = useRoute();
 const router = useRouter();
@@ -49,8 +47,6 @@ const isUnstaking = ref(false);
 const isCopied = ref(false);
 const isNaiCopied = ref(false);
 
-const isStaked = ref(false);
-
 // Transfer form
 const transferForm = ref({
   to: '',
@@ -115,21 +111,10 @@ const amountValidation = computed(() => {
 // Load token details
 const loadTokenDetails = async () => {
   try {
-    const wax = await getWax();
-
     // Fetch token details by NAI
     // First try with just NAI, if that doesn't work, get all tokens and filter
-    const tokens = await wax.restApi.ctokensApi.tokens({ 'asset-num': Number(assetNum.value) });
-
-    const remoteToken = tokens.items && tokens.items.length > 0 ? tokens.items[0] : null;
-
-    if (!remoteToken)
-      throw new Error(`Token with asset num ${assetNum.value} not found`);
-
     token.value = await tokensStore.getTokenByAssetNum(assetNum.value);
 
-    isStaked.value = token.value.isStaked;
-
     // Load user balance if user is logged in
     if (isLoggedIn.value) {
       userBalance.value = await tokensStore.getBalanceSingleToken(
@@ -694,7 +679,7 @@ onMounted(async () => {
                     NFT
                   </span>
                   <span
-                    v-if="isStaked"
+                    v-if="token.isStaked"
                     class="inline-flex items-center rounded-md bg-blue-500/10  text-[16px]/[18px] px-2 font-medium text-blue-500 border border-blue-500/20"
                   >
                     staked
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 184102b..5a14255 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -8,7 +8,6 @@ import { isVesting } from '@/utils/nai-tokens';
 import type { CtokensAppAssetType, CtokensAppBalance, CtokensAppToken } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-
 export interface CTokenDisplayBase {
   isNft: boolean;
   nai: string;
-- 
GitLab


From aeabccfc87241353ae498802f136c059ce112ba5 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Wed, 19 Nov 2025 14:36:57 +0100
Subject: [PATCH 095/102] Pass entire objects to props

---
 src/components/ReceiveTransferCard.vue        |  73 ++-----------
 .../htm/tokens/TokenAmountInput.vue           | 103 +++++++++++++-----
 src/pages/tokens/pos/receive.vue              |   2 +-
 3 files changed, 83 insertions(+), 95 deletions(-)

diff --git a/src/components/ReceiveTransferCard.vue b/src/components/ReceiveTransferCard.vue
index 713b714..598ad44 100644
--- a/src/components/ReceiveTransferCard.vue
+++ b/src/components/ReceiveTransferCard.vue
@@ -20,7 +20,7 @@ interface Props {
   receiverName?: string;
   receiverKey?: string;
   receiverAvatar?: string;
-  tokenData?: CTokenDisplayBase | null;
+  tokenData: CTokenDisplayBase;
   queryAmount?: string;
   queryMemo?: string;
   assetNum: number;
@@ -49,66 +49,12 @@ const sentSummary = ref<{ amount: string; tokenLabel: string; receiver: string;
 // Check if user is logged in
 const isLoggedIn = computed(() => !!tokensStore.wallet);
 
-const amountValidation = computed(() => {
-  if (!form.value.amount)
-    return { isValid: true, error: '' };
-
-  if (!props.tokenData)
-    return { isValid: true, error: '' };
-
-  return validateAmountPrecision(form.value.amount, props.tokenData.precision || 0);
-});
-
-const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
-  try {
-    const cleanAmount = amount.replace(/[,\s]/g, '');
-
-    if (!/^\d*\.?\d*$/.test(cleanAmount))
-      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
-
-    const numAmount = parseFloat(cleanAmount);
-    if (isNaN(numAmount) || numAmount <= 0)
-      return { isValid: false, error: 'Amount must be a positive number' };
-
-    if (!isFinite(numAmount))
-      return { isValid: false, error: 'Amount value is too large' };
-
-    const decimalIndex = cleanAmount.indexOf('.');
-    if (decimalIndex !== -1) {
-      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
-      if (decimalPlaces > precision) {
-        return {
-          isValid: false,
-          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
-        };
-      }
-    }
-
-    const multiplier = Math.pow(10, precision);
-    const baseUnits = numAmount * multiplier;
-
-    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
-    if (baseUnits > MAX_SAFE_BASE_UNITS)
-      return { isValid: false, error: 'Amount is too large and would cause overflow' };
-
-    const roundedBaseUnits = Math.round(baseUnits);
-    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
-      return {
-        isValid: false,
-        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
-      };
-    }
-
-    return { isValid: true, parsedAmount: roundedBaseUnits.toString() };
-  } catch (_error) {
-    return { isValid: false, error: 'Invalid amount format' };
-  }
-};
+const tokenAmountInputValidation = ref<{ isValid: boolean; error?: string }>({ isValid: false });
 
 const isFormValid = computed(() => {
   if (!props.tokenData) return false;
   if (form.value.amount.trim() === '') return true;
-  return amountValidation.value.isValid;
+  return tokenAmountInputValidation.value.isValid;
 });
 
 const parseAssetAmount = (amountStr: string, precision: number): string => {
@@ -136,8 +82,8 @@ const handleSend = async () => {
     return;
   }
 
-  if (!amountValidation.value.isValid) {
-    toastError('Invalid amount', new Error(amountValidation.value.error || 'Invalid amount format'));
+  if (!tokenAmountInputValidation.value.isValid) {
+    toastError('Invalid amount', new Error(tokenAmountInputValidation.value.error || 'Invalid amount format'));
     return;
   }
 
@@ -221,13 +167,8 @@ watch(() => props.queryMemo, (newValue) => {
       <!-- Amount compact -->
       <TokenAmountInput
         v-model="form.amount"
-        :token-name="tokenData?.name"
-        :token-symbol="tokenData?.symbol"
-        :token-image="tokenData?.image"
-        :token-asset-num="assetNum"
-        :precision="tokenData?.precision"
-        :is-valid="amountValidation.isValid"
-        :validation-error="amountValidation.error"
+        v-model:valid="tokenAmountInputValidation"
+        :token="tokenData"
       />
 
       <!-- Memo compact -->
diff --git a/src/components/htm/tokens/TokenAmountInput.vue b/src/components/htm/tokens/TokenAmountInput.vue
index 8d184e7..f41ff31 100644
--- a/src/components/htm/tokens/TokenAmountInput.vue
+++ b/src/components/htm/tokens/TokenAmountInput.vue
@@ -4,21 +4,14 @@ import { computed } from 'vue';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import type { CTokenDisplayBase } from '@/stores/tokens.store';
 
 const props = defineProps<{
+  token: CTokenDisplayBase
   modelValue: string;
-  tokenName?: string;
-  tokenSymbol?: string;
-  tokenImage?: string;
-  tokenAssetNum?: number;
-  precision?: number;
+  valid: { isValid: boolean; error?: string };
   disabled?: boolean;
-  label?: string | null;
-  showMaxButton?: boolean;
-  maxAmount?: string;
   availableBalance?: string;
-  validationError?: string;
-  isValid?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -27,10 +20,10 @@ const emit = defineEmits<{
 }>();
 
 const placeholder = computed(() => {
-  if (props.precision !== undefined)
-    return `${props.precision} precision amount`;
+  if (props.token.precision !== undefined)
+    return `${props.token.precision} precision amount`;
 
-  return `Amount in ${props.tokenSymbol || props.tokenName || 'tokens'}`;
+  return `Amount in ${props.token.symbol || props.token.name || 'tokens'}`;
 });
 
 const handleInput = (event: Event) => {
@@ -38,44 +31,100 @@ const handleInput = (event: Event) => {
   emit('update:modelValue', target.value);
 };
 
+const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
+  try {
+    const cleanAmount = amount.replace(/[,\s]/g, '');
+
+    if (!/^\d*\.?\d*$/.test(cleanAmount))
+      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
+
+    const numAmount = parseFloat(cleanAmount);
+    if (isNaN(numAmount) || numAmount <= 0)
+      return { isValid: false, error: 'Amount must be a positive number' };
+
+    if (!isFinite(numAmount))
+      return { isValid: false, error: 'Amount value is too large' };
+
+    const decimalIndex = cleanAmount.indexOf('.');
+    if (decimalIndex !== -1) {
+      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
+      if (decimalPlaces > precision) {
+        return {
+          isValid: false,
+          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
+        };
+      }
+    }
+
+    const multiplier = Math.pow(10, precision);
+    const baseUnits = numAmount * multiplier;
+
+    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
+    if (baseUnits > MAX_SAFE_BASE_UNITS)
+      return { isValid: false, error: 'Amount is too large and would cause overflow' };
+
+    const roundedBaseUnits = Math.round(baseUnits);
+    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
+      return {
+        isValid: false,
+        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
+      };
+    }
+
+    return { isValid: true, parsedAmount: roundedBaseUnits.toString() };
+  } catch (_error) {
+    return { isValid: false, error: 'Invalid amount format' };
+  }
+};
+
+const validationError = computed(() => {
+  if (!props.modelValue)
+    return { isValid: true, error: '' };
+
+  if (!props.token)
+    return { isValid: true, error: '' };
+
+  return validateAmountPrecision(props.modelValue, props.token.precision || 0);
+});
+
 const handleMax = () => {
   emit('max');
 };
 
-const displaySymbol = computed(() => props.tokenSymbol || props.tokenName?.slice(0, 3).toUpperCase() || '');
+const displaySymbol = computed(() => props.token.symbol || props.token.name?.slice(0, 3).toUpperCase() || '');
 const avatarFallback = computed(() => displaySymbol.value.slice(0, 2).toUpperCase());
 </script>
 
 <template>
   <div class="space-y-2">
     <Label
-      v-if="label !== null"
       for="token-amount"
       class="text-sm font-medium text-foreground"
     >
-      {{ label || 'Amount' }}
+      Amount
     </Label>
     <div class="relative">
       <Input
         id="token-amount"
+        v-model:valid="validationError"
         :model-value="modelValue"
         type="text"
         inputmode="decimal"
         :placeholder="placeholder"
         :disabled="disabled"
         class="pr-24 transition-colors"
-        :class="modelValue ? (isValid ? 'border-green-500 focus-visible:ring-green-500' : 'border-red-500 focus-visible:ring-red-500') : ''"
+        :class="modelValue ? (validationError.error ? 'border-red-500 focus-visible:ring-red-500' : 'border-green-500 focus-visible:ring-green-500') : ''"
         @input="handleInput"
       />
       <!-- Token Symbol & Image on the right -->
       <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
         <Avatar
-          v-if="tokenImage"
+          v-if="token.image"
           class="h-6 w-6"
         >
           <AvatarImage
-            :src="tokenImage"
-            :alt="tokenSymbol || tokenName"
+            :src="token.image"
+            :alt="token.symbol || token.name"
           />
           <AvatarFallback class="text-xs">
             {{ avatarFallback }}
@@ -89,17 +138,15 @@ const avatarFallback = computed(() => displaySymbol.value.slice(0, 2).toUpperCas
 
     <!-- Available balance and MAX button -->
     <div
-      v-if="availableBalance || showMaxButton"
+      v-if="availableBalance"
       class="flex justify-between text-xs"
     >
       <span
-        v-if="availableBalance"
         class="text-muted-foreground"
       >
         Available: {{ availableBalance }}
       </span>
       <button
-        v-if="showMaxButton"
         type="button"
         class="text-primary hover:text-primary/80 font-medium"
         @click="handleMax"
@@ -108,20 +155,20 @@ const avatarFallback = computed(() => displaySymbol.value.slice(0, 2).toUpperCas
       </button>
     </div>
 
-    <!-- NAI info -->
+    <!-- asset num info -->
     <p
-      v-if="tokenAssetNum"
+      v-if="token.assetNum"
       class="text-xs text-muted-foreground font-mono"
     >
-      Asset num: {{ tokenAssetNum }}
+      Asset num: {{ token.assetNum }}
     </p>
 
     <!-- Validation error -->
     <p
-      v-if="modelValue && !isValid && validationError"
+      v-if="modelValue && validationError.error"
       class="text-xs text-red-500"
     >
-      {{ validationError }}
+      {{ validationError.error }}
     </p>
   </div>
 </template>
diff --git a/src/pages/tokens/pos/receive.vue b/src/pages/tokens/pos/receive.vue
index 9d77bab..aeb4fec 100644
--- a/src/pages/tokens/pos/receive.vue
+++ b/src/pages/tokens/pos/receive.vue
@@ -205,7 +205,7 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
           :receiver-name="htmUserMetadata?.displayName || receiverDisplayName"
           :receiver-key="receiverKey"
           :receiver-avatar="htmUserMetadata?.profileImage"
-          :token-data="token"
+          :token-data="token!"
           :query-amount="queryAmount"
           :query-memo="queryMemo"
           :asset-num="assetNum"
-- 
GitLab


From 2519dddd2bca4da1cede15884c257b79fe623fcd Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Wed, 19 Nov 2025 18:00:04 +0100
Subject: [PATCH 096/102] Add common HTM token amount component

---
 eslint.config.mjs                             |   5 +-
 src/components/ReceiveTransferCard.vue        |   6 +-
 src/components/SendTransferCard.vue           |  48 ++---
 src/components/htm/HTMProvidePassword.vue     |   2 +-
 src/components/htm/amount/Input.vue           |  72 ++++++++
 .../htm/amount/TokenAmountInput.vue           | 153 +++++++++++++++
 .../htm/{tokens => amount}/TokenSelector.vue  |  54 +++---
 src/components/htm/amount/index.ts            |   1 +
 .../htm/tokens/TokenAmountInput.vue           | 174 ------------------
 .../htm/tokens/TokenSelectorWithAmount.vue    |  83 ---------
 src/components/ui/input/Input.vue             |   7 +-
 src/pages/tokens/my-balance.vue               |  20 +-
 src/pages/tokens/pos/send.vue                 |   3 +-
 src/pages/tokens/token.vue                    |  34 +---
 14 files changed, 295 insertions(+), 367 deletions(-)
 create mode 100644 src/components/htm/amount/Input.vue
 create mode 100644 src/components/htm/amount/TokenAmountInput.vue
 rename src/components/htm/{tokens => amount}/TokenSelector.vue (77%)
 create mode 100644 src/components/htm/amount/index.ts
 delete mode 100644 src/components/htm/tokens/TokenAmountInput.vue
 delete mode 100644 src/components/htm/tokens/TokenSelectorWithAmount.vue

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 76e1d5f..7f06524 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -80,7 +80,10 @@ export default withNuxt(
   ignores: ['src/components/ui/**', 'src/utils/wallet/ctokens/api/**'],
   rules: {
     // Vue rules
-    'vue/multi-word-component-names': 'off'
+    'vue/multi-word-component-names': 'off',
+    // We use utility functions that assign default props, so sometimes those rules are triggered incorrectly
+    'vue/require-default-prop': 'off',
+    'vue/no-required-prop-with-default': 'off'
   }
 }).override('nuxt/typescript/rules', {
   ignores: ['src/components/ui/**', 'src/utils/wallet/ctokens/api/**'],
diff --git a/src/components/ReceiveTransferCard.vue b/src/components/ReceiveTransferCard.vue
index 598ad44..0bbb276 100644
--- a/src/components/ReceiveTransferCard.vue
+++ b/src/components/ReceiveTransferCard.vue
@@ -5,7 +5,6 @@ import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
-import TokenAmountInput from '@/components/htm/tokens/TokenAmountInput.vue';
 import ReceiverTokenSummary from '@/components/ReceiverTokenSummary.vue';
 import TransferCompletedSummary from '@/components/TransferCompletedSummary.vue';
 import { Button } from '@/components/ui/button';
@@ -15,6 +14,8 @@ import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+import { TokenAmountInput } from '~/src/components/htm/amount';
+
 
 interface Props {
   receiverName?: string;
@@ -166,8 +167,9 @@ watch(() => props.queryMemo, (newValue) => {
 
       <!-- Amount compact -->
       <TokenAmountInput
+        id="token-amount"
         v-model="form.amount"
-        v-model:valid="tokenAmountInputValidation"
+        variant="selector"
         :token="tokenData"
       />
 
diff --git a/src/components/SendTransferCard.vue b/src/components/SendTransferCard.vue
index 36844c1..dae86f8 100644
--- a/src/components/SendTransferCard.vue
+++ b/src/components/SendTransferCard.vue
@@ -2,19 +2,19 @@
 import { computed, ref, watch } from 'vue';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
-import TokenAmountInput from '@/components/htm/tokens/TokenAmountInput.vue';
-import TokenSelectorWithAmount from '@/components/htm/tokens/TokenSelectorWithAmount.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import type { CTokenDisplayBase } from '@/stores/tokens.store';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
+import TokenAmountInput from '~/src/components/htm/amount/Input.vue';
+
 
 interface Props {
   hasNaiFromUrl: boolean;
   shouldShowTokenSelector: boolean;
-  tokenData: CTokenDisplayBase | null;
+  token: CTokenDisplayBase;
   selectedTokenAssetNum?: string;
   initialAmount?: string;
   initialMemo?: string;
@@ -43,32 +43,14 @@ const showDetails = ref(false);
 
 const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
 
-const tokenName = computed(() => {
-  if (!props.tokenData) return 'Unknown Token';
-  const metadata = props.tokenData.metadata as { name?: string } | undefined;
-  return metadata?.name || props.tokenData.nai || 'Unknown Token';
-});
-
-const tokenSymbol = computed(() => {
-  if (!props.tokenData) return '';
-  const metadata = props.tokenData.metadata as { symbol?: string } | undefined;
-  return metadata?.symbol || '';
-});
-
-const tokenImage = computed(() => {
-  if (!props.tokenData) return '';
-  const metadata = props.tokenData.metadata as { image?: string } | undefined;
-  return metadata?.image || '';
-});
-
 const amountValidation = computed(() => {
   if (!form.value.amount)
     return { isValid: true, error: '' };
 
-  if (!props.tokenData)
+  if (!props.token)
     return { isValid: true, error: '' };
 
-  return validateAmountPrecision(form.value.amount, props.tokenData.precision || 0);
+  return validateAmountPrecision(form.value.amount, props.token.precision || 0);
 });
 
 const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
@@ -152,10 +134,10 @@ watch(() => form.value.memo, (newValue) => {
         v-if="shouldShowTokenSelector"
         v-model="form.amount"
         v-model:selected-token-asset-num="selectedTokenAssetNum"
-        :token-symbol="tokenSymbol"
-        :token-name="tokenName"
-        :token-precision="props.tokenData!.precision"
-        :token-image="props.tokenData!.image"
+        :token-symbol="token.symbol"
+        :token-name="token.name!"
+        :token-precision="props.token!.precision"
+        :token-image="props.token!.image"
         :is-valid="amountValidation.isValid"
         :validation-error="amountValidation.error"
       />
@@ -188,7 +170,7 @@ watch(() => form.value.memo, (newValue) => {
           placeholder="Asset number"
           class="transition-colors"
           disabled
-          :value="tokenData!.assetNum"
+          :value="token!.assetNum"
         />
         <Input
           id="precision"
@@ -198,7 +180,7 @@ watch(() => form.value.memo, (newValue) => {
           max="18"
           class="transition-colors"
           disabled
-          :value="tokenData!.assetNum"
+          :value="token!.assetNum"
         />
       </div>
 
@@ -206,13 +188,7 @@ watch(() => form.value.memo, (newValue) => {
       <TokenAmountInput
         v-if="!shouldShowTokenSelector"
         v-model="form.amount"
-        :token-name="tokenName"
-        :token-symbol="tokenSymbol"
-        :token-image="tokenImage"
-        :token-asset-num="tokenData!.assetNum"
-        :precision="tokenData!.precision"
-        :is-valid="amountValidation.isValid"
-        :validation-error="amountValidation.error"
+        :token="token"
       />
 
       <!-- Memo compact -->
diff --git a/src/components/htm/HTMProvidePassword.vue b/src/components/htm/HTMProvidePassword.vue
index 93a4026..2587f2e 100644
--- a/src/components/htm/HTMProvidePassword.vue
+++ b/src/components/htm/HTMProvidePassword.vue
@@ -2,12 +2,12 @@
 import { mdiClose } from '@mdi/js';
 
 import HTMProvidePasswordContent from '@/components/htm/HTMProvidePasswordContent.vue';
+import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { UsedWallet, getWalletIcon } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 
-
 const walletStore = useWalletStore();
 const tokensStore = useTokensStore();
 
diff --git a/src/components/htm/amount/Input.vue b/src/components/htm/amount/Input.vue
new file mode 100644
index 0000000..eaa0498
--- /dev/null
+++ b/src/components/htm/amount/Input.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { Input as ShadInput } from '@/components/ui/input';
+import type { CTokenDisplayBase } from '@/stores/tokens.store';
+
+// Props:
+const props = defineProps<{
+  token?: CTokenDisplayBase
+  disabled?: boolean;
+  class?: string;
+  id?: string;
+}>();
+
+// Models:
+
+/* This model is for the parsed amount in NAI-compatible form. */
+const model = defineModel<string>();
+
+/* This model is for the validation error message, if any */
+const validationErrorModel = defineModel<string | undefined>('validationError');
+
+// Methods:
+const validateAmountPrecision = (amount: string, precision: number): void => {
+  try {
+    if (amount === '') {
+      validationErrorModel.value = undefined;
+      return;
+    }
+
+    const cleanAmount = amount.replace(/[,\s]/g, '');
+    const [integerPart, decimalPart, anyMore] = cleanAmount.split('.');
+    if (anyMore !== undefined) {
+      validationErrorModel.value = 'Invalid amount format';
+      return;
+    }
+
+    const decimal = BigInt(decimalPart || 0);
+    const integer = BigInt(integerPart || 0);
+
+    if (integer <= 0n) {
+      validationErrorModel.value = 'Amount must be a positive number';
+      return;
+    }
+
+    if (decimal !== 0n && (decimalPart?.length || 0) > precision) {
+      validationErrorModel.value = `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`;
+      return;
+    }
+
+    validationErrorModel.value = undefined;
+  } catch {
+    validationErrorModel.value = 'Invalid amount format';
+  }
+};
+
+watch(model, () => {
+  if (props.token)
+    validateAmountPrecision(model.value || '', props.token.precision);
+});
+</script>
+
+<template>
+  <ShadInput
+    :id="props.id"
+    v-model="model"
+    no-border
+    :class="props.class"
+    type="text"
+    inputmode="decimal"
+    :placeholder="props.token ? `${props.token.precision} precision amount` : 'Select a token first'"
+    :disabled="!props.token || disabled"
+  />
+</template>
diff --git a/src/components/htm/amount/TokenAmountInput.vue b/src/components/htm/amount/TokenAmountInput.vue
new file mode 100644
index 0000000..c12b8e5
--- /dev/null
+++ b/src/components/htm/amount/TokenAmountInput.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Label } from '@/components/ui/label';
+import type { CTokenDisplayBase } from '@/stores/tokens.store';
+
+import Input from './Input.vue';
+import TokenSelector from './TokenSelector.vue';
+
+type CommonProps = {
+  disabled?: boolean;
+  id?: string;
+}
+
+type Props = (CommonProps & {
+  variant?: 'selector';
+  token?: CTokenDisplayBase;
+}) | (CommonProps & {
+  variant: 'explicit';
+  token: CTokenDisplayBase;
+  availableBalance?: string;
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'selector',
+  disabled: false
+});
+
+const model = defineModel<string>(); /* This model is for the parsed amount in NAI-compatible form. '' (empty) is for invalid state */
+const selectedToken = defineModel<CTokenDisplayBase | undefined>('token'); /* This model is for the selected token when variant is "selector" */
+
+const internalModel = ref<string>(''); /* This is the internal input model for the amount field */
+const validationError = ref<string | undefined>(undefined); /* This is the validation error message, if any */
+
+const selectedAvailableBalance = ref<string>('');
+
+// Rewrite display symbol
+watch(internalModel, () => {
+  if (!selectedToken.value) return;
+
+  const [integerPart, decimalPart] = internalModel.value.replace(/[,\s]/g, '').split('.');
+
+  model.value = integerPart + ((decimalPart ?? '').padEnd(selectedToken.value.precision, '0'));
+});
+watch(validationError, () => {
+  // Clear model if there's a validation error
+  if (validationError.value)
+    model.value = '';
+});
+watch(selectedToken, newValue => {
+  if (newValue && 'displayBalance' in newValue) // only for CTokenBalanceDisplay - selector variant
+    selectedAvailableBalance.value = newValue.displayBalance as string;
+});
+
+const handleMax = () => {
+  if (selectedAvailableBalance.value) {
+    let data = selectedAvailableBalance.value.replace(/[A-Z a-z]/g, ''); // Remove any non-numeric characters (like token symbol)
+    const [decimal, factorial] = data.split('.');
+    // If factorial is all zeros, remove it so users can input factorial by themselves
+    if (decimal && BigInt(factorial || 0) === 0n)
+      data = decimal;
+
+    model.value = data;
+    internalModel.value = data;
+  }
+};
+
+onMounted(() => {
+  if (props.token)
+    selectedToken.value = props.token;
+  if (props.variant === 'explicit' && props.availableBalance)
+    selectedAvailableBalance.value = props.availableBalance;
+});
+</script>
+
+<template>
+  <div class="space-y-2">
+    <Label
+      :for="id"
+      class="text-sm font-medium text-foreground"
+    >
+      Amount
+    </Label>
+    <div :class="['relative flex rounded-md border items-center w-full transition-colors', internalModel ? (validationError ? 'border-red-500 focus-visible:ring-red-500' : 'border-green-500 focus-visible:ring-green-500') : '']">
+      <div :class="variant === 'selector' ? 'flex-1' : 'w-full'">
+        <Input
+          :id="id"
+          v-model="internalModel"
+          v-model:validation-error="validationError"
+          :disabled="disabled"
+          :token="selectedToken"
+          :class="variant === 'selector' ? '' : 'pr-24'"
+        />
+      </div>
+      <TokenSelector
+        v-if="variant === 'selector'"
+        v-model="selectedToken"
+        :disabled="disabled"
+        placeholder="Choose token"
+        class="shrink-1"
+      />
+      <!-- Token Symbol & Image on the right -->
+      <div v-if="variant === 'explicit' && selectedToken" class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
+        <Avatar
+          v-if="selectedToken.image"
+          class="h-6 w-6"
+        >
+          <AvatarImage
+            :src="selectedToken.image"
+            :alt="selectedToken.symbol || selectedToken.name"
+          />
+          <AvatarFallback class="text-xs">
+            {{ selectedToken.symbol?.slice(0, 2) || '-' }}
+          </AvatarFallback>
+        </Avatar>
+        <span class="text-sm font-medium">
+          {{ selectedToken.symbol }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Available balance and MAX button -->
+    <div
+      v-if="selectedAvailableBalance"
+      class="flex justify-between text-xs"
+    >
+      <span
+        class="text-muted-foreground"
+      >
+        Available: {{ selectedAvailableBalance }}
+      </span>
+      <button
+        type="button"
+        class="text-primary hover:text-primary/80 font-medium"
+        @click="handleMax"
+      >
+        MAX
+      </button>
+    </div>
+
+    <!-- asset num info -->
+    <p v-if="selectedToken" class="text-xs text-muted-foreground font-mono">
+      Asset num: {{ selectedToken.assetNum }}
+    </p>
+
+    <!-- Validation error -->
+    <p
+      v-if="validationError"
+      class="text-xs text-red-500"
+    >
+      {{ validationError }}
+    </p>
+  </div>
+</template>
diff --git a/src/components/htm/tokens/TokenSelector.vue b/src/components/htm/amount/TokenSelector.vue
similarity index 77%
rename from src/components/htm/tokens/TokenSelector.vue
rename to src/components/htm/amount/TokenSelector.vue
index 1f0d3fc..3ec1548 100644
--- a/src/components/htm/tokens/TokenSelector.vue
+++ b/src/components/htm/amount/TokenSelector.vue
@@ -5,7 +5,7 @@ import { computed, onMounted, ref, watch } from 'vue';
 
 import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/components/ui/combobox';
-import { useTokensStore, type CTokenBalanceDisplay } from '@/stores/tokens.store';
+import { useTokensStore, type CTokenBalanceDisplay, type CTokenDisplayBase } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 
 interface TokenOption {
@@ -15,31 +15,36 @@ interface TokenOption {
 }
 
 interface Props {
-  modelValue?: string; // Selected token asset number
+  modelValue?: CTokenDisplayBase | undefined; // Selected token asset number
   placeholder?: string;
+  disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
+  modelValue: undefined,
   placeholder: 'Select a token...'
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: CTokenBalanceDisplay | undefined): void;
+}>();
 
 const tokensStore = useTokensStore();
 
 // Reactive state
 const searchQuery = ref('');
-const selectedValue = ref<string | null>(props.modelValue || null);
+const selectedValue = ref<string | null>(props.modelValue?.assetNum ? String(props.modelValue.assetNum) : null);
 
 // Watch selectedValue and emit changes
 watch(selectedValue, (newValue) => {
-  emit('update:modelValue', newValue);
+  const selectedToken = tokensStore.fungibleBalances.find(token => String(token.liquid.assetNum) === newValue);
+
+  emit('update:modelValue', selectedToken?.liquid);
 });
 
 // Watch props.modelValue and update selectedValue
 watch(() => props.modelValue, (newValue) => {
-  selectedValue.value = newValue || null;
+  selectedValue.value = newValue?.assetNum ? String(newValue.assetNum) : null;
 });
 
 // Get user's token balances with positive amounts
@@ -48,7 +53,7 @@ const ownedTokens = computed((): TokenOption[] => {
     .filter(balance => balance.liquid.balance > 0n)
     .map(balance => ({
       balance: balance.liquid,
-      displayName: balance.liquid.name || balance.liquid.symbol!,
+      displayName: balance.liquid.symbol!,
       displayBalance: balance.liquid.displayBalance
     } satisfies TokenOption))
     .sort((a, b) => b.balance.balance - a.balance.balance > 0n ? 1 : -1);
@@ -85,26 +90,25 @@ const fetchBalances = async () => {
 onMounted(() => {
   if (tokensStore.fungibleBalances.length === 0)
     void fetchBalances();
-
 });
 </script>
 
 <template>
-  <Combobox v-model="selectedValue">
+  <Combobox v-model="selectedValue" :disabled="disabled">
     <ComboboxAnchor class="relative w-full">
-      <ComboboxTrigger class="flex h-9 w-full items-center justify-between rounded-r-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
+      <ComboboxTrigger class="flex h-9 w-full items-center justify-between rounded-r-md bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
         <div class="flex items-center justify-between flex-1 min-w-0">
           <div
             v-if="selectedToken"
             class="flex items-center gap-2 truncate flex-1 min-w-0"
           >
-            <Avatar v-if="selectedToken.balance.image" class="h-6 w-6">
+            <Avatar v-if="selectedToken.balance.image" class="h-6 w-6 mr-1">
               <AvatarImage
                 :src="selectedToken.balance.image"
                 :alt="selectedToken.displayName"
               />
             </Avatar>
-            <span class="font-semibold text-foreground truncate">{{ selectedToken.displayName }}</span>
+            <span class="text-sm font-medium">{{ selectedToken.displayName }}</span>
           </div>
           <span
             v-else
@@ -112,18 +116,18 @@ onMounted(() => {
           >
             {{ placeholder }}
           </span>
-            <svg
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="flex-shrink-0 text-muted-foreground"
-            >
-            <path
-              style="fill: currentColor"
-              :d="mdiArrowDown"
-            />
-          </svg>
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0 text-muted-foreground ml-2"
+          >
+          <path
+            style="fill: currentColor"
+            :d="mdiArrowDown"
+          />
+        </svg>
         </div>
       </ComboboxTrigger>
       <ComboboxList class="mt-1 bg-popover border border-border rounded-lg shadow-lg p-0 max-h-64 overflow-hidden">
diff --git a/src/components/htm/amount/index.ts b/src/components/htm/amount/index.ts
new file mode 100644
index 0000000..bf297fc
--- /dev/null
+++ b/src/components/htm/amount/index.ts
@@ -0,0 +1 @@
+export { default as TokenAmountInput } from './TokenAmountInput.vue';
diff --git a/src/components/htm/tokens/TokenAmountInput.vue b/src/components/htm/tokens/TokenAmountInput.vue
deleted file mode 100644
index f41ff31..0000000
--- a/src/components/htm/tokens/TokenAmountInput.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import type { CTokenDisplayBase } from '@/stores/tokens.store';
-
-const props = defineProps<{
-  token: CTokenDisplayBase
-  modelValue: string;
-  valid: { isValid: boolean; error?: string };
-  disabled?: boolean;
-  availableBalance?: string;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void;
-  (e: 'max'): void;
-}>();
-
-const placeholder = computed(() => {
-  if (props.token.precision !== undefined)
-    return `${props.token.precision} precision amount`;
-
-  return `Amount in ${props.token.symbol || props.token.name || 'tokens'}`;
-});
-
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  emit('update:modelValue', target.value);
-};
-
-const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
-  try {
-    const cleanAmount = amount.replace(/[,\s]/g, '');
-
-    if (!/^\d*\.?\d*$/.test(cleanAmount))
-      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
-
-    const numAmount = parseFloat(cleanAmount);
-    if (isNaN(numAmount) || numAmount <= 0)
-      return { isValid: false, error: 'Amount must be a positive number' };
-
-    if (!isFinite(numAmount))
-      return { isValid: false, error: 'Amount value is too large' };
-
-    const decimalIndex = cleanAmount.indexOf('.');
-    if (decimalIndex !== -1) {
-      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
-      if (decimalPlaces > precision) {
-        return {
-          isValid: false,
-          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
-        };
-      }
-    }
-
-    const multiplier = Math.pow(10, precision);
-    const baseUnits = numAmount * multiplier;
-
-    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
-    if (baseUnits > MAX_SAFE_BASE_UNITS)
-      return { isValid: false, error: 'Amount is too large and would cause overflow' };
-
-    const roundedBaseUnits = Math.round(baseUnits);
-    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
-      return {
-        isValid: false,
-        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
-      };
-    }
-
-    return { isValid: true, parsedAmount: roundedBaseUnits.toString() };
-  } catch (_error) {
-    return { isValid: false, error: 'Invalid amount format' };
-  }
-};
-
-const validationError = computed(() => {
-  if (!props.modelValue)
-    return { isValid: true, error: '' };
-
-  if (!props.token)
-    return { isValid: true, error: '' };
-
-  return validateAmountPrecision(props.modelValue, props.token.precision || 0);
-});
-
-const handleMax = () => {
-  emit('max');
-};
-
-const displaySymbol = computed(() => props.token.symbol || props.token.name?.slice(0, 3).toUpperCase() || '');
-const avatarFallback = computed(() => displaySymbol.value.slice(0, 2).toUpperCase());
-</script>
-
-<template>
-  <div class="space-y-2">
-    <Label
-      for="token-amount"
-      class="text-sm font-medium text-foreground"
-    >
-      Amount
-    </Label>
-    <div class="relative">
-      <Input
-        id="token-amount"
-        v-model:valid="validationError"
-        :model-value="modelValue"
-        type="text"
-        inputmode="decimal"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        class="pr-24 transition-colors"
-        :class="modelValue ? (validationError.error ? 'border-red-500 focus-visible:ring-red-500' : 'border-green-500 focus-visible:ring-green-500') : ''"
-        @input="handleInput"
-      />
-      <!-- Token Symbol & Image on the right -->
-      <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
-        <Avatar
-          v-if="token.image"
-          class="h-6 w-6"
-        >
-          <AvatarImage
-            :src="token.image"
-            :alt="token.symbol || token.name"
-          />
-          <AvatarFallback class="text-xs">
-            {{ avatarFallback }}
-          </AvatarFallback>
-        </Avatar>
-        <span class="text-sm text-muted-foreground font-medium">
-          {{ displaySymbol }}
-        </span>
-      </div>
-    </div>
-
-    <!-- Available balance and MAX button -->
-    <div
-      v-if="availableBalance"
-      class="flex justify-between text-xs"
-    >
-      <span
-        class="text-muted-foreground"
-      >
-        Available: {{ availableBalance }}
-      </span>
-      <button
-        type="button"
-        class="text-primary hover:text-primary/80 font-medium"
-        @click="handleMax"
-      >
-        MAX
-      </button>
-    </div>
-
-    <!-- asset num info -->
-    <p
-      v-if="token.assetNum"
-      class="text-xs text-muted-foreground font-mono"
-    >
-      Asset num: {{ token.assetNum }}
-    </p>
-
-    <!-- Validation error -->
-    <p
-      v-if="modelValue && validationError.error"
-      class="text-xs text-red-500"
-    >
-      {{ validationError.error }}
-    </p>
-  </div>
-</template>
diff --git a/src/components/htm/tokens/TokenSelectorWithAmount.vue b/src/components/htm/tokens/TokenSelectorWithAmount.vue
deleted file mode 100644
index 2e17b8b..0000000
--- a/src/components/htm/tokens/TokenSelectorWithAmount.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import TokenSelector from '@/components/htm/tokens/TokenSelector.vue';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-
-interface Props {
-  modelValue: string;
-  selectedTokenAssetNum: string;
-  tokenSymbol?: string;
-  tokenName: string;
-  tokenPrecision?: number;
-  tokenImage?: string;
-  isValid: boolean;
-  validationError?: string;
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits(['update:modelValue', 'update:selectedTokenAssetNum']);
-
-const amount = computed({
-  get: () => props.modelValue,
-  set: (value: string) => emit('update:modelValue', value)
-});
-
-const selectedToken = computed({
-  get: () => props.selectedTokenAssetNum,
-  set: (value: string | null) => emit('update:selectedTokenAssetNum', value || '')
-});
-
-const placeholder = computed(() => {
-  return selectedToken.value ? `${props.tokenPrecision} precision amount` : 'No token selected';
-});
-</script>
-
-<template>
-  <div class="mt-1">
-    <Label
-      for="amount"
-      class="text-sm font-medium text-foreground"
-    >
-      Amount
-    </Label>
-    <div class="flex items-center w-full">
-      <div class="w-[75%]">
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger as-child>
-              <Input
-                id="amount"
-                v-model="amount"
-                :disabled="!selectedTokenAssetNum"
-                type="text"
-                inputmode="decimal"
-                :placeholder="placeholder"
-                class="pr-12 rounded-r-none border-r-0"
-              />
-            </TooltipTrigger>
-            <TooltipContent v-if="!selectedTokenAssetNum">
-              <p>Select token to send first.</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-        <p
-          v-if="modelValue && !isValid && validationError"
-          class="text-xs text-red-500 mt-1"
-        >
-          {{ validationError }}
-        </p>
-      </div>
-      <TokenSelector
-        id="token-selector"
-        v-model="selectedToken"
-        placeholder="Choose token"
-        class="w-[25%]"
-        :class="{ 'mb-5': modelValue && !isValid && validationError }"
-      />
-    </div>
-  </div>
-</template>
diff --git a/src/components/ui/input/Input.vue b/src/components/ui/input/Input.vue
index 1165ea5..0777143 100644
--- a/src/components/ui/input/Input.vue
+++ b/src/components/ui/input/Input.vue
@@ -7,7 +7,10 @@ const props = defineProps<{
   defaultValue?: string | number
   modelValue?: string | number
   class?: HTMLAttributes['class']
-}>()
+  noBorder?: boolean
+}>();
+
+const noBorder = props.noBorder ?? false;
 
 const emits = defineEmits<{
   (e: 'update:modelValue', payload: string | number): void
@@ -20,5 +23,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <input v-model="modelValue" :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+  <input v-model="modelValue" :class="cn('flex h-9 w-full bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', noBorder ? 'outline-none' : 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring border border-input rounded-md', props.class)">
 </template>
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 90c8c2a..574cb4f 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -15,8 +15,8 @@ import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
+import { TokenAmountInput } from '@/components/htm/amount';
 import HTMView from '@/components/htm/HTMView.vue';
-import TokenAmountInput from '@/components/htm/tokens/TokenAmountInput.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -780,15 +780,11 @@ onMounted(async () => {
             </div>
 
             <TokenAmountInput
+              v-if="selectedTokenForTransfer"
               v-model="transferAmount"
-              :token-name="selectedTokenForTransfer!.name"
-              :token-symbol="selectedTokenForTransfer!.symbol"
-              :token-image="selectedTokenForTransfer!.image"
-              :token-nai="selectedTokenForTransfer?.nai"
-              :precision="selectedTokenForTransfer?.precision"
+              :token="selectedTokenForTransfer"
               :disabled="isTransferLoading"
               :available-balance="selectedTokenForTransfer!.displayBalance"
-              :show-max-button="selectedTokenForTransfer!.balance > 0n"
               @max="setMaxTransferAmount"
             />
 
@@ -876,15 +872,11 @@ onMounted(async () => {
 
           <div class="grid gap-4 py-4">
             <TokenAmountInput
+              v-if="selectedToken"
               v-model="transformAmount"
-              :token-name="selectedToken?.name"
-              :token-symbol="selectedToken?.symbol"
-              :token-image="selectedToken?.image"
-              :token-nai="selectedToken?.nai"
-              :precision="selectedToken?.precision"
+              :token="selectedToken"
               :disabled="isTransformLoading"
-              :available-balance="selectedToken!.displayBalance"
-              :show-max-button="selectedToken!.balance > 0n"
+              :available-balance="selectedToken.displayBalance"
               @max="setMaxTransformAmount"
             />
           </div>
diff --git a/src/pages/tokens/pos/send.vue b/src/pages/tokens/pos/send.vue
index 528aea5..410da1d 100644
--- a/src/pages/tokens/pos/send.vue
+++ b/src/pages/tokens/pos/send.vue
@@ -238,9 +238,10 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
 
         <!-- Send Transfer Card -->
         <SendTransferCard
+          v-if="token"
           :has-nai-from-url="hasNaiFromUrl"
           :should-show-token-selector="shouldShowTokenSelector"
-          :token-data="token"
+          :token="token"
           :selected-token-asset-num="selectedTokenAssetNum"
           @update-selected-token-asset-num="selectedTokenAssetNum = $event"
           @update-amount="form.amount = $event"
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 9b8568d..67813dc 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -6,8 +6,8 @@ import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
+import { TokenAmountInput } from '@/components/htm/amount';
 import HTMView from '@/components/htm/HTMView.vue';
-import TokenAmountInput from '@/components/htm/tokens/TokenAmountInput.vue';
 import { AlertDescription, Alert } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -143,18 +143,6 @@ const loadTopHolders = async () => {
   }
 };
 
-// Set max amount - use raw amount without precision formatting
-const setMaxAmount = async () => {
-  if (!userBalance.value || !token.value) return;
-
-  try {
-    // Use the raw amount directly from the balance
-    transferForm.value.amount = userBalance.value.balance.toString();
-  } catch (error) {
-    toastError('Failed to set max amount:', error);
-  }
-};
-
 // Validate amount precision and overflow
 const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
   try {
@@ -845,7 +833,7 @@ onMounted(async () => {
         <!-- Actions Section -->
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
           <!-- Transfer Section -->
-          <Card class="flex flex-col h-full">
+          <Card v-if="!token.isStaked" class="flex flex-col h-full">
             <CardHeader>
               <CardTitle class="flex items-center gap-2">
                 <svg
@@ -959,17 +947,10 @@ onMounted(async () => {
 
                 <TokenAmountInput
                   v-model="transferForm.amount"
-                  :token-name="token.name"
-                  :token-symbol="token.symbol"
-                  :token-image="token.image"
-                  :token-nai="token.nai"
-                  :precision="token.precision"
+                  :token="token"
                   :disabled="isTransferring"
                   :available-balance="userBalance?.displayBalance || '0'"
-                  :show-max-button="userBalance && userBalance.balance > 0n"
-                  :is-valid="amountValidation.isValid"
-                  :validation-error="amountValidation.error"
-                  @max="setMaxAmount"
+                  variant="explicit"
                 />
 
                 <CollapsibleMemoInput
@@ -1109,12 +1090,9 @@ onMounted(async () => {
               >
                 <TokenAmountInput
                   v-model="stakeForm.amount"
-                  :token-name="token.name"
-                  :token-symbol="token.symbol"
-                  :token-image="token.image"
-                  :token-nai="token.nai"
-                  :precision="token.precision"
+                  :token="token"
                   :disabled="isStaking || isUnstaking"
+                  variant="explicit"
                 />
 
                 <div class="space-y-2">
-- 
GitLab


From 93a951e500163727f6c72ba3ffc86ae1343f49cf Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Thu, 20 Nov 2025 10:29:15 +0100
Subject: [PATCH 097/102] Simplify send transfer card component

---
 src/components/SendTransferCard.vue | 137 +++-------------------------
 src/pages/tokens/pos/send.vue       |  72 ++++-----------
 2 files changed, 28 insertions(+), 181 deletions(-)

diff --git a/src/components/SendTransferCard.vue b/src/components/SendTransferCard.vue
index dae86f8..38e60c7 100644
--- a/src/components/SendTransferCard.vue
+++ b/src/components/SendTransferCard.vue
@@ -2,20 +2,16 @@
 import { computed, ref, watch } from 'vue';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
-import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
 import type { CTokenDisplayBase } from '@/stores/tokens.store';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import TokenAmountInput from '~/src/components/htm/amount/Input.vue';
-
+import { TokenAmountInput } from '~/src/components/htm/amount';
 
 interface Props {
   hasNaiFromUrl: boolean;
   shouldShowTokenSelector: boolean;
-  token: CTokenDisplayBase;
-  selectedTokenAssetNum?: string;
+  token?: CTokenDisplayBase;
   initialAmount?: string;
   initialMemo?: string;
 }
@@ -23,7 +19,7 @@ interface Props {
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-  updateSelectedTokenAssetNum: [value: string];
+  updateToken: [value: CTokenDisplayBase | undefined];
   updateAmount: [value: string];
   updateMemo: [value: string];
 }>();
@@ -34,71 +30,15 @@ const form = ref({
   memo: props.initialMemo || ''
 });
 
-const selectedTokenAssetNum = computed({
-  get: () => props.selectedTokenAssetNum || '',
-  set: (value: string) => emit('updateSelectedTokenAssetNum', value)
+const selectedToken = computed<CTokenDisplayBase | undefined>({
+  get: () => props.token,
+  set: (value) => {
+    emit('updateToken', value);
+  }
 });
 
-const showDetails = ref(false);
-
 const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
 
-const amountValidation = computed(() => {
-  if (!form.value.amount)
-    return { isValid: true, error: '' };
-
-  if (!props.token)
-    return { isValid: true, error: '' };
-
-  return validateAmountPrecision(form.value.amount, props.token.precision || 0);
-});
-
-const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
-  try {
-    const cleanAmount = amount.replace(/[,\s]/g, '');
-
-    if (!/^\d*\.?\d*$/.test(cleanAmount))
-      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
-
-    const numAmount = parseFloat(cleanAmount);
-    if (isNaN(numAmount) || numAmount <= 0)
-      return { isValid: false, error: 'Amount must be a positive number' };
-
-    if (!isFinite(numAmount))
-      return { isValid: false, error: 'Amount value is too large' };
-
-    const decimalIndex = cleanAmount.indexOf('.');
-    if (decimalIndex !== -1) {
-      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
-      if (decimalPlaces > precision) {
-        return {
-          isValid: false,
-          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
-        };
-      }
-    }
-
-    const multiplier = Math.pow(10, precision);
-    const baseUnits = numAmount * multiplier;
-
-    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
-    if (baseUnits > MAX_SAFE_BASE_UNITS)
-      return { isValid: false, error: 'Amount is too large and would cause overflow' };
-
-    const roundedBaseUnits = Math.round(baseUnits);
-    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
-      return {
-        isValid: false,
-        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
-      };
-    }
-
-    return { isValid: true, parsedAmount: roundedBaseUnits.toString() };
-  } catch (_error) {
-    return { isValid: false, error: 'Invalid amount format' };
-  }
-};
-
 // Watch form changes to emit updates
 watch(() => form.value.amount, (newValue) => {
   emit('updateAmount', newValue);
@@ -129,66 +69,11 @@ watch(() => form.value.memo, (newValue) => {
         </div>
       </div>
 
-      <!-- Token selector (compact) -->
-      <TokenSelectorWithAmount
-        v-if="shouldShowTokenSelector"
-        v-model="form.amount"
-        v-model:selected-token-asset-num="selectedTokenAssetNum"
-        :token-symbol="token.symbol"
-        :token-name="token.name!"
-        :token-precision="props.token!.precision"
-        :token-image="props.token!.image"
-        :is-valid="amountValidation.isValid"
-        :validation-error="amountValidation.error"
-      />
-
-      <!-- Small details toggle for NAI/precision when needed -->
-      <div
-        v-if="!hasNaiFromUrl && !shouldShowTokenSelector"
-        class="flex items-center justify-between"
-      >
-        <div class="text-xs text-muted-foreground">
-          Asset num / precision
-        </div>
-        <Button
-          size="sm"
-          variant="ghost"
-          class="px-2 py-1"
-          @click="showDetails = !showDetails"
-        >
-          {{ showDetails ? 'Hide' : 'Show' }}
-        </Button>
-      </div>
-
-      <div
-        v-if="showDetails && !hasNaiFromUrl && !shouldShowTokenSelector"
-        class="grid grid-cols-2 gap-2"
-      >
-        <Input
-          id="asset-num"
-          type="text"
-          placeholder="Asset number"
-          class="transition-colors"
-          disabled
-          :value="token!.assetNum"
-        />
-        <Input
-          id="precision"
-          type="number"
-          placeholder="Precision"
-          min="0"
-          max="18"
-          class="transition-colors"
-          disabled
-          :value="token!.assetNum"
-        />
-      </div>
-
-      <!-- Amount compact -->
+      <!-- Amount with token selector or explicit token -->
       <TokenAmountInput
-        v-if="!shouldShowTokenSelector"
         v-model="form.amount"
-        :token="token"
+        v-model:token="selectedToken"
+        :variant="shouldShowTokenSelector ? 'selector' : 'explicit'"
       />
 
       <!-- Memo compact -->
diff --git a/src/pages/tokens/pos/send.vue b/src/pages/tokens/pos/send.vue
index 410da1d..26b12a7 100644
--- a/src/pages/tokens/pos/send.vue
+++ b/src/pages/tokens/pos/send.vue
@@ -10,7 +10,7 @@ import SendTransferCard from '@/components/SendTransferCard.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useTokensStore, type CTokenBalanceDisplay, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
+import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 
 // Router
@@ -20,27 +20,20 @@ const router = useRouter();
 const tokensStore = useTokensStore();
 
 // State
-const token = ref<CTokenDefinitionDisplay | null>(null);
+const token = ref<CTokenDisplayBase | null>(null);
 const isLoading = ref(true);
 
 // Form state
 const form = ref({
-  assetNum: '',
-  precision: '',
   amount: '',
   memo: ''
 });
 
-// Selected token NAI from TokenSelector (used when no asset-num is provided)
-const selectedTokenAssetNum = ref<string>('');
-
-// Get NAI and precision from route parameters or form or selected token
+// Get NAI from route parameters or selected token
 const assetNum = computed(() => {
   if (route.query['asset-num']) return Number(route.query['asset-num']);
-  if (selectedTokenAssetNum.value) return Number(selectedTokenAssetNum.value);
-  return Number(form.value.assetNum);
+  return token.value?.assetNum || null;
 });
-const precision = computed(() => route.query.precision as string || form.value.precision);
 
 // Check if NAI is provided in URL
 const hasNaiFromUrl = computed(() => !!route.query['asset-num']);
@@ -53,31 +46,10 @@ const shouldShowTokenSelector = computed(() => {
 // Check if user is logged in
 const isLoggedIn = computed(() => !!tokensStore.wallet);
 
-// Watch selected token NAI changes to load token details
-watch(selectedTokenAssetNum, async (newAssetNum, oldAssetNum) => {
-  if (newAssetNum && newAssetNum !== oldAssetNum && shouldShowTokenSelector.value) {
-    isLoading.value = true;
-    // Get precision from the selected token's balance
-    let balance: CTokenBalanceDisplay | undefined;
-    for(const storeBalance of tokensStore.fungibleBalances) {
-      if (storeBalance.liquid.assetNum === Number(newAssetNum)) {
-        balance = storeBalance.liquid;
-        break;
-      } else if (storeBalance.vesting.assetNum === Number(newAssetNum)) {
-        balance = storeBalance.vesting;
-        break;
-      }
-    }
-    if (balance) {
-      form.value.precision = balance.precision?.toString() || '';
-      form.value.assetNum = balance.assetNum!.toString();
-      await loadTokenDetails();
-    } else
-      token.value = null;
-
-    isLoading.value = false;
-  }
-});
+// Handle token update from SendTransferCard
+const handleTokenUpdate = (newToken: CTokenDisplayBase | undefined) => {
+  token.value = newToken || null;
+};
 
 // Load token details
 const loadTokenDetails = async () => {
@@ -91,10 +63,6 @@ const loadTokenDetails = async () => {
 
     if (!token.value)
       throw new Error(`Token with asset number ${assetNum.value} not found`);
-
-    // Update precision if not set from balance
-    if (token.value && !form.value.precision)
-      form.value.precision = token.value.precision?.toString() || '';
   } catch (error) {
     toastError('Failed to load token details', error);
     router.push('/tokens/list');
@@ -122,13 +90,8 @@ onMounted(async () => {
   // Load user balances (needed for token selector)
   await tokensStore.loadBalances();
 
-  // Initialize form with query params
-  form.value.assetNum = route.query['asset-num'] as string || '';
-  selectedTokenAssetNum.value = route.query['asset-num'] as string || '';
-  form.value.precision = route.query.precision as string || '';
-
-  // Load token details if asset number is available
-  if (assetNum.value)
+  // Load token details if asset number is available from URL
+  if (route.query['asset-num'])
     await loadTokenDetails();
 
   isLoading.value = false;
@@ -146,8 +109,8 @@ watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
     // Load balances now that we have an authenticated session
     await tokensStore.loadBalances();
 
-    // If nai/precision available, load token details
-    if (assetNum.value && precision.value)
+    // If asset-num available from URL, load token details
+    if (route.query['asset-num'])
       await loadTokenDetails();
   } catch (e) {
     toastError('Error reloading data after login', e);
@@ -165,7 +128,7 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
   try {
     await tokensStore.loadBalances();
 
-    if (assetNum.value && precision.value)
+    if (route.query['asset-num'])
       await loadTokenDetails();
   } catch (e) {
     toastError('Error reloading data after tokensStore.wallet changed', e);
@@ -181,7 +144,7 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
       <!-- Header -->
       <div class="flex items-center justify-between gap-4">
         <Button
-          v-if="hasNaiFromUrl || selectedTokenAssetNum"
+          v-if="hasNaiFromUrl || token"
           variant="ghost"
           size="sm"
           class="gap-2 hover:bg-accent"
@@ -238,12 +201,10 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
 
         <!-- Send Transfer Card -->
         <SendTransferCard
-          v-if="token"
           :has-nai-from-url="hasNaiFromUrl"
           :should-show-token-selector="shouldShowTokenSelector"
-          :token="token"
-          :selected-token-asset-num="selectedTokenAssetNum"
-          @update-selected-token-asset-num="selectedTokenAssetNum = $event"
+          :token="token || undefined"
+          @update-token="handleTokenUpdate"
           @update-amount="form.amount = $event"
           @update-memo="form.memo = $event"
         />
@@ -251,6 +212,7 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
         <!-- QR Code Card (visible when asset number is available) -->
         <QRCodeCard
           v-if="assetNum"
+          :key="assetNum"
           :asset-num="assetNum"
           :amount="form.amount"
           :memo="form.memo"
-- 
GitLab


From 56ee8eca364b3fa6100f8ea50ff7ace4d254e1f1 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Thu, 20 Nov 2025 10:46:45 +0100
Subject: [PATCH 098/102] Move validation functions into utils

---
 src/components/ReceiveTransferCard.vue |   7 +-
 src/components/htm/amount/Input.vue    |  38 ++-----
 src/pages/tokens/create.vue            |  31 ++----
 src/pages/tokens/edit.vue              |  16 +--
 src/pages/tokens/my-balance.vue        |   8 +-
 src/pages/tokens/register-account.vue  |  12 +--
 src/pages/tokens/token.vue             |  81 +--------------
 src/utils/nai-tokens.ts                |  12 +++
 src/utils/validators.ts                | 133 +++++++++++++++++++++++++
 9 files changed, 168 insertions(+), 170 deletions(-)
 create mode 100644 src/utils/validators.ts

diff --git a/src/components/ReceiveTransferCard.vue b/src/components/ReceiveTransferCard.vue
index 0bbb276..142920a 100644
--- a/src/components/ReceiveTransferCard.vue
+++ b/src/components/ReceiveTransferCard.vue
@@ -10,6 +10,7 @@ import TransferCompletedSummary from '@/components/TransferCompletedSummary.vue'
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
+import { parseAssetAmount } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
@@ -58,12 +59,6 @@ const isFormValid = computed(() => {
   return tokenAmountInputValidation.value.isValid;
 });
 
-const parseAssetAmount = (amountStr: string, precision: number): string => {
-  const [integerPart, fractionalPart = ''] = amountStr.split('.');
-  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
-  return integerPart + normalizedFractional;
-};
-
 const handleSend = async () => {
   if (!props.tokenData) {
     toastError('Token not loaded', new Error('Token details not available'));
diff --git a/src/components/htm/amount/Input.vue b/src/components/htm/amount/Input.vue
index eaa0498..bd36337 100644
--- a/src/components/htm/amount/Input.vue
+++ b/src/components/htm/amount/Input.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Input as ShadInput } from '@/components/ui/input';
 import type { CTokenDisplayBase } from '@/stores/tokens.store';
+import { validateAmountPrecision } from '@/utils/validators';
 
 // Props:
 const props = defineProps<{
@@ -19,42 +20,19 @@ const model = defineModel<string>();
 const validationErrorModel = defineModel<string | undefined>('validationError');
 
 // Methods:
-const validateAmountPrecision = (amount: string, precision: number): void => {
-  try {
-    if (amount === '') {
-      validationErrorModel.value = undefined;
-      return;
-    }
-
-    const cleanAmount = amount.replace(/[,\s]/g, '');
-    const [integerPart, decimalPart, anyMore] = cleanAmount.split('.');
-    if (anyMore !== undefined) {
-      validationErrorModel.value = 'Invalid amount format';
-      return;
-    }
-
-    const decimal = BigInt(decimalPart || 0);
-    const integer = BigInt(integerPart || 0);
-
-    if (integer <= 0n) {
-      validationErrorModel.value = 'Amount must be a positive number';
-      return;
-    }
-
-    if (decimal !== 0n && (decimalPart?.length || 0) > precision) {
-      validationErrorModel.value = `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`;
-      return;
-    }
-
+const validateAmount = (amount: string, precision: number): void => {
+  if (amount === '') {
     validationErrorModel.value = undefined;
-  } catch {
-    validationErrorModel.value = 'Invalid amount format';
+    return;
   }
+
+  const validation = validateAmountPrecision(amount, precision);
+  validationErrorModel.value = validation.error;
 };
 
 watch(model, () => {
   if (props.token)
-    validateAmountPrecision(model.value || '', props.token.precision);
+    validateAmount(model.value || '', props.token.precision);
 });
 </script>
 
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index d42b7a1..592d34d 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -27,9 +27,10 @@ import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
-import { generateNAI as generateHTMNAI, toVesting, assetNumFromNAI } from '@/utils/nai-tokens';
+import { generateNAI as generateHTMNAI, toVesting, assetNumFromNAI, parseAssetAmount } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
+import { validateTokenSymbol, isValidTokenPrecision, isValidTokenSupply } from '@/utils/validators';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 
@@ -60,18 +61,7 @@ const generatedNAI = ref('');
 const naiGenerated = ref(false);
 
 // Symbol validation state
-const symbolValidation = computed(() => {
-  const symbol = tokenSymbol.value.trim();
-  if (symbol.length === 0)
-    return { isValid: false, message: '' };
-  if (symbol.length < 3)
-    return { isValid: false, message: 'Symbol must be at least 3 characters' };
-  if (symbol.length > 10)
-    return { isValid: false, message: 'Symbol must be 10 characters or less' };
-  if (!/^[A-Z]+$/.test(symbol))
-    return { isValid: false, message: 'Symbol must contain only letters' };
-  return { isValid: true, message: 'Valid symbol' };
-});
+const symbolValidation = computed(() => validateTokenSymbol(tokenSymbol.value));
 
 // Computed property to show NAI status
 const naiDisplayValue = computed(() => {
@@ -90,11 +80,8 @@ const shouldShowNAIField = computed(() => {
 const isFormValid = computed(() => {
   return tokenName.value.trim() !== '' &&
          symbolValidation.value.isValid &&
-         initialSupply.value !== '' &&
-         parseInt(initialSupply.value) > 0 &&
-         BigInt(initialSupply.value) <= BigInt('9223372036854775807') &&
-         parseInt(precision.value) >= 0 &&
-         parseInt(precision.value) <= 12 &&
+         isValidTokenSupply(initialSupply.value) &&
+         isValidTokenPrecision(precision.value) &&
          agreedToDisclaimer.value;
 });
 
@@ -119,7 +106,7 @@ watch(tokenSymbol, (newSymbol) => {
     clearTimeout(debounceTimer);
 
   // Reset state immediately when symbol is invalid
-  if (newSymbol.trim().length < 3 || !/^[A-Z]+$/i.test(newSymbol.trim())) {
+  if (!validateTokenSymbol(newSymbol).isValid) {
     generatedNAI.value = '';
     naiGenerated.value = false;
     return;
@@ -163,12 +150,6 @@ const copyNAI = async () => {
   }
 };
 
-const parseAssetAmount = (amountStr: string, precision: number): string => {
-  const [integerPart, fractionalPart = ''] = amountStr.split('.');
-  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
-  return integerPart + normalizedFractional;
-};
-
 // Create token using HTM
 const createToken = async () => {
   if (!isFormValid.value) {
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index d59f084..7d447c3 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -19,6 +19,7 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
+import { validateTokenSymbol } from '@/utils/validators';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 // Router
@@ -63,10 +64,7 @@ const tokenImage = computed(() => {
 // Form validation
 const isFormValid = computed(() => {
   return form.value.name.trim() !== '' &&
-         form.value.symbol.trim() !== '' &&
-         form.value.symbol.length >= 3 &&
-         form.value.symbol.length <= 10 &&
-         /^[A-Z]+$/i.test(form.value.symbol.trim());
+         validateTokenSymbol(form.value.symbol).isValid;
 });
 
 // Check if form has changes
@@ -359,16 +357,10 @@ onMounted(async () => {
                 3-10 uppercase letters (e.g., BTC, ETH, HIVE)
               </p>
               <p
-                v-if="form.symbol && !/^[A-Z]+$/i.test(form.symbol.trim())"
+                v-if="form.symbol && !validateTokenSymbol(form.symbol).isValid"
                 class="text-xs text-red-500"
               >
-                Symbol must contain only letters
-              </p>
-              <p
-                v-if="form.symbol && (form.symbol.length < 3 || form.symbol.length > 10)"
-                class="text-xs text-red-500"
-              >
-                Symbol must be 3-10 characters
+                {{ validateTokenSymbol(form.symbol).message }}
               </p>
             </div>
 
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 574cb4f..fa0bbce 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -26,6 +26,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import AddToGoogleWallet from '@/components/wallet/AddToGoogleWallet.vue';
 import { useTokensStore, type CTokenBalanceDisplay, type CTokenPairBalanceDefinition, type TokenStoreApiResponse } from '@/stores/tokens.store';
+import { parseAssetAmount } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
@@ -70,13 +71,6 @@ const formatCount = (count: number): string => {
   return count.toString();
 };
 
-// Parse asset amount - convert decimal to base units (integer with precision zeros)
-const parseAssetAmount = (amountStr: string, precision: number): string => {
-  const [integerPart, fractionalPart = ''] = amountStr.split('.');
-  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
-  return integerPart + normalizedFractional;
-};
-
 const loadAccountBalances = async (page = 1) => {
   try {
     isLoading.value = true;
diff --git a/src/pages/tokens/register-account.vue b/src/pages/tokens/register-account.vue
index b3aa168..bdc84ab 100644
--- a/src/pages/tokens/register-account.vue
+++ b/src/pages/tokens/register-account.vue
@@ -29,6 +29,7 @@ import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
+import { isValidUrl } from '@/utils/validators';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 
@@ -105,17 +106,6 @@ const isBasicInfoValid = computed(() => {
          registrationData.value.walletPassword === registrationData.value.repeatPassword;
 });
 
-// Validate URL format
-const isValidUrl = (url: string): boolean => {
-  if (!url) return true; // Empty URL is valid (optional field)
-  try {
-    new URL(url);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
 // Generate HTM keys automatically (called during registration)
 const generateAndDownloadKeys = async () => {
   if (!isBasicInfoValid.value) {
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 67813dc..ae97556 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -21,9 +21,10 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore, type CTokenBalanceDisplay, type CTokenDefinitionDisplay, type CTokenUserRanked } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { copyText } from '@/utils/copy';
-import { isVesting, toLiquid, toVesting } from '@/utils/nai-tokens';
+import { isVesting, toLiquid, toVesting, parseAssetAmount } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
+import { isValidPublicKey, validateAmountPrecision } from '@/utils/validators';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 // Router
@@ -88,12 +89,6 @@ const connectToHTM = async () => {
   }
 };
 
-const isValidPublicKey = (key: string): boolean => {
-  // Simple validation for Hive public key (starts with STM and has correct length)
-  const hivePublicKeyRegex = /^STM[0-9A-Za-z]{50}$/;
-  return hivePublicKeyRegex.test(key);
-};
-
 // Validate recipient address (must be a public key)
 const isRecipientValid = computed(() => {
   if (!transferForm.value.to) return false;
@@ -143,78 +138,6 @@ const loadTopHolders = async () => {
   }
 };
 
-// Validate amount precision and overflow
-const validateAmountPrecision = (amount: string, precision: number): { isValid: boolean; error?: string; parsedAmount?: string } => {
-  try {
-    // Remove thousand separators (commas, spaces) to get clean number
-    const cleanAmount = amount.replace(/[,\s]/g, '');
-
-    // Check if amount contains only valid characters (digits, decimal point)
-    if (!/^\d*\.?\d*$/.test(cleanAmount))
-      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
-
-    // Check if amount is a valid number
-    const numAmount = parseFloat(cleanAmount);
-    if (isNaN(numAmount) || numAmount <= 0)
-      return { isValid: false, error: 'Amount must be a positive number' };
-
-    // Check for infinity
-    if (!isFinite(numAmount))
-      return { isValid: false, error: 'Amount value is too large' };
-
-    // Check decimal places - count actual decimal places in input
-    const decimalIndex = cleanAmount.indexOf('.');
-    if (decimalIndex !== -1) {
-      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
-      if (decimalPlaces > precision) {
-        return {
-          isValid: false,
-          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
-        };
-      }
-    }
-
-    // Convert to base units to check for overflow
-    const multiplier = Math.pow(10, precision);
-    const baseUnits = numAmount * multiplier;
-
-    // Check for overflow - ensure it's within safe integer range
-    // Maximum safe integer in JavaScript is 2^53 - 1
-    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
-    if (baseUnits > MAX_SAFE_BASE_UNITS)
-      return { isValid: false, error: 'Amount is too large and would cause overflow' };
-
-    // Ensure conversion to base units produces an integer (no precision loss)
-    const roundedBaseUnits = Math.round(baseUnits);
-    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
-      return {
-        isValid: false,
-        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
-      };
-    }
-
-    // Check if user has sufficient balance
-    // Note: Based on API response, userBalance.value.amount appears to be a decimal value
-    if (userBalance.value) {
-      const userBalanceDecimal = parseFloat(userBalance.value.balance.toString());
-      // Compare decimal values directly (both numAmount and userBalanceDecimal are decimal)
-      if (numAmount > userBalanceDecimal)
-        return { isValid: false, error: 'Insufficient balance for this transfer' };
-    }
-
-    return { isValid: true, parsedAmount: roundedBaseUnits.toString() };
-  } catch (_error) {
-    return { isValid: false, error: 'Invalid amount format' };
-  }
-};
-
-// Parse asset amount - convert decimal to base units (integer with precision zeros)
-const parseAssetAmount = (amountStr: string, precision: number): string => {
-  const [integerPart, fractionalPart = ''] = amountStr.split('.');
-  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
-  return integerPart + normalizedFractional;
-};
-
 // Handle transfer (simplified for now)
 const handleTransfer = async () => {
   if (!token.value || !isLoggedIn.value) {
diff --git a/src/utils/nai-tokens.ts b/src/utils/nai-tokens.ts
index b9b2fe4..846d9e8 100644
--- a/src/utils/nai-tokens.ts
+++ b/src/utils/nai-tokens.ts
@@ -84,3 +84,15 @@ export const generateNAI = (symbol: string, precision: number): string => {
   while (isVesting(randomNAI, precision)); // Keep generating until we get a liquid (non-vesting) NAI
   return randomNAI;
 };
+
+/**
+ * Parse asset amount - convert decimal to base units (integer with precision zeros)
+ * @param amountStr - The amount string in decimal format
+ * @param precision - The number of decimal places for the token
+ * @returns The amount as a string in base units
+ */
+export const parseAssetAmount = (amountStr: string, precision: number): string => {
+  const [integerPart, fractionalPart = ''] = amountStr.split('.');
+  const normalizedFractional = fractionalPart.padEnd(precision, '0').slice(0, precision);
+  return integerPart + normalizedFractional;
+};
diff --git a/src/utils/validators.ts b/src/utils/validators.ts
new file mode 100644
index 0000000..d63d939
--- /dev/null
+++ b/src/utils/validators.ts
@@ -0,0 +1,133 @@
+/**
+ * Validation utilities for various input types
+ */
+
+/**
+ * Validates amount precision for token amounts
+ * @param amount - The amount string to validate
+ * @param precision - Maximum number of decimal places allowed
+ * @returns Validation result with error message and parsed amount if valid
+ */
+export function validateAmountPrecision (
+  amount: string,
+  precision: number
+): { isValid: boolean; error?: string; parsedAmount?: string } {
+  try {
+    // Remove thousand separators (commas, spaces) to get clean number
+    const cleanAmount = amount.replace(/[,\s]/g, '');
+
+    // Check if amount contains only valid characters (digits, decimal point)
+    if (!/^\d*\.?\d*$/.test(cleanAmount))
+      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
+
+    // Check if amount is a valid number
+    const numAmount = parseFloat(cleanAmount);
+    if (isNaN(numAmount) || numAmount <= 0)
+      return { isValid: false, error: 'Amount must be a positive number' };
+
+    // Check for infinity
+    if (!isFinite(numAmount))
+      return { isValid: false, error: 'Amount value is too large' };
+
+    // Check decimal places - count actual decimal places in input
+    const decimalIndex = cleanAmount.indexOf('.');
+    if (decimalIndex !== -1) {
+      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
+      if (decimalPlaces > precision) {
+        return {
+          isValid: false,
+          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
+        };
+      }
+    }
+
+    // Convert to base units to check for overflow
+    const multiplier = Math.pow(10, precision);
+    const baseUnits = numAmount * multiplier;
+
+    // Check for overflow - ensure it's within safe integer range
+    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
+    if (baseUnits > MAX_SAFE_BASE_UNITS)
+      return { isValid: false, error: 'Amount is too large and would cause overflow' };
+
+    // Ensure conversion to base units produces an integer (no precision loss)
+    const roundedBaseUnits = Math.round(baseUnits);
+    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
+      return {
+        isValid: false,
+        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
+      };
+    }
+
+    return { isValid: true, parsedAmount: cleanAmount };
+  } catch {
+    return { isValid: false, error: 'Invalid amount format' };
+  }
+}
+
+/**
+ * Validates Hive public key format
+ * @param key - The public key to validate
+ * @returns True if the key is valid
+ */
+export function isValidPublicKey (key: string): boolean {
+  // Simple validation for Hive public key (starts with STM and has correct length)
+  const hivePublicKeyRegex = /^STM[0-9A-Za-z]{50}$/;
+  return hivePublicKeyRegex.test(key);
+}
+
+/**
+ * Validates URL format
+ * @param url - The URL to validate
+ * @returns True if the URL is valid or empty
+ */
+export function isValidUrl (url: string): boolean {
+  if (!url) return true; // Empty URL is valid (optional field)
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Validates token symbol format
+ * @param symbol - The token symbol to validate
+ * @returns Validation result with error message
+ */
+export function validateTokenSymbol (symbol: string): { isValid: boolean; message: string } {
+  const trimmed = symbol.trim();
+  if (trimmed.length === 0)
+    return { isValid: false, message: '' };
+  if (trimmed.length < 3)
+    return { isValid: false, message: 'Symbol must be at least 3 characters' };
+  if (trimmed.length > 10)
+    return { isValid: false, message: 'Symbol must be 10 characters or less' };
+  if (!/^[A-Z]+$/i.test(trimmed))
+    return { isValid: false, message: 'Symbol must contain only letters' };
+  return { isValid: true, message: 'Valid symbol' };
+}
+
+/**
+ * Validates token precision (number of decimal places)
+ * @param precision - The precision value to validate
+ * @returns True if precision is valid (0-12)
+ */
+export function isValidTokenPrecision (precision: number | string): boolean {
+  const prec = typeof precision === 'string' ? parseInt(precision) : precision;
+  return !isNaN(prec) && prec >= 0 && prec <= 12;
+}
+
+/**
+ * Validates token supply amount
+ * @param supply - The supply value to validate
+ * @returns True if supply is valid (positive and within safe range)
+ */
+export function isValidTokenSupply (supply: string): boolean {
+  if (!supply || supply.trim() === '') return false;
+  const parsed = parseInt(supply);
+  if (isNaN(parsed) || parsed <= 0) return false;
+  // Maximum safe value for int64
+  return BigInt(supply) <= BigInt('9223372036854775807');
+}
-- 
GitLab


From 11765eb6a691336b9892d1bc9240403849fc2551 Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Thu, 20 Nov 2025 10:48:17 +0100
Subject: [PATCH 099/102] Fix token preview when creating new token

---
 src/pages/tokens/create.vue | 41 +++++++++++++++++++++++--------------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index 592d34d..c8e3b59 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -298,21 +298,32 @@ watch(tokenSymbol, (newValue) => {
 });
 
 // Computed property for token preview data
-const previewToken = computed(() => ({
-  name: tokenName.value || undefined,
-  symbol: tokenSymbol.value || undefined,
-  description: tokenDescription.value || undefined,
-  nai: generatedNAI.value || undefined,
-  image: tokenImage.value || undefined,
-  website: tokenWebsite.value || undefined,
-  totalSupply: initialSupply.value,
-  maxSupply: capped.value ? initialSupply.value : undefined,
-  precision: parseInt(precision.value) ?? 3,
-  capped: capped.value,
-  othersCanStake: othersCanStake.value,
-  othersCanUnstake: othersCanUnstake.value,
-  ownerPublicKey: CTokensProvider.getOperationalPublicKey()
-}));
+const previewToken = computed(() => {
+  const precisionValue = parseInt(precision.value) || 3;
+  const supplyValue = BigInt(parseAssetAmount(initialSupply.value || '0', precisionValue));
+
+  return {
+    isNft: false,
+    nai: generatedNAI.value || '@@000000000',
+    assetNum: 0,
+    isStaked: false,
+    precision: precisionValue,
+    metadata: {},
+    name: tokenName.value || undefined,
+    symbol: tokenSymbol.value || undefined,
+    description: tokenDescription.value || undefined,
+    image: tokenImage.value || undefined,
+    website: tokenWebsite.value || undefined,
+    ownerPublicKey: CTokensProvider.getOperationalPublicKey() || '',
+    displayTotalSupply: initialSupply.value || '0',
+    totalSupply: supplyValue,
+    maxSupply: capped.value ? supplyValue : BigInt(0),
+    displayMaxSupply: capped.value ? initialSupply.value || '0' : '0',
+    capped: capped.value,
+    othersCanStake: othersCanStake.value,
+    othersCanUnstake: othersCanUnstake.value
+  };
+});
 </script>
 
 <template>
-- 
GitLab


From 793c72ec47b249d6b47e9761d8d047a44090602b Mon Sep 17 00:00:00 2001
From: fwaszkiewicz <fabianwaszkiewicz09@gmail.com>
Date: Thu, 20 Nov 2025 11:29:34 +0100
Subject: [PATCH 100/102] Better organize /pos pages

---
 src/components/SendTransferCard.vue      |   2 +-
 src/components/htm/tokens/QRCodeCard.vue |   2 +-
 src/pages/tokens/pos/receive.vue         | 130 +++++++++++-----------
 src/pages/tokens/pos/send.vue            | 132 +++++++++++------------
 src/pages/tokens/token.vue               |   2 +-
 5 files changed, 134 insertions(+), 134 deletions(-)

diff --git a/src/components/SendTransferCard.vue b/src/components/SendTransferCard.vue
index 38e60c7..679bcce 100644
--- a/src/components/SendTransferCard.vue
+++ b/src/components/SendTransferCard.vue
@@ -52,7 +52,7 @@ watch(() => form.value.memo, (newValue) => {
 <template>
   <Card>
     <CardHeader>
-      <CardTitle>Send Token</CardTitle>
+      <CardTitle>Receive token</CardTitle>
       <CardDescription>
         {{ hasNaiFromUrl ? 'Specify the transfer amount and generate a QR code' : 'Enter token details and generate a QR code for transfer' }}
       </CardDescription>
diff --git a/src/components/htm/tokens/QRCodeCard.vue b/src/components/htm/tokens/QRCodeCard.vue
index aec84b2..4e98be6 100644
--- a/src/components/htm/tokens/QRCodeCard.vue
+++ b/src/components/htm/tokens/QRCodeCard.vue
@@ -35,7 +35,7 @@ const generateQRCode = async () => {
     if (props.memo?.trim())
       params.append('memo', props.memo);
 
-    const url = `${baseUrl}/tokens/pos/receive?${params.toString()}`;
+    const url = `${baseUrl}/tokens/pos/send?${params.toString()}`;
 
     if (!qrCode)
       qrCode = await import('qrcode');
diff --git a/src/pages/tokens/pos/receive.vue b/src/pages/tokens/pos/receive.vue
index aeb4fec..397c945 100644
--- a/src/pages/tokens/pos/receive.vue
+++ b/src/pages/tokens/pos/receive.vue
@@ -2,70 +2,67 @@
 import { mdiArrowLeft } from '@mdi/js';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { toast } from 'vue-sonner';
 
 import HTMView from '@/components/htm/HTMView.vue';
-import ReceiveTransferCard from '@/components/ReceiveTransferCard.vue';
+import QRCodeCard from '@/components/htm/tokens/QRCodeCard.vue';
+import SendTransferCard from '@/components/SendTransferCard.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useSettingsStore } from '@/stores/settings.store';
-import { useTokensStore, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
-import { useUserStore } from '@/stores/user.store';
+import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 // Router
 const route = useRoute();
 const router = useRouter();
 
-const settingsStore = useSettingsStore();
 const tokensStore = useTokensStore();
-const userStore = useUserStore();
 
 // State
-const token = ref<CTokenDefinitionDisplay | null>(null);
+const token = ref<CTokenDisplayBase | null>(null);
 const isLoading = ref(true);
 
-// Get parameters from route query
-const assetNum = computed(() => Number(route.query['asset-num']));
-const precision = computed(() => route.query.precision as string);
-const receiverKey = computed(() => route.query.to as string || CTokensProvider.getOperationalPublicKey());
-const queryAmount = computed(() => route.query.amount as string | undefined);
-const queryMemo = computed(() => route.query.memo as string | undefined);
+// Form state
+const form = ref({
+  amount: '',
+  memo: ''
+});
+
+// Get NAI from route parameters or selected token
+const assetNum = computed(() => {
+  if (route.query['asset-num']) return Number(route.query['asset-num']);
+  return token.value?.assetNum || null;
+});
 
-const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
+// Check if NAI is provided in URL
+const hasNaiFromUrl = computed(() => !!route.query['asset-num']);
+
+// Check if we should show token selector (when no asset-num is provided)
+const shouldShowTokenSelector = computed(() => {
+  return !hasNaiFromUrl.value && isLoggedIn.value;
+});
 
 // Check if user is logged in
 const isLoggedIn = computed(() => !!tokensStore.wallet);
 
-const htmUserMetadata = ref<{
-  displayName: string;
-  about?: string;
-  name?: string;
-  profileImage?: string;
-  website?: string;
-} | undefined>(undefined);
-
-const fetchHTMUserData = async () => {
-  try {
-    htmUserMetadata.value = await tokensStore.getCurrentUserMetadata();
-  } catch (_error) {}
+// Handle token update from SendTransferCard
+const handleTokenUpdate = (newToken: CTokenDisplayBase | undefined) => {
+  token.value = newToken || null;
 };
 
-// Receiver display helpers
-const receiverDisplayName = computed(() => {
-  // The recipient is you — prefer parsed user name (L2 if available)
-  const name = userStore.name || settingsStore.settings.account || userOperationalKey.value || '';
-  if (name) return name;
-  return 'You';
-});
-
 // Load token details
 const loadTokenDetails = async () => {
   if (!assetNum.value) return;
 
   try {
-    token.value = await tokensStore.getTokenByAssetNum(assetNum.value);
+    // Fetch token details by NAI
+    const tokens = await tokensStore.getTokenByAssetNum(Number(assetNum.value));
+
+    token.value = tokens;
+
+    if (!token.value)
+      throw new Error(`Token with asset number ${assetNum.value} not found`);
   } catch (error) {
     toastError('Failed to load token details', error);
     router.push('/tokens/list');
@@ -82,24 +79,26 @@ const goBack = () => {
 
 // Initialize
 onMounted(async () => {
-  // Allow viewing without login, but login will be required when clicking "Send Token"
+  // Require login for send/generate QR mode
+  if (!isLoggedIn.value) {
+    toast.error('You must be logged in to use this feature');
+    return;
+  }
 
   isLoading.value = true;
 
-  // Load user balances if logged in
-  if (isLoggedIn.value) {
-    await tokensStore.loadBalances();
-    await fetchHTMUserData();
-  }
+  // Load user balances (needed for token selector)
+  await tokensStore.loadBalances();
 
-  // Load token details if asset number is available
-  if (assetNum.value)
+  // Load token details if asset number is available from URL
+  if (route.query['asset-num'])
     await loadTokenDetails();
 
   isLoading.value = false;
 });
 
-// If the user logs in after the page mounted, reload balances, HTM user metadata, and token details
+// If the user logs in after the page mounted (for example after entering password),
+// reload balances and token details
 watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
   // Only act when the user becomes logged in
   if (!loggedIn || wasLoggedIn === loggedIn) return;
@@ -107,10 +106,11 @@ watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
   isLoading.value = true;
 
   try {
+    // Load balances now that we have an authenticated session
     await tokensStore.loadBalances();
-    await fetchHTMUserData();
 
-    if (assetNum.value && precision.value)
+    // If asset-num available from URL, load token details
+    if (route.query['asset-num'])
       await loadTokenDetails();
   } catch (e) {
     toastError('Error reloading data after login', e);
@@ -119,7 +119,7 @@ watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
   }
 });
 
-// Also watch the tokens store wallet instance
+// Also watch the tokens store wallet instance - this changes when CTokensProvider is set
 watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
   if (!newWallet || newWallet === oldWallet) return;
 
@@ -127,9 +127,8 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
 
   try {
     await tokensStore.loadBalances();
-    await fetchHTMUserData();
 
-    if (assetNum.value && precision.value)
+    if (route.query['asset-num'])
       await loadTokenDetails();
   } catch (e) {
     toastError('Error reloading data after tokensStore.wallet changed', e);
@@ -145,7 +144,7 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
       <!-- Header -->
       <div class="flex items-center justify-between gap-4">
         <Button
-          v-if="assetNum"
+          v-if="hasNaiFromUrl || token"
           variant="ghost"
           size="sm"
           class="gap-2 hover:bg-accent"
@@ -193,23 +192,30 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
         <!-- Page Title -->
         <div>
           <h1 class="text-3xl font-bold text-foreground mb-2">
-            Send Token
+            Generate QR Code
           </h1>
           <p class="text-muted-foreground">
-            Confirm and send the token transfer.
+            {{ hasNaiFromUrl ? 'Generate a QR code for others to scan and send you tokens.' : 'Select a token and generate a QR code for others to scan and send you tokens.' }}
           </p>
         </div>
 
-        <!-- Receive Transfer Card -->
-        <ReceiveTransferCard
-          :receiver-name="htmUserMetadata?.displayName || receiverDisplayName"
-          :receiver-key="receiverKey"
-          :receiver-avatar="htmUserMetadata?.profileImage"
-          :token-data="token!"
-          :query-amount="queryAmount"
-          :query-memo="queryMemo"
+        <!-- Send Transfer Card -->
+        <SendTransferCard
+          :has-nai-from-url="hasNaiFromUrl"
+          :should-show-token-selector="shouldShowTokenSelector"
+          :token="token || undefined"
+          @update-token="handleTokenUpdate"
+          @update-amount="form.amount = $event"
+          @update-memo="form.memo = $event"
+        />
+
+        <!-- QR Code Card (visible when asset number is available) -->
+        <QRCodeCard
+          v-if="assetNum"
+          :key="assetNum"
           :asset-num="assetNum"
-          :precision="precision"
+          :amount="form.amount"
+          :memo="form.memo"
         />
       </div>
     </div>
diff --git a/src/pages/tokens/pos/send.vue b/src/pages/tokens/pos/send.vue
index 26b12a7..2ac8293 100644
--- a/src/pages/tokens/pos/send.vue
+++ b/src/pages/tokens/pos/send.vue
@@ -2,67 +2,70 @@
 import { mdiArrowLeft } from '@mdi/js';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { toast } from 'vue-sonner';
 
 import HTMView from '@/components/htm/HTMView.vue';
-import QRCodeCard from '@/components/htm/tokens/QRCodeCard.vue';
-import SendTransferCard from '@/components/SendTransferCard.vue';
+import ReceiveTransferCard from '@/components/ReceiveTransferCard.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
+import { useUserStore } from '@/stores/user.store';
 import { toastError } from '@/utils/parse-error';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 // Router
 const route = useRoute();
 const router = useRouter();
 
+const settingsStore = useSettingsStore();
 const tokensStore = useTokensStore();
+const userStore = useUserStore();
 
 // State
-const token = ref<CTokenDisplayBase | null>(null);
+const token = ref<CTokenDefinitionDisplay | null>(null);
 const isLoading = ref(true);
 
-// Form state
-const form = ref({
-  amount: '',
-  memo: ''
-});
-
-// Get NAI from route parameters or selected token
-const assetNum = computed(() => {
-  if (route.query['asset-num']) return Number(route.query['asset-num']);
-  return token.value?.assetNum || null;
-});
+// Get parameters from route query
+const assetNum = computed(() => Number(route.query['asset-num']));
+const precision = computed(() => route.query.precision as string);
+const receiverKey = computed(() => route.query.to as string || CTokensProvider.getOperationalPublicKey());
+const queryAmount = computed(() => route.query.amount as string | undefined);
+const queryMemo = computed(() => route.query.memo as string | undefined);
 
-// Check if NAI is provided in URL
-const hasNaiFromUrl = computed(() => !!route.query['asset-num']);
-
-// Check if we should show token selector (when no asset-num is provided)
-const shouldShowTokenSelector = computed(() => {
-  return !hasNaiFromUrl.value && isLoggedIn.value;
-});
+const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
 
 // Check if user is logged in
 const isLoggedIn = computed(() => !!tokensStore.wallet);
 
-// Handle token update from SendTransferCard
-const handleTokenUpdate = (newToken: CTokenDisplayBase | undefined) => {
-  token.value = newToken || null;
+const htmUserMetadata = ref<{
+  displayName: string;
+  about?: string;
+  name?: string;
+  profileImage?: string;
+  website?: string;
+} | undefined>(undefined);
+
+const fetchHTMUserData = async () => {
+  try {
+    htmUserMetadata.value = await tokensStore.getCurrentUserMetadata();
+  } catch (_error) {}
 };
 
+// Receiver display helpers
+const receiverDisplayName = computed(() => {
+  // The recipient is you — prefer parsed user name (L2 if available)
+  const name = userStore.name || settingsStore.settings.account || userOperationalKey.value || '';
+  if (name) return name;
+  return 'You';
+});
+
 // Load token details
 const loadTokenDetails = async () => {
   if (!assetNum.value) return;
 
   try {
-    // Fetch token details by NAI
-    const tokens = await tokensStore.getTokenByAssetNum(Number(assetNum.value));
-
-    token.value = tokens;
-
-    if (!token.value)
-      throw new Error(`Token with asset number ${assetNum.value} not found`);
+    token.value = await tokensStore.getTokenByAssetNum(assetNum.value);
   } catch (error) {
     toastError('Failed to load token details', error);
     router.push('/tokens/list');
@@ -79,26 +82,24 @@ const goBack = () => {
 
 // Initialize
 onMounted(async () => {
-  // Require login for send/generate QR mode
-  if (!isLoggedIn.value) {
-    toast.error('You must be logged in to use this feature');
-    return;
-  }
+  // Allow viewing without login, but login will be required when clicking "Send Token"
 
   isLoading.value = true;
 
-  // Load user balances (needed for token selector)
-  await tokensStore.loadBalances();
+  // Load user balances if logged in
+  if (isLoggedIn.value) {
+    await tokensStore.loadBalances();
+    await fetchHTMUserData();
+  }
 
-  // Load token details if asset number is available from URL
-  if (route.query['asset-num'])
+  // Load token details if asset number is available
+  if (assetNum.value)
     await loadTokenDetails();
 
   isLoading.value = false;
 });
 
-// If the user logs in after the page mounted (for example after entering password),
-// reload balances and token details
+// If the user logs in after the page mounted, reload balances, HTM user metadata, and token details
 watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
   // Only act when the user becomes logged in
   if (!loggedIn || wasLoggedIn === loggedIn) return;
@@ -106,11 +107,10 @@ watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
   isLoading.value = true;
 
   try {
-    // Load balances now that we have an authenticated session
     await tokensStore.loadBalances();
+    await fetchHTMUserData();
 
-    // If asset-num available from URL, load token details
-    if (route.query['asset-num'])
+    if (assetNum.value && precision.value)
       await loadTokenDetails();
   } catch (e) {
     toastError('Error reloading data after login', e);
@@ -119,7 +119,7 @@ watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
   }
 });
 
-// Also watch the tokens store wallet instance - this changes when CTokensProvider is set
+// Also watch the tokens store wallet instance
 watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
   if (!newWallet || newWallet === oldWallet) return;
 
@@ -127,8 +127,9 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
 
   try {
     await tokensStore.loadBalances();
+    await fetchHTMUserData();
 
-    if (route.query['asset-num'])
+    if (assetNum.value && precision.value)
       await loadTokenDetails();
   } catch (e) {
     toastError('Error reloading data after tokensStore.wallet changed', e);
@@ -144,7 +145,7 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
       <!-- Header -->
       <div class="flex items-center justify-between gap-4">
         <Button
-          v-if="hasNaiFromUrl || token"
+          v-if="assetNum"
           variant="ghost"
           size="sm"
           class="gap-2 hover:bg-accent"
@@ -184,7 +185,7 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
         </Card>
       </div>
 
-      <!-- Send Form -->
+      <!-- Send Token Form (from QR scan) -->
       <div
         v-if="!isLoading"
         class="space-y-6"
@@ -192,30 +193,23 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
         <!-- Page Title -->
         <div>
           <h1 class="text-3xl font-bold text-foreground mb-2">
-            {{ hasNaiFromUrl ? 'Receive Token' : 'Receive Token' }}
+            Send Token
           </h1>
           <p class="text-muted-foreground">
-            {{ hasNaiFromUrl ? 'Generate a QR code for others to scan and send you tokens.' : 'Select a token and generate a QR code for others to scan and send you tokens.' }}
+            Confirm and send the token transfer.
           </p>
         </div>
 
-        <!-- Send Transfer Card -->
-        <SendTransferCard
-          :has-nai-from-url="hasNaiFromUrl"
-          :should-show-token-selector="shouldShowTokenSelector"
-          :token="token || undefined"
-          @update-token="handleTokenUpdate"
-          @update-amount="form.amount = $event"
-          @update-memo="form.memo = $event"
-        />
-
-        <!-- QR Code Card (visible when asset number is available) -->
-        <QRCodeCard
-          v-if="assetNum"
-          :key="assetNum"
+        <!-- Receive Transfer Card -->
+        <ReceiveTransferCard
+          :receiver-name="htmUserMetadata?.displayName || receiverDisplayName"
+          :receiver-key="receiverKey"
+          :receiver-avatar="htmUserMetadata?.profileImage"
+          :token-data="token!"
+          :query-amount="queryAmount"
+          :query-memo="queryMemo"
           :asset-num="assetNum"
-          :amount="form.amount"
-          :memo="form.memo"
+          :precision="precision"
         />
       </div>
     </div>
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index ae97556..1403dbb 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -385,7 +385,7 @@ const editToken = () => {
 
 const showQRCode = () => {
   router.push({
-    path: '/tokens/pos/send',
+    path: '/tokens/pos/receive',
     query: { 'asset-num': assetNum.value }
   });
 };
-- 
GitLab


From 3d271aa8e690681e30fb883ea2a802be6277d479 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 20 Nov 2025 15:34:46 +0100
Subject: [PATCH 101/102] Minor input token improvements & fixes

---
 src/components/ReceiveTransferCard.vue        | 28 ++----
 src/components/SendTransferCard.vue           |  2 +-
 src/components/TransferCompletedSummary.vue   |  1 -
 .../htm/amount/TokenAmountInput.vue           | 25 +++++-
 .../utilcards/ConfirmCreateAccountCard.vue    | 18 ++--
 src/pages/tokens/my-balance.vue               | 18 ++--
 src/pages/tokens/pos/send.vue                 |  6 +-
 src/pages/tokens/token.vue                    | 39 +++++----
 src/stores/tokens.store.ts                    | 11 ++-
 src/utils/validators.ts                       | 87 +++++++------------
 10 files changed, 116 insertions(+), 119 deletions(-)

diff --git a/src/components/ReceiveTransferCard.vue b/src/components/ReceiveTransferCard.vue
index 142920a..844ddab 100644
--- a/src/components/ReceiveTransferCard.vue
+++ b/src/components/ReceiveTransferCard.vue
@@ -5,19 +5,16 @@ import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
+import { TokenAmountInput } from '@/components/htm/amount';
 import ReceiverTokenSummary from '@/components/ReceiverTokenSummary.vue';
 import TransferCompletedSummary from '@/components/TransferCompletedSummary.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
-import { parseAssetAmount } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import { TokenAmountInput } from '~/src/components/htm/amount';
-
-
 interface Props {
   receiverName?: string;
   receiverKey?: string;
@@ -26,7 +23,6 @@ interface Props {
   queryAmount?: string;
   queryMemo?: string;
   assetNum: number;
-  precision: string;
 }
 
 const props = defineProps<Props>();
@@ -38,9 +34,11 @@ const emit = defineEmits<{
 const router = useRouter();
 const tokensStore = useTokensStore();
 
+const amount = computed(() => props.queryAmount ? (props.queryAmount.slice(0, -props.tokenData.precision) + '.' + props.queryAmount.slice(-props.tokenData.precision)) : '');
+
 // Form state
 const form = ref({
-  amount: props.queryAmount || '',
+  amount: amount.value || '',
   memo: props.queryMemo || ''
 });
 
@@ -51,12 +49,12 @@ const sentSummary = ref<{ amount: string; tokenLabel: string; receiver: string;
 // Check if user is logged in
 const isLoggedIn = computed(() => !!tokensStore.wallet);
 
-const tokenAmountInputValidation = ref<{ isValid: boolean; error?: string }>({ isValid: false });
+// TODO: Fix validation
 
 const isFormValid = computed(() => {
   if (!props.tokenData) return false;
-  if (form.value.amount.trim() === '') return true;
-  return tokenAmountInputValidation.value.isValid;
+  if (form.value.amount.trim() === '') return false;
+  return true;
 });
 
 const handleSend = async () => {
@@ -78,23 +76,16 @@ const handleSend = async () => {
     return;
   }
 
-  if (!tokenAmountInputValidation.value.isValid) {
-    toastError('Invalid amount', new Error(tokenAmountInputValidation.value.error || 'Invalid amount format'));
-    return;
-  }
-
   try {
     isSending.value = true;
 
-    const baseAmount = parseAssetAmount(form.value.amount, props.tokenData.precision || 0);
-
     const sender = CTokensProvider.getOperationalPublicKey()!;
 
     await waitForTransactionStatus(
       () => ([{
         token_transfer_operation: {
           amount: {
-            amount: baseAmount,
+            amount: form.value.amount,
             nai: props.tokenData!.nai!,
             precision: props.tokenData!.precision || 0
           },
@@ -134,7 +125,7 @@ const handleSend = async () => {
 // Watch query params changes to update form
 watch(() => props.queryAmount, (newValue) => {
   if (newValue)
-    form.value.amount = newValue;
+    form.value.amount = amount.value;
 });
 
 watch(() => props.queryMemo, (newValue) => {
@@ -199,7 +190,6 @@ watch(() => props.queryMemo, (newValue) => {
           :remaining-balance="sentSummary?.remainingBalance"
           :timestamp="sentSummary?.timestamp"
           :asset-num="assetNum"
-          :precision="precision"
           :memo="form.memo"
         />
       </div>
diff --git a/src/components/SendTransferCard.vue b/src/components/SendTransferCard.vue
index 679bcce..564f928 100644
--- a/src/components/SendTransferCard.vue
+++ b/src/components/SendTransferCard.vue
@@ -2,11 +2,11 @@
 import { computed, ref, watch } from 'vue';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
+import { TokenAmountInput } from '@/components/htm/amount';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import type { CTokenDisplayBase } from '@/stores/tokens.store';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-import { TokenAmountInput } from '~/src/components/htm/amount';
 
 interface Props {
   hasNaiFromUrl: boolean;
diff --git a/src/components/TransferCompletedSummary.vue b/src/components/TransferCompletedSummary.vue
index e1c6881..c01d310 100644
--- a/src/components/TransferCompletedSummary.vue
+++ b/src/components/TransferCompletedSummary.vue
@@ -16,7 +16,6 @@ interface Props {
   remainingBalance?: string;
   timestamp?: string;
   assetNum: number;
-  precision: string;
   memo?: string;
 }
 
diff --git a/src/components/htm/amount/TokenAmountInput.vue b/src/components/htm/amount/TokenAmountInput.vue
index c12b8e5..6d2fc97 100644
--- a/src/components/htm/amount/TokenAmountInput.vue
+++ b/src/components/htm/amount/TokenAmountInput.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Label } from '@/components/ui/label';
-import type { CTokenDisplayBase } from '@/stores/tokens.store';
+import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 import Input from './Input.vue';
 import TokenSelector from './TokenSelector.vue';
@@ -33,22 +34,36 @@ const validationError = ref<string | undefined>(undefined); /* This is the valid
 
 const selectedAvailableBalance = ref<string>('');
 
+const tokensStore = useTokensStore();
+
 // Rewrite display symbol
 watch(internalModel, () => {
-  if (!selectedToken.value) return;
+  if (!selectedToken.value || validationError.value) return;
 
   const [integerPart, decimalPart] = internalModel.value.replace(/[,\s]/g, '').split('.');
 
   model.value = integerPart + ((decimalPart ?? '').padEnd(selectedToken.value.precision, '0'));
+}, { flush: 'post' }); // Flush after validation updates
+watch(model, () => { // Allow clearing input when model is set to ''
+  if (model.value === '' && validationError.value === undefined) // Clear only when there's no validation error
+    internalModel.value = '';
 });
 watch(validationError, () => {
   // Clear model if there's a validation error
   if (validationError.value)
     model.value = '';
 });
-watch(selectedToken, newValue => {
+watch(selectedToken, async newValue => {
   if (newValue && 'displayBalance' in newValue) // only for CTokenBalanceDisplay - selector variant
     selectedAvailableBalance.value = newValue.displayBalance as string;
+  else if (newValue) {
+    const key = CTokensProvider.getOperationalPublicKey();
+    if (!key) return;
+    try {
+      const tokensBalance = await tokensStore.getBalanceSingleToken(key, newValue.assetNum);
+      selectedAvailableBalance.value = tokensBalance.displayBalance;
+    } catch {} // TODO: Move this balance fetching logic to the components above
+  }
 });
 
 const handleMax = () => {
@@ -65,6 +80,8 @@ const handleMax = () => {
 };
 
 onMounted(() => {
+  if (model.value)
+    internalModel.value = model.value;
   if (props.token)
     selectedToken.value = props.token;
   if (props.variant === 'explicit' && props.availableBalance)
@@ -80,7 +97,7 @@ onMounted(() => {
     >
       Amount
     </Label>
-    <div :class="['relative flex rounded-md border items-center w-full transition-colors', internalModel ? (validationError ? 'border-red-500 focus-visible:ring-red-500' : 'border-green-500 focus-visible:ring-green-500') : '']">
+    <div :class="['relative flex rounded-md border-input border focus-within:ring-1 focus-within:ring-ring items-center w-full transition-colors', internalModel ? (validationError ? 'border-red-500 focus-visible:ring-red-500' : 'border-green-500 focus-visible:ring-green-500') : '']">
       <div :class="variant === 'selector' ? 'flex-1' : 'w-full'">
         <Input
           :id="id"
diff --git a/src/components/utilcards/ConfirmCreateAccountCard.vue b/src/components/utilcards/ConfirmCreateAccountCard.vue
index c2f78a5..d00ff7c 100644
--- a/src/components/utilcards/ConfirmCreateAccountCard.vue
+++ b/src/components/utilcards/ConfirmCreateAccountCard.vue
@@ -16,7 +16,9 @@ import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
 
-const settings = useSettingsStore();
+const settingsStore = useSettingsStore();
+
+const { settings } = storeToRefs(settingsStore);
 
 const creator = ref<string>('');
 const accountName = ref<string>('');
@@ -33,8 +35,14 @@ const router = useRouter();
 const wallet = useWalletStore();
 const hasWallet = computed(() => wallet.hasWallet);
 
+watch(settings, () => {
+  if (settings.value.account)
+    creator.value = `@${settings.value.account}`;
+
+}, { immediate: true });
+
 onMounted(() => {
-  creator.value = settings.account ? `@${settings.account}` : '';
+  creator.value = settings.value.account ? `@${settings.value.account}` : '';
 
   accountName.value = router.currentRoute.value.query.acc as string ?? '';
   memoKey.value = router.currentRoute.value.query.memo as string ?? '';
@@ -56,7 +64,7 @@ const createAccount = async () => {
     const tx = await wax.createTransaction();
     const { median_props: { account_creation_fee } } = await wax.api.database_api.get_witness_schedule({});
     const commonAccountCreateConfig = {
-      creator: settings.account!,
+      creator: settings.value.account!,
       new_account_name: accountName.value.startsWith('@') ? accountName.value.slice(1) : accountName.value,
       memo_key: memoKey.value,
       owner: {
@@ -89,7 +97,7 @@ const createAccount = async () => {
       if (enableDelegation.value) {
         tx.pushOperation({
           delegate_vesting_shares_operation: {
-            delegator: settings.account!,
+            delegator: settings.value.account!,
             delegatee: accountName.value.startsWith('@') ? accountName.value.slice(1) : accountName.value,
             vesting_shares: wax.vestsCoins(delegationAmount.value)
           }
@@ -113,7 +121,7 @@ const createAccount = async () => {
     }
 
 
-    await wallet.createWalletFor(settings.settings, 'active');
+    await wallet.createWalletFor(settings.value, 'active');
     await wallet.wallet!.signTransaction(tx);
     await wax.broadcast(tx);
 
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index fa0bbce..075c477 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -26,12 +26,10 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import AddToGoogleWallet from '@/components/wallet/AddToGoogleWallet.vue';
 import { useTokensStore, type CTokenBalanceDisplay, type CTokenPairBalanceDefinition, type TokenStoreApiResponse } from '@/stores/tokens.store';
-import { parseAssetAmount } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
-
 const router = useRouter();
 const tokensStore = useTokensStore();
 
@@ -124,9 +122,6 @@ const transferTokens = async () => {
   try {
     isTransferLoading.value = true;
 
-    // Convert decimal amount to base units (add precision zeros)
-    const baseAmount = parseAssetAmount(transferAmount.value, selectedTokenForTransfer.value?.precision || 0);
-
     // Wait for transaction status
     await waitForTransactionStatus(
       () => ([{
@@ -134,7 +129,7 @@ const transferTokens = async () => {
           receiver: transferRecipient.value,
           sender: CTokensProvider.getOperationalPublicKey()!,
           amount: {
-            amount: baseAmount,
+            amount: transferAmount.value,
             nai: selectedTokenForTransfer.value?.nai || '',
             precision: selectedTokenForTransfer.value?.precision || 0
           },
@@ -170,15 +165,12 @@ const transformTokens = async () => {
   try {
     isTransformLoading.value = true;
 
-    // Convert decimal amount to base units (add precision zeros)
-    const baseAmount = parseAssetAmount(transformAmount.value, selectedToken.value!.precision!);
-
     // Wait for transaction status
     await waitForTransactionStatus(
       () => ([{
         token_transform_operation: {
           amount: {
-            amount: baseAmount,
+            amount: transformAmount.value,
             nai: selectedToken.value!.nai!,
             precision: selectedToken.value!.precision!
           },
@@ -223,7 +215,7 @@ const setMaxTransformAmount = async () => {
 };
 
 // Initialize
-onMounted(async () => {
+onMounted(() => {
   loadAccountBalances();
 });
 </script>
@@ -601,7 +593,7 @@ onMounted(async () => {
                     <!-- Total Balance -->
                     <td class="p-4 text-right">
                       <div class="font-semibold tabular-nums">
-                        {{ balance.liquid.balance + balance.vesting.balance /* Maybe beautify this display somehow */ }}
+                        {{ balance.displayTotal }}
                       </div>
                     </td>
 
@@ -776,6 +768,7 @@ onMounted(async () => {
             <TokenAmountInput
               v-if="selectedTokenForTransfer"
               v-model="transferAmount"
+              variant="explicit"
               :token="selectedTokenForTransfer"
               :disabled="isTransferLoading"
               :available-balance="selectedTokenForTransfer!.displayBalance"
@@ -868,6 +861,7 @@ onMounted(async () => {
             <TokenAmountInput
               v-if="selectedToken"
               v-model="transformAmount"
+              variant="explicit"
               :token="selectedToken"
               :disabled="isTransformLoading"
               :available-balance="selectedToken.displayBalance"
diff --git a/src/pages/tokens/pos/send.vue b/src/pages/tokens/pos/send.vue
index 2ac8293..32782a0 100644
--- a/src/pages/tokens/pos/send.vue
+++ b/src/pages/tokens/pos/send.vue
@@ -28,7 +28,6 @@ const isLoading = ref(true);
 
 // Get parameters from route query
 const assetNum = computed(() => Number(route.query['asset-num']));
-const precision = computed(() => route.query.precision as string);
 const receiverKey = computed(() => route.query.to as string || CTokensProvider.getOperationalPublicKey());
 const queryAmount = computed(() => route.query.amount as string | undefined);
 const queryMemo = computed(() => route.query.memo as string | undefined);
@@ -110,7 +109,7 @@ watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
     await tokensStore.loadBalances();
     await fetchHTMUserData();
 
-    if (assetNum.value && precision.value)
+    if (assetNum.value)
       await loadTokenDetails();
   } catch (e) {
     toastError('Error reloading data after login', e);
@@ -129,7 +128,7 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
     await tokensStore.loadBalances();
     await fetchHTMUserData();
 
-    if (assetNum.value && precision.value)
+    if (assetNum.value)
       await loadTokenDetails();
   } catch (e) {
     toastError('Error reloading data after tokensStore.wallet changed', e);
@@ -209,7 +208,6 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
           :query-amount="queryAmount"
           :query-memo="queryMemo"
           :asset-num="assetNum"
-          :precision="precision"
         />
       </div>
     </div>
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index 1403dbb..c325b36 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -18,10 +18,11 @@ import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useTokensStore, type CTokenBalanceDisplay, type CTokenDefinitionDisplay, type CTokenUserRanked } from '@/stores/tokens.store';
+import { formatAsset, useTokensStore, type CTokenBalanceDisplay, type CTokenDefinitionDisplay, type CTokenUserRanked } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
+import { getWax } from '@/stores/wax.store';
 import { copyText } from '@/utils/copy';
-import { isVesting, toLiquid, toVesting, parseAssetAmount } from '@/utils/nai-tokens';
+import { isVesting, toLiquid, toVesting } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import { isValidPublicKey, validateAmountPrecision } from '@/utils/validators';
@@ -112,10 +113,21 @@ const loadTokenDetails = async () => {
 
     // Load user balance if user is logged in
     if (isLoggedIn.value) {
-      userBalance.value = await tokensStore.getBalanceSingleToken(
-        CTokensProvider.getOperationalPublicKey()!,
-        assetNum.value
-      );
+      try {
+        userBalance.value = await tokensStore.getBalanceSingleToken(
+          CTokensProvider.getOperationalPublicKey()!,
+          assetNum.value
+        );
+      } catch {
+        const wax = await getWax();
+
+        userBalance.value = {
+          ...token.value,
+          balance: 0n,
+          displayBalance: formatAsset(wax, '0', token.value.precision || 0, token.value.symbol || token.value.name)
+        };
+      } // Do not fail when user has no balance for this token
+      // XXX: Function above should not fail when user has no balance ^^ API CHANGE
     }
   } catch (error) {
     toastError('Failed to load token details', error);
@@ -166,15 +178,12 @@ const handleTransfer = async () => {
   try {
     isTransferring.value = true;
 
-    // Convert decimal amount to base units (add precision zeros)
-    const baseAmount = parseAssetAmount(transferForm.value.amount, token.value.precision || 0);
-
     // Wait for transaction status
     await waitForTransactionStatus(
       () => ([{
         token_transfer_operation: {
           amount: {
-            amount: baseAmount,
+            amount: transferForm.value.amount,
             nai: token.value!.nai!,
             precision: token.value!.precision || 0
           },
@@ -245,9 +254,6 @@ const handleStake = async () => {
   try {
     isStaking.value = true;
 
-    // Convert decimal amount to base units (add precision zeros)
-    const baseAmount = parseAssetAmount(stakeForm.value.amount, token.value.precision || 0);
-
     let nai = token.value!.nai!;
     const isVestingNai = isVesting(token.value.nai!, token.value.precision || 0);
     if (isVestingNai)
@@ -260,7 +266,7 @@ const handleStake = async () => {
           holder: CTokensProvider.getOperationalPublicKey()!,
           receiver: stakeForm.value.receiver || undefined,
           amount: {
-            amount: baseAmount,
+            amount: stakeForm.value.amount,
             nai,
             precision: token.value!.precision || 0
           }
@@ -327,9 +333,6 @@ const handleUnstake = async () => {
   try {
     isUnstaking.value = true;
 
-    // Convert decimal amount to base units (add precision zeros)
-    const baseAmount = parseAssetAmount(stakeForm.value.amount, token.value.precision || 0);
-
     let nai = token.value!.nai!;
     const isVestingNai = isVesting(token.value.nai!, token.value.precision || 0);
     if (!isVestingNai)
@@ -342,7 +345,7 @@ const handleUnstake = async () => {
           holder: CTokensProvider.getOperationalPublicKey()!,
           receiver: stakeForm.value.receiver || undefined,
           amount: {
-            amount: baseAmount,
+            amount: stakeForm.value.amount,
             nai,
             precision: token.value!.precision || 0
           }
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index 5a14255..956fbcd 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -58,11 +58,15 @@ export interface CTokenDefinitionDisplay extends CTokenDisplayBase {
 export interface CTokenPairBalanceDefinition {
   liquid: CTokenBalanceDisplay;
   vesting: CTokenBalanceDisplay;
+  total: bigint;
+  displayTotal: string;
+  isNft: boolean;
 }
 
 export interface CTokenPairDefinition {
   liquid: CTokenDefinitionDisplay;
   vesting: CTokenDefinitionDisplay;
+  isNft: boolean;
 }
 
 export interface TokenStoreApiResponse<T> {
@@ -109,7 +113,7 @@ const transformToApiResponseFormat = <ActualDataResponse, T extends {
 
 const cTokensProvider = shallowRef<CTokensProvider | undefined>(undefined);
 
-const formatAsset = (wax: IWaxBaseInterface, value: string | bigint, precision: number, name?: string): string => {
+export const formatAsset = (wax: IWaxBaseInterface, value: string | bigint, precision: number, name?: string): string => {
   const formatted = wax.formatter.formatNumber(value, precision);
   return name ? `${formatted} ${name}` : formatted;
 };
@@ -186,9 +190,14 @@ export const useTokensStore = defineStore('tokens', {
           const liquid = transformTokenBalanceToDisplayFormat(wax, token.liquid as Required<CtokensAppBalance>, token.is_nft!);
           const vesting = transformTokenBalanceToDisplayFormat(wax, token.vesting as Required<CtokensAppBalance>, token.is_nft!);
 
+          const total = liquid.balance + vesting.balance;
+          const displayTotal = formatAsset(wax, total, liquid.precision, liquid.symbol || liquid.name);
+
           return {
             liquid,
             vesting,
+            total,
+            displayTotal,
             isNft: token.is_nft!
           };
         });
diff --git a/src/utils/validators.ts b/src/utils/validators.ts
index d63d939..1c5d9dc 100644
--- a/src/utils/validators.ts
+++ b/src/utils/validators.ts
@@ -8,62 +8,37 @@
  * @param precision - Maximum number of decimal places allowed
  * @returns Validation result with error message and parsed amount if valid
  */
-export function validateAmountPrecision (
+export const validateAmountPrecision = (
   amount: string,
   precision: number
-): { isValid: boolean; error?: string; parsedAmount?: string } {
+): { isValid: boolean; error?: string; } => {
   try {
-    // Remove thousand separators (commas, spaces) to get clean number
-    const cleanAmount = amount.replace(/[,\s]/g, '');
+    if (amount === '')
+      return { isValid: true };
 
-    // Check if amount contains only valid characters (digits, decimal point)
-    if (!/^\d*\.?\d*$/.test(cleanAmount))
-      return { isValid: false, error: 'Amount must contain only digits and decimal point' };
 
-    // Check if amount is a valid number
-    const numAmount = parseFloat(cleanAmount);
-    if (isNaN(numAmount) || numAmount <= 0)
-      return { isValid: false, error: 'Amount must be a positive number' };
+    const cleanAmount = amount.replace(/[,\s]/g, '');
+    const [integerPart, decimalPart, anyMore] = cleanAmount.split('.');
+    if (anyMore !== undefined)
+      return { isValid: false, error: 'Invalid amount format' };
 
-    // Check for infinity
-    if (!isFinite(numAmount))
-      return { isValid: false, error: 'Amount value is too large' };
 
-    // Check decimal places - count actual decimal places in input
-    const decimalIndex = cleanAmount.indexOf('.');
-    if (decimalIndex !== -1) {
-      const decimalPlaces = cleanAmount.length - decimalIndex - 1;
-      if (decimalPlaces > precision) {
-        return {
-          isValid: false,
-          error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.`
-        };
-      }
-    }
+    const decimal = BigInt(decimalPart || 0);
+    const integer = BigInt(integerPart || 0);
 
-    // Convert to base units to check for overflow
-    const multiplier = Math.pow(10, precision);
-    const baseUnits = numAmount * multiplier;
+    if (integer < 0n || (integer === 0n && decimal <= 0n))
+      return { isValid: false, error: 'Amount must be a positive number' };
 
-    // Check for overflow - ensure it's within safe integer range
-    const MAX_SAFE_BASE_UNITS = Number.MAX_SAFE_INTEGER;
-    if (baseUnits > MAX_SAFE_BASE_UNITS)
-      return { isValid: false, error: 'Amount is too large and would cause overflow' };
 
-    // Ensure conversion to base units produces an integer (no precision loss)
-    const roundedBaseUnits = Math.round(baseUnits);
-    if (Math.abs(baseUnits - roundedBaseUnits) > 0.0001) {
-      return {
-        isValid: false,
-        error: `Amount precision mismatch. Please use at most ${precision} decimal places.`
-      };
-    }
+    if (decimal !== 0n && (decimalPart?.length || 0) > precision)
+      return { isValid: false, error: `Amount has too many decimal places. Maximum ${precision} decimal places allowed for this token.` };
 
-    return { isValid: true, parsedAmount: cleanAmount };
+
+    return { isValid: true };
   } catch {
     return { isValid: false, error: 'Invalid amount format' };
   }
-}
+};
 
 /**
  * Validates Hive public key format
@@ -81,7 +56,7 @@ export function isValidPublicKey (key: string): boolean {
  * @param url - The URL to validate
  * @returns True if the URL is valid or empty
  */
-export function isValidUrl (url: string): boolean {
+export const isValidUrl = (url: string): boolean => {
   if (!url) return true; // Empty URL is valid (optional field)
   try {
     new URL(url);
@@ -89,14 +64,14 @@ export function isValidUrl (url: string): boolean {
   } catch {
     return false;
   }
-}
+};
 
 /**
  * Validates token symbol format
  * @param symbol - The token symbol to validate
  * @returns Validation result with error message
  */
-export function validateTokenSymbol (symbol: string): { isValid: boolean; message: string } {
+export const validateTokenSymbol = (symbol: string): { isValid: boolean; message: string } => {
   const trimmed = symbol.trim();
   if (trimmed.length === 0)
     return { isValid: false, message: '' };
@@ -107,27 +82,31 @@ export function validateTokenSymbol (symbol: string): { isValid: boolean; messag
   if (!/^[A-Z]+$/i.test(trimmed))
     return { isValid: false, message: 'Symbol must contain only letters' };
   return { isValid: true, message: 'Valid symbol' };
-}
+};
 
 /**
  * Validates token precision (number of decimal places)
  * @param precision - The precision value to validate
  * @returns True if precision is valid (0-12)
  */
-export function isValidTokenPrecision (precision: number | string): boolean {
+export const isValidTokenPrecision = (precision: number | string): boolean => {
   const prec = typeof precision === 'string' ? parseInt(precision) : precision;
   return !isNaN(prec) && prec >= 0 && prec <= 12;
-}
+};
 
 /**
  * Validates token supply amount
  * @param supply - The supply value to validate
  * @returns True if supply is valid (positive and within safe range)
  */
-export function isValidTokenSupply (supply: string): boolean {
+export const isValidTokenSupply = (supply: string): boolean => {
   if (!supply || supply.trim() === '') return false;
-  const parsed = parseInt(supply);
-  if (isNaN(parsed) || parsed <= 0) return false;
-  // Maximum safe value for int64
-  return BigInt(supply) <= BigInt('9223372036854775807');
-}
+  try {
+    const parsed = BigInt(supply);
+    if (parsed <= 0n) return false;
+    // Maximum safe value for (signed) int64
+    return parsed <= BigInt('9223372036854775807');
+  } catch {
+    return false;
+  }
+};
-- 
GitLab


From 63f59d289bb8cbb2d481dcb799637a5f4ad4d8cd Mon Sep 17 00:00:00 2001
From: Bartek Wrona <wrona@syncad.com>
Date: Sat, 22 Nov 2025 15:39:13 +0100
Subject: [PATCH 102/102] Added ability to start backend api proxy in official
 deployment, and allow access the app and backend APIs from single endpoint.

---
 .gitlab-ci.yml                                | 15 +++-
 .../ci-helpers/backend-api-proxy/compose.yml  |  9 +++
 .../backend-api-proxy/conf/nginx.conf         | 68 +++++++++++++++++++
 .../backend-api-proxy/start_api_proxy.sh      | 32 +++++++++
 4 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 scripts/ci-helpers/backend-api-proxy/compose.yml
 create mode 100644 scripts/ci-helpers/backend-api-proxy/conf/nginx.conf
 create mode 100755 scripts/ci-helpers/backend-api-proxy/start_api_proxy.sh

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 9aa24ef..7da38b3 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -157,16 +157,29 @@ deploy_prototyping_environment:
   stage: deploy
   needs:
     - push_protected_app_image
+
   variables:
     IMAGE_NAME: "${APP_IMAGE_NAME}"
     CONTAINER_NAME: "hive_bridge_prototyping_dev_deployment"
-    PORT: 8155 # prototyping.openhive.network (mirrornet)(port 8155)
+    EXPOSED_PORT: 8155 # prototyping.openhive.network (mirrornet)(port 8155)
+    PORT: 18155 # TODO swicth to full-compose application setup to eliminate another port allocation
     DEPLOYMENT_ENV_FILE: "MIRRORNET_PROTOTYPING_DEV_DEPLOYMENT_ENV"
+
+    REST_BACKEND:  "${PROTOTYPING_REST_BACKEND}"
+    HIVED_BACKEND: "${PROTOTYPING_HIVED_BACKEND}"
+    FRONTEND_APP:  "${PROTOTYPING_FRONTEND_APP}"
+
   environment:
     name: prototyping-dev-mirrornet
     url: https://prototyping.openhive.network
     on_stop: stop_prototyping_environment
 
+  script:
+    # First start helper proxy, which redirects traffic to backend and frontend accordingly
+    # This way we can use publicly one endpoint: https://prototyping.openhive.network both for the app like pointing backend
+    - ./scripts/ci-helpers/backend-api-proxy/start_api_proxy.sh
+    - !reference [.webapp_deploy_template, script]
+
   rules:
     - if: '$CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH && $CI_COMMIT_REF_PROTECTED == "true"'
       when: manual
diff --git a/scripts/ci-helpers/backend-api-proxy/compose.yml b/scripts/ci-helpers/backend-api-proxy/compose.yml
new file mode 100644
index 0000000..3849610
--- /dev/null
+++ b/scripts/ci-helpers/backend-api-proxy/compose.yml
@@ -0,0 +1,9 @@
+name: "htm-backend-api-proxy"
+services:
+  nginx:
+    image: nginx:1.29.3
+    volumes:
+      - ./conf/nginx.conf:/etc/nginx/nginx.conf:ro
+      - ./conf/upstream_vars.conf:/etc/nginx/upstream_vars.conf:ro
+    ports:
+      - ${EXPOSED_PORT:-18000}:80
diff --git a/scripts/ci-helpers/backend-api-proxy/conf/nginx.conf b/scripts/ci-helpers/backend-api-proxy/conf/nginx.conf
new file mode 100644
index 0000000..6990925
--- /dev/null
+++ b/scripts/ci-helpers/backend-api-proxy/conf/nginx.conf
@@ -0,0 +1,68 @@
+#
+# Homepage and endpoints of the API "custom tokens".
+#
+worker_processes  5;
+worker_rlimit_nofile 8192;
+
+events {
+  worker_connections 4096;
+}
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    error_log /dev/stdout info;
+    access_log /dev/stdout;
+
+    #access_log  /var/log/nginx/access.log  main;
+    #error_log   /var/log/nginx/error.log;
+
+    # SSL Settings
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384;
+    ssl_prefer_server_ciphers off;
+    ssl_session_cache shared:SSL:10m;
+    ssl_session_timeout 10m;
+
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_hide_header Content-Location;
+    proxy_set_header  Connection "";
+    proxy_http_version 1.1;
+    proxy_pass_request_headers      on;
+
+    server {
+        listen 0.0.0.0:80 default_server;
+        server_name _;
+
+        include "upstream_vars.conf";
+
+        # Every ctokens-api request pass directly to the rest backend
+        location ~ ^/ctokens-api/ {
+            proxy_pass  $postgrest_backend;  # Assume such variable is defined earlier i.e. via nginx cmdline
+            break;
+        }
+
+        location / {
+            if ($request_method = POST) {
+                proxy_pass $hive_backend;
+                break;
+            }
+            
+            # to supplement CORS headers, handled there
+            if ($request_method = OPTIONS) {
+                proxy_pass $hive_backend;
+                break;
+            }
+
+            # All other requests pass to the application
+            proxy_pass $frontend_app;
+        }
+    }
+}
+
diff --git a/scripts/ci-helpers/backend-api-proxy/start_api_proxy.sh b/scripts/ci-helpers/backend-api-proxy/start_api_proxy.sh
new file mode 100755
index 0000000..3237258
--- /dev/null
+++ b/scripts/ci-helpers/backend-api-proxy/start_api_proxy.sh
@@ -0,0 +1,32 @@
+#! /bin/bash
+set -euo pipefail
+
+SCRIPTPATH="$( cd -- "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )"
+
+print_help () {
+    cat <<-EOF
+Usage: $0 
+  This script starts a proxy pointed by environtment variables:
+    - REST_BACKEND e.g.: http://ip:port
+    - HIVE_BACKEND e.g.: http://ip:port
+    - FRONTEND_APP e.g.: http://ip:port
+    - EXPOSED_PORT a port exposed from the executing host e.g.: 18000
+  --help|-h|-?                          Display this help screen and exit
+EOF
+}
+
+_TST_EXPOSED_PORT=${EXPOSED_PORT:?"Missing EXPOSED_PORT variable"}
+_TST_REST_BACKEND=${REST_BACKEND:?"Missing REST_BACKEND variable"}
+_TST_HIVED_BACKEND=${HIVED_BACKEND:?"Missing HIVED_BACKEND variable"}
+_TST_FRONTEND_APP=${FRONTEND_APP:?"Missing FRONTEND_APP variable"}
+
+CONF_FILE="${SCRIPTPATH}/conf/upstream_vars.conf"
+
+echo "set \$postgrest_backend ${REST_BACKEND};" > "${CONF_FILE}"
+echo "set \$hive_backend ${HIVED_BACKEND};" >> "${CONF_FILE}"
+echo "set \$frontend_app ${FRONTEND_APP};" >> "${CONF_FILE}"
+
+pushd "${SCRIPTPATH}"
+
+docker compose down --remove-orphans || true
+docker compose up --force-recreate --wait
-- 
GitLab