Merge pull request #49 from ATOR-Development/leggo/phase-1/dev

2 pages, add menu

components/DashboardFooter.vue

@@ -103,15 +103,10 @@ const isOpen = ref(false);
         </div>
       </div>
       <div
-        class="text-sm text-gray-600 dark:text-gray-300 justify-self-center margin-auto"
+        class="text-sm text-gray-600 dark:text-gray-300 justify-self-center margin-auto w-[50%]"
       >
         Version: {{ version }} | Commit: {{ commitHash }}
       </div>
-      <div>
-        <div class="lg:hidden flex items-center gap-2">
-          <ButtonThemeToggle />
-        </div>
-      </div>
     </div>
   </footer>
 </template>

components/DashboardHeader.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { RouterLink } from 'vue-router';
+import { useMenuStore } from '@/stores/useMenuStore'; // Assuming you have this store
 import ButtonConnect from './ui-kit/ButtonConnect.vue';
 import ButtonMobileMenu from './ui-kit/ButtonMobileMenu.vue';
 import ButtonThemeToggle from './ui-kit/ButtonThemeToggle.vue';
@@ -15,27 +17,56 @@ const menuStore = useMenuStore();
     <div
       class="absolute dark:bg-gradient-to-b dark:from-zinc-900 dark:via-gray-900 bg-gradient-to-b from-slate-100 to-teal-50 w-full inset-0 dark:h-28 h-20 [mask-image:linear-gradient(to_bottom,black_90%,transparent)] lg:hidden"
     ></div>
-
     <div
       class="flex justify-between items-center px-6 pb-4 lg:pt-6 pt-4 relative"
     >
-      <div class="flex gap-2">
+      <div class="flex gap-2 items-center">
         <TitleAndLogo />
-        <h1 class="lg:hidden capitalize font-brand tracking-wider">ATOR</h1>
+        <h1 class="lg:hidden capitalize font-brand tracking-wider">ANyONe</h1>
       </div>
-
+      <nav class="flex-1">
+        <ul class="flex justify-center items-center space-x-4">
+          <li>
+            <RouterLink to="/">
+              <UButton variant="outline" class="nav-button">Home</UButton>
+            </RouterLink>
+          </li>
+          <li>
+            <RouterLink to="/relays">
+              <UButton variant="outline" class="nav-button">Relays</UButton>
+            </RouterLink>
+          </li>
+        </ul>
+      </nav>
       <div class="flex items-center gap-2">
         <ButtonMobileMenu />
       </div>
-
       <div class="lg:flex items-center hidden ml-auto mr-6">
         <ButtonConnect />
-        <!-- <WalletInput /> -->
       </div>
-
       <div class="lg:flex items-center gap-2 hidden">
         <ButtonThemeToggle />
       </div>
     </div>
   </header>
 </template>
+
+<style scoped>
+nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+nav ul li {
+  margin: 0;
+}
+
+.dark .router-link-active .nav-button {
+  background-color: #000;
+  color: white;
+}
+.router-link-active .nav-button {
+  background-color: #fff;
+  color: #000;
+}
+</style>

components/DataTableMyRelays/DataTableMyRelays.vue

@@ -6,6 +6,7 @@ import { config } from '@/config/wagmi.config';
 import { type RelayRow, type RelayTabType } from '@/types/relay';
 import { RELAY_COLUMS, TABS, VERBS } from '@/constants/relay';
 import { useMetricsStore } from '@/stores/useMetricsStore';
+import { useFacilitatorStore } from '@/stores/useFacilitatorStore';
 
 import Tabs from '../ui-kit/Tabs.vue';
 import Tooltip from '../ui-kit/Tooltip.vue';
@@ -25,6 +26,7 @@ const userStore = useUserStore();
 const registry = useRelayRegistry();
 const metricsStore = useMetricsStore();
 const registratorStore = useRegistratorStore();
+const facilitatorStore = useFacilitatorStore();
 
 const { allRelays, claimableRelays } = storeToRefs(userStore);
 const { address } = useAccount({ config });
@@ -242,7 +244,19 @@ const handleLockRemote = async () => {
 
   try {
     const register = useRegistrator();
-    await register?.lock(fingerPrintRegister.value, ethAddress.value);
+    const success = await register?.lock(fingerPrintRegister.value, ethAddress.value);
+    if (success != null && typeof success != typeof Error) {
+      registerModalOpen.value = false;
+    } else {
+      toast.remove('invalid-evm-address');
+      toast.add({
+        id: 'invalid-evm-address',
+        icon: 'i-heroicons-x-circle',
+        color: 'amber',
+        title: 'Error',
+        description: `Error registering relay`,
+      });
+    }
   } catch (error: any) {}
 };
 
@@ -278,17 +292,13 @@ const getObservedBandwidth = (fingerprint: string) => {
   );
 };
 
