feat: show v1 tuna balance

src/lib/components/ConnectButton.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import type { Cardano } from 'translucent-cardano';
+  import { fromText, type Cardano } from 'translucent-cardano';
 
   import geroIcon from '$lib/assets/geroicon.png';
-  import { fetchWalletData } from '$lib/utils/fetchWalletData';
   import fortunaIconBlack from '$lib/assets/fortunaIconBlack.png';
   import { walletApi, v1TunaAmount, wallet, userAddress, translucent } from '$lib/store';
+  import { V1_TUNA_SUBJECT } from '$lib/constants';
 
   let open = false;
 
@@ -38,22 +38,28 @@
 
     $walletApi = await $wallet?.enable();
 
+    translucent.selectWallet($walletApi!);
+
     open = false;
   }
 
-  $: if ($walletApi && $translucent) {
+  $: if ($walletApi) {
     (async () => {
       //const stakeAddr = await walletApi.getRewardAddresses();
       //const stakeAddrHex = stakeAddr[0];
 
       // the stakeAddrHex value needs to be converted to bench32
       // and passed in the function below replacing userAddr
-      $translucent.selectWallet($walletApi);
 
-      $userAddress = await $translucent.wallet.address();
+      $userAddress = await translucent.wallet.address();
 
       console.log('User address:', $userAddress);
-      console.log(await $translucent.utxosAt($userAddress));
+
+      const utxos = await translucent.utxosAt($userAddress);
+
+      $v1TunaAmount = utxos.reduce((acc, u) => {
+        return acc + (u.assets[V1_TUNA_SUBJECT] ?? 0n);
+      }, 0n);
     })();
   }
 
@@ -85,12 +91,12 @@
     </div>
     <ul
       tabIndex={0}
-      class="dropdown-content bg-slate-800 z-[1] menu p-2 shadow rounded-box w-52 gap-1">
+      class="dropdown-content bg-slate-800 z-[1] menu md:-ml-36 p-2 shadow rounded-box w-52 gap-1">
       {#if $v1TunaAmount > 0}
         <li class="mt-2">
           <button class="indicator w-full btn btn-sm btn-accent">
-            <img src={fortunaIconBlack} alt="fortuna icon" class="w-6 h-6 justify-center" />
-            {$v1TunaAmount.toLocaleString('en-US')}
+            <img src={fortunaIconBlack} alt="fortuna icon" class="w-4 h-4 justify-center" />
+            {($v1TunaAmount / 100_000_000n).toLocaleString('en-US')}
           </button>
         </li>
       {:else}
@@ -128,7 +134,7 @@
       {/if}
 
       <li class="mt-4">
-        <button class="btn btn-danger" on:click={disconnect}>Disconnect </button>
+        <button class="btn btn-danger" on:click={disconnect}>Disconnect</button>
       </li>
     </ul>
   </div>

src/lib/constants.ts

@@ -0,0 +1,5 @@
+import { fromText } from 'translucent-cardano';
+
+export const V1_TUNA_POLICY_ID = '279f842c33eed9054b9e3c70cd6a3b32298259c24b78b895cb41d91a';
+export const V1_TUNA_ASSET_NAME = fromText('TUNA');
+export const V1_TUNA_SUBJECT = V1_TUNA_POLICY_ID + V1_TUNA_ASSET_NAME;

src/lib/store/index.ts

@@ -1,8 +1,9 @@
+import { createTranslucent } from '$lib/utils/provider';
 import { writable, type Writable } from 'svelte/store';
-import type { Translucent, Cardano, WalletApi } from 'translucent-cardano';
+import type { Cardano, WalletApi } from 'translucent-cardano';
 
-export const v1TunaAmount: Writable<number> = writable(0);
+export const v1TunaAmount: Writable<bigint> = writable(0n);
 export const walletApi: Writable<WalletApi | undefined> = writable(undefined);
 export const wallet: Writable<Cardano[''] | undefined> = writable(undefined);
 export const userAddress: Writable<string | undefined> = writable(undefined);
-export const translucent: Writable<Translucent | undefined> = writable(undefined);
+export const translucent = await createTranslucent();

src/routes/+layout.svelte

@@ -1,21 +1,8 @@
 <script>
   import '../app.css';
 
-  import { onMount } from 'svelte';
-  import { browser } from '$app/environment';
-
   import Navbar from '$lib/components/Navbar.svelte';
   import fortunaBackground from '$lib/assets/fortuna-bg.png';
-  import { createTranslucent } from '$lib/utils/provider';
-  import { translucent } from '$lib/store';
-
-  onMount(async () => {
-    if (!browser) return;
-
-    const t = await createTranslucent();
-
-    $translucent = t;
-  });
 </script>
 
 <Navbar />