update

scobru · Oct 14, 2024 · bcda520 · bcda520
1 parent 56cc126
commit bcda520
Show file tree

Hide file tree

Showing 20 changed files with 859 additions and 652 deletions.
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
@@ -50,6 +50,7 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@leodog896/svelte-french-toast": "^1.3.1",
     "@rollup/plugin-commonjs": "^28.0.0",
+    "@tailwindcss/typography": "^0.5.15",
     "@tanstack/svelte-query": "^5.28.9",
     "@uniswap/sdk-core": "^4.2.0",
     "@uniswap/v2-sdk": "^4.3.0",

diff --git a/packages/svelte/src/app.pcss b/packages/svelte/src/app.pcss
@@ -17,7 +17,6 @@ p {
   --secondary-color: #50e3c2;
   --background-color: #f5f7fa;
   --text-color: #333;
-  --font-family: "Montserrat", sans-serif;
 }
 
 body {
@@ -31,9 +30,7 @@ h2,
 h3,
 h4,
 h5,
-h6 {
-  font-family: "Montserrat", sans-serif;
-}
+
 
 @keyframes fadeIn {
   from {

diff --git a/packages/svelte/src/lib/assets/logo.svg b/packages/svelte/src/lib/assets/logo.svg
diff --git a/packages/svelte/src/lib/components/Footer.svelte b/packages/svelte/src/lib/components/Footer.svelte
@@ -10,7 +10,7 @@
   const isLocalNetwork = $derived(targetNetwork.id === hardhat.id);
 </script>
 
-<div class="mb-11 min-h-0 px-1 py-5 lg:mb-0">
+<div class="mb-11 min-h-0 px-1 py-5 lg:mb-0 ">
   <div>
     <div class="pointer-events-none fixed bottom-0 left-0 z-10 flex w-full items-center justify-between p-4">
       <div class="pointer-events-auto flex flex-col gap-2 md:flex-row">

diff --git a/packages/svelte/src/lib/components/Header.svelte b/packages/svelte/src/lib/components/Header.svelte
@@ -66,10 +66,10 @@
         onclick={() => {
           isDrawerOpen = false;
         }}
-        class="hover:bg-secondary focus:!bg-secondary active:!text-neutral grid grid-flow-col gap-2 rounded-full px-3 py-1.5 text-sm hover:shadow-md {$isCurrentPage(
+        class="hover:!bg-ableton-light-blue text-sm focus:!bg-ableton-orange active:!text-secondary-content  grid grid-flow-col gap-2  px-3 py-1.5  hover:text-secondary-content {$isCurrentPage(
           href,
         )
-          ? 'bg-secondary shadow-md'
+          ? 'bg-ableton-beige  text-black'
           : ''}"
       >
         {#if icon}
@@ -81,12 +81,12 @@
   {/each}
 {/snippet}
 
-<div class="navbar shadow-secondary sticky top-0 z-20 min-h-0 flex-shrink-0 justify-between px-0 sm:px-2 lg:static">
+<div class="navbar sticky top-0 z-20 min-h-0 flex-shrink-0 justify-between px-0 sm:px-2 lg:static text-base-content  font-semibold       ">
   <div class="navbar-start w-auto lg:w-1/2">
     <div class="dropdown lg:hidden" bind:this={burgerMenu}>
       <button
         tabIndex={0}
-        class="btn btn-ghost ml-1 {isDrawerOpen ? 'hover:bg-secondary' : 'hover:bg-transparent'}"
+        class="btn btn-ghost ml-1 text-base-content {isDrawerOpen ? 'hover:bg-ableton-light-blue' : 'hover:bg-transparent'}"
         onclick={() => {
           isDrawerOpen = !isDrawerOpen;
         }}
@@ -100,9 +100,10 @@
       {/if}
     </div>
     <a href="/" class="ml-4 mr-6 hidden shrink-0 items-center gap-2 lg:flex">
-      <div class="flex flex-col">
-        <span class="text-3xl font-bold leading-tight">SE-2Gun </span>
-        <!--  <span class="text-xs">Decentralized Dev Stack</span> -->
+      <div class="flex flex-row">
+        <img src={logo} class="h-10 w-10" />
+<!--         <span class="text-xl font-bold leading-tight">SE-2Gun </span>
+ -->        <!--  <span class="text-xs">Decentralized Dev Stack</span> -->
       </div>
     </a>
     <ul class="menu menu-horizontal hidden gap-2 px-1 font-semibold lg:flex lg:flex-nowrap">

diff --git a/packages/svelte/src/lib/components/ScaffoldEthApp.svelte b/packages/svelte/src/lib/components/ScaffoldEthApp.svelte
@@ -30,10 +30,8 @@
 
 <div class="flex min-h-screen flex-col">
   <Header />
-
-  <main class="relative flex flex-1 flex-col">
+  <main class="">
     <slot />
   </main>
-
   <Footer />
 </div>
diff --git a/packages/svelte/src/lib/components/SwitchTheme.svelte b/packages/svelte/src/lib/components/SwitchTheme.svelte
@@ -7,7 +7,7 @@
   const { isDarkMode, toggle } = $derived.by(createDarkMode());
 
   $effect(() => {
-    document.body.setAttribute("data-theme", isDarkMode ? "dark" : "light");
+    document.body.setAttribute("data-theme", isDarkMode ? "abletonDark" : "abletonLight");
   });
 </script>
 

diff --git a/packages/svelte/src/lib/components/gun/account/AccountAvatar.svelte b/packages/svelte/src/lib/components/gun/account/AccountAvatar.svelte
@@ -1,19 +1,25 @@
 <script lang="ts">
     import { useAvatar } from '$lib/gun/avatar';
     import { useUser } from '$lib/gun/user';
-    import { onMount } from 'svelte';
-    
-    export let pub: string = '';
-    export let size: number = 42;
+    import { onMount, createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+    const { user } = useUser();
+
+    export let pub: string | undefined = undefined;
+    export let size: number = 96;
     export let border: number = 2;
     
-    const { user } = useUser();
     let isOwnAvatar = false;
     let fileInput: HTMLInputElement;
+    let avatarLoaded = false;
     
-    $: ({ avatar, blink, uploadAvatar, uploadStatus } = useAvatar(pub, size));
+    $: ({ avatar, blink, uploadAvatar, uploadStatus } = useAvatar(pub || $user?.pub, size));
     
     onMount(() => {
+        if (!pub && $user?.pub) {
+            pub = $user.pub;
+        }
         isOwnAvatar = $user.pub === pub;
         console.log("isOwnAvatar:", isOwnAvatar, "$user.pub:", $user.pub, "pub:", pub);
     });
@@ -22,40 +28,46 @@
         const file = (event.target as HTMLInputElement).files?.[0];
         if (file) await uploadAvatar(file);
     }
-    </script>
-
-    <div class="flex flex-col items-center justify-center relative my-10 w-fit mx-auto">
-        {#if pub}
-            <img
-                class="border rounded-full overflow-hidden transition duration-500 ease-out"
-                style="border-color: {$blink ? 'accent' : 'transparent'}; border-width: {border}px;"
-                width={size}
-                height={size}
-                src={$avatar}
-                alt="Avatar"
+
+    function onAvatarLoad() {
+        avatarLoaded = true;
+        dispatch('load');
+    }
+</script>
+
+<div class="flex flex-col items-center justify-center relative w-fit">
+    {#if pub || $user?.pub}
+        <img
+            class="border rounded-full overflow-hidden transition duration-500 ease-out"
+            style="border-color: {$blink ? 'accent' : 'transparent'}; border-width: {border}px;"
+            width={size}
+            height={size}
+            src={$avatar}
+            alt="Avatar"
+            on:load={onAvatarLoad}
+        />
+        {#if isOwnAvatar && avatarLoaded}
+            <button
+                class="absolute bottom-0 right-0 bg-accent text-white rounded-full p-1 hover:bg-accent/80"
+                on:click={() => fileInput.click()}
+            >
+                <div class="i-la-camera" style="font-size: {size / 3}px;"></div>
+            </button>
+            <input
+                bind:this={fileInput}
+                type="file"
+                accept="image/*"
+                on:change={handleFileChange}
+                class="hidden"
             />
-            {#if isOwnAvatar}
-                <button
-                    class="absolute bottom-0 right-0 bg-accent text-white rounded-full p-1 hover:bg-accent/80"
-                    on:click={() => fileInput.click()}
-                >
-                    <div class="i-la-camera" style="font-size: {size / 3}px;"></div>
-                </button>
-                <input
-                    bind:this={fileInput}
-                    type="file"
-                    accept="image/*"
-                    on:change={handleFileChange}
-                    class="hidden"
-                />
-                {#if $uploadStatus}
-                    <div class="mt-2 text-sm text-gray-600">{$uploadStatus}</div>
-                {/if}
+            {#if $uploadStatus}
+                <div class="mt-2 text-sm text-gray-600">{$uploadStatus}</div>
             {/if}
-        {:else}
-            <div class="pb-2 px-1" style="font-size: {size}px;">
-                <div class="i-la-user"></div>
-            </div>
         {/if}
-        <slot></slot>
-    </div>
+    {:else}
+        <div class="pb-2 px-1" style="font-size: {size}px;">
+            <div class="i-la-user"></div>
+        </div>
+    {/if}
+    <slot></slot>
+</div>
diff --git a/packages/svelte/src/lib/components/gun/account/AccountProfile.svelte b/packages/svelte/src/lib/components/gun/account/AccountProfile.svelte
@@ -1,53 +1,59 @@
 <script lang="ts">
-    import { useAccount } from "$lib/gun/account";
     import { onMount } from "svelte";
     import { get } from "svelte/store";
     import { useUser } from "$lib/gun/user";
-  import AccountAvatar from "./AccountAvatar.svelte";
-    export let pub: string | undefined = "";
+    import AccountAvatar from "./AccountAvatar.svelte";
+    import { useAccount } from "$lib/gun/account";
 
+    let pub : string | undefined ;
     let { user } = useUser();
+    let { account } = useAccount(pub || $user?.pub);
+
     let globalAccount: any;
-    let { account } = useAccount(pub || user?.pub);
+
     globalAccount = account;
-    
+    console.log("account", globalAccount);
+
     let lastPulse = 0;
-    $: if ($globalAccount && $globalAccount.pulse !== lastPulse) {
+
+    if ($globalAccount && $globalAccount.pulse !== lastPulse) {
         lastPulse = $globalAccount.pulse;
         console.log("Pulse updated:", $globalAccount.pulse);
     }
     
-    $effect(() => {
-        if(user?.pub){
-        console.log("AccountProfile mounted", $globalAccount);
-        let { account } = useAccount(pub || user?.pub);
-        $globalAccount = account;
-        }
-    });
-
-    const fields = [
-        { key: 'pub', label: 'Public Key' },
+    const accountFields = [
         { key: 'color', label: 'Color' },
         { key: 'pulse', label: 'Pulse' },
         { key: 'blink', label: 'Blink' },
         { key: 'lastSeen', label: 'Last Seen' }
     ];
-</script>
 
-<div class="card w-96 bg-base-100 shadow-xl">
-    <AccountAvatar pub={$user?.pub as string} />
+    $: profileFields = $user.profile ? 
+        Object.entries($user.profile)
+            .filter(([key, value]) => 
+                key !== '#' && 
+                !key.startsWith('~') && 
+                typeof value !== 'object' &&
+                value !== null && 
+                value !== undefined
+            )
+            .map(([key, value]) => ({ key, label: key.charAt(0).toUpperCase() + key.slice(1), value }))
+        : [];
+</script>
 
+<div class="card w-90 bg-ableton-light-blue text-black rounded-none p-4 font-sans">
     <div class="card-body">
-        <h2 class="card-title">Account Information</h2>
-        {#if $globalAccount}
-            {#each fields as { key, label }}
-                <div class="form-control">
-                    <label class="label">
-                        <span class="label-text">{label}</span>
+        <h2 class="card-title text-black font-medium text-2xl">Account Information</h2>
+        <AccountAvatar pub={pub} />
+        {#if globalAccount}
+            {#each accountFields as { key, label }}
+                <div class="form-control gap-2">
+                    <label class="label ">
+                        <span class="label-text  text-black font-medium">{label}</span>
                     </label>
                     {#if key === 'color'}
                         <div class="flex items-center">
-                            <div class="w-6 h-6 rounded-full mr-2" style="background-color: {$globalAccount[key]};"></div>
+                            <div class="w-6 h-6 rounded-full " style="background-color: {$globalAccount[key]};"></div>
                             <span class="badge">{$globalAccount[key]}</span>
                         </div>
                     {:else if key === 'blink'}
@@ -59,12 +65,26 @@
                     {:else if key === 'pulse'}
                         <span class="badge badge-neutral">{$globalAccount[key]}</span>
                     {:else}
-                        <input type="text" readonly value={$globalAccount[key]} class="input input-bordered w-full max-w-xs text-xs" />
+                        <span  readonly class="w-full text-left  text-xs" >{$globalAccount[key]}</span>
                     {/if}
                 </div>
             {/each}
         {:else}
             <p class="text-center">Caricamento account...</p>
         {/if}
+
+        <h2 class="card-title text-black font-medium text-2xl mt-6">Profile Information</h2>
+        {#if profileFields.length > 0}
+            {#each profileFields as { key, label, value }}
+                <div class="form-control gap-2">
+                    <label class="label">
+                        <span class="label-text text-black font-medium">{label}</span>
+                    </label>
+                    <span readonly class="w-full text-left text-xs">{value}</span>
+                </div>
+            {/each}
+        {:else}
+            <p class="text-center">Nessuna informazione di profilo disponibile</p>
+        {/if}
     </div>
 </div>