-const handleUnlockClick = (fingerprint: string) => {
+const handleUnlockClick = async (fingerprint: string) => {
   if (registratorStore.isRelayLocked(fingerprint)) {
-    toast.remove('unlock-relays-error');
-    toast.add({
-      id: 'unlock-relays-error',
-      icon: 'i-heroicons-exclamation-triangle',
-      color: 'amber',
-      title: 'Unlock failed',
-      timeout: 0,
-      description: `This relay is currently locked. It unlocks at block: ${registratorStore.getUnlockTime(fingerprint)}`,
-    });
+    const register = useRegistrator();
+    await register?.unlock(fingerprint, BigInt(100 * 1e18));
+    // Refresh the relays
+    await userStore.getVerifiedRelays(true);
+    await userStore.getClaimableRelays(true);
   }
 };
 </script>
@@ -424,6 +434,9 @@ const handleUnlockClick = (fingerprint: string) => {
       <template #nickname-data="{ row }">
         {{ userStore?.nickNames?.[row.fingerprint] || '-' }}
       </template>
+      <template #previousDistribution-data="{ row }">
+        {{ facilitatorStore?.distributionPerRelay?.[row.fingerprint] || '-' }}
+      </template>
 
       <template #active-data="{ row }">
         <div

components/DataTableMyRelays/columns/RegistrationActionColumn.vue

@@ -26,7 +26,7 @@ const props = defineProps<{
       block
     >
       <div class="text-sm font-medium">Lock</div>
-      <div>Lock 100 $ANON</div>
+      <div>Lock 100 $ANYONE</div>
     </UButton>
     <UButton
       v-else-if="props.row.status === 'claimable' && props.isLocked"

components/ui-kit/Ticker.vue

@@ -1,6 +1,6 @@
 <template>
   <span
     class="font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r dark:from-cyan-300 dark:to-cyan-600 from-cyan-500 to-cyan-600"
-    >$ANON</span
+    >$ANYONE</span
   >
 </template>

components/ui-kit/TitleAndLogo.vue

@@ -1,11 +1,17 @@
 <template>
   <div>
     <router-link to="/" class="flex gap-2 items-top">
-      <img src="/images/ator-logo.png" width="30" height="30" />
+      <img src="/images/anyone-logo.png" width="30" height="30" />
+      <img
+        src="/images/anyone-text.png"
+        width="100"
+        height="30"
+        className="hidden lg:block"
+      />
       <h2
-        class="dark:text-white text-cyan-800 text-xl sr-only lg:not-sr-only font-brand font-bold"
+        class="dark:text-white text-cyan-800 text-xl sr-only lg:not-sr-only font-brand font-bold block lg:hidden"
       >
-        AnyOne
+        ANyONe
       </h2>
     </router-link>
   </div>

composables/distribution/distribution.ts

@@ -7,6 +7,44 @@ import Logger from '@/utils/logger';
 import { type DistributionState } from './contract';
 import type { PreviousDistribution } from '@/types/facilitator';
 
+interface DistributionDetail {
+  distributedTokens: BigNumber;
+}
+
+interface DistributionResult {
+  details: {
+    [fingerprint: string]: DistributionDetail;
+  };
+}
+
+interface State {
+  previousDistributions?: {
+    [timestamp: string]: DistributionResult;
+  };
+}
+
+// Type for tempMap
+interface TempMap {
+  [fingerprint: string]: BigNumber;
+}
+
+const state: State = {
+  previousDistributions: {
+    timestamp1: {
+      details: {
+        fingerprint1: { distributedTokens: new BigNumber(100) },
+        fingerprint2: { distributedTokens: new BigNumber(200) },
+      },
+    },
+    timestamp2: {
+      details: {
+        fingerprint1: { distributedTokens: new BigNumber(50) },
+        fingerprint3: { distributedTokens: new BigNumber(300) },
+      },
+    },
+  },
+};
+
 export class Distribution {
   private _refreshing: boolean = false;
   private contract: Contract<DistributionState> | null = null;
@@ -147,6 +185,49 @@ export class Distribution {
       sumOfTotalDistributions.toString();
     useFacilitatorStore().previousDistributions = previousDistributions;
 
+    console.log(state);
+
+    // Initialize tempMap
+    let tempMap: TempMap = {};
+
+    // Iterate through state and populate tempMap
+    if (state?.previousDistributions) {
+      for (const [timestamp, distributionResult] of Object.entries(
+        state.previousDistributions
+      )) {
+        const distResult = distributionResult as DistributionResult;
+        if (distResult?.details) {
+          for (const [fingerprint, previousDistribution] of Object.entries(
+            distResult.details
+          )) {
+            const distributionDetail =
+              previousDistribution as DistributionDetail;
+
+            if (!tempMap[fingerprint]) {
+              tempMap[fingerprint] = BigNumber(
+                distributionDetail.distributedTokens
+              );
+            } else {
+              // add
+              tempMap[fingerprint] = tempMap[fingerprint].plus(
+                distributionDetail.distributedTokens
+              );
+            }
+          }
+        }
+      }
+    }
+
+    for (const [fingerprint, totalDistributed] of Object.entries(tempMap)) {
+      console.log(totalDistributed);
+      // change string to BigNumber
+
+      const toBigNumber = BigNumber(totalDistributed);
+      tempMap[fingerprint] = toBigNumber.dividedBy(1e18).decimalPlaces(2);
+    }
+
+    useFacilitatorStore().distributionPerRelay = tempMap;
+
     return previousDistributions;
   }