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

Leggo/phase 1/dev

.github/workflows/deploy.yml

@@ -22,6 +22,9 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Set up environment variables
+        run: echo "COMMIT_HASH=${{ github.sha }}" >> $GITHUB_ENV      
+
       - name: Build image
         run: docker build . --file Dockerfile --tag $IMAGE_NAME --label "runnumber=${GITHUB_RUN_ID}"
 

.husky/pre-commit

@@ -1 +1,12 @@
-pnpm exec lint-staged
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+# Check if the test script is the placeholder one and skip it if so
+if grep -q "\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"" package.json; then
+  echo "Skipping tests because no test script is specified."
+else
+  npm test
+fi
+
+# Run lint-staged to format the code
+npx lint-staged

app.config.ts

@@ -13,6 +13,14 @@ export default defineAppConfig({
       },
     },
   },
+  icon: {
+    size: '24px', // default <Icon> size applied
+    class: 'icon', // default <Icon> class applied
+    mode: 'css', // default <Icon> mode applied
+    aliases: {
+      nuxt: 'logos:nuxt-icon',
+    },
+  },
   contracts,
   arweave: {
     gateway: 'https://arweave.net',

app.vue

@@ -1,45 +1,37 @@
+<template>
+  <NuxtLayout>
+    <NuxtLoadingIndicator />
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
 <script setup lang="ts">
-import { reconnect } from 'use-wagmi/actions';
-import { mainnet, sepolia, hardhat } from 'use-wagmi/chains';
-import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/vue';
-import {
-  metadata,
-  getAtorAddress,
-  themeVariables,
-} from '@/config/web3modal.config';
+  import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/vue'
+
+import { mainnet, sepolia } from 'viem/chains'
+import { reconnect } from '@wagmi/core'
+import { metadata } from '@/config/web3modal.config';
+import {config} from '@/config/wagmi.config'
+import { watchAccount } from '@wagmi/core'
 
-const chains = [mainnet, sepolia, hardhat];
 const nuxtConfig = useRuntimeConfig();
 const projectId = nuxtConfig.public.walletConnectProjectId;
 
-const wagmiConfig = defaultWagmiConfig({
-  chains,
+
+reconnect(config)
+// 3. Create modal
+createWeb3Modal({
+  wagmiConfig: config,
   projectId,
   metadata,
-  ssr: false,
-});
+  defaultChain: sepolia,
+})
 
-createWeb3Modal({
-  chains,
-  tokens: {
-    1: {
-      address: getAtorAddress(),
-      image: '/images/ator-logo.png',
-    },
+const unwatch = watchAccount(config, {
+  onChange(account) { 
+    console.log('Account changed!', account)
   },
-  projectId,
-  wagmiConfig,
-  themeVariables,
-});
+})
+unwatch()
 
-onMounted(() => {
-  reconnect(wagmiConfig);
-});
 </script>
-
-<template>
-  <NuxtLayout>
-    <NuxtLoadingIndicator />
-    <NuxtPage />
-  </NuxtLayout>
-</template>

assets/css/tailwind.css

@@ -78,7 +78,7 @@
 }
 
 body {
-  font-family: "Inter", sans-serif;
+  /* font-family: "Inter", sans-serif; */
 }
 
 progress {

components/ChainSelector.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { switchChain, watchAccount } from 'use-wagmi/actions';
-import { useAccount } from 'use-wagmi';
+import { switchChain, watchAccount } from '@wagmi/core';
+import { useAccount } from '@wagmi/vue';
 import { config, defaultChain } from '@/config/wagmi.config';
 
 const { chainId } = useAccount({ config });

components/DashboardFooter.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import ButtonThemeToggle from './ui-kit/ButtonThemeToggle.vue';
+
+const config = useRuntimeConfig();
+
+const version = '1.0.0';
+const commitHash = config.public.commitHash || 'dev';
+</script>
+
+<template>
+   <footer
+      class="bg-gradient-to-t from-slate-100 to-teal-50 dark:from-zinc-900 dark:via-gray-900 py-4 px-6 mt-auto flex justify-between lg:justify-center  items-center rounded-xl">
+      <div class="flex gap-2">
+         <TitleAndLogo />
+         <h1 class="lg:hidden capitalize font-brand tracking-wider">ATOR</h1>
+      </div>
+
+      <div class="text-sm text-gray-600 dark:text-gray-300  justify-self-center margin-auto">
+         Version: {{ version }} | Commit: {{ commitHash }}
+      </div>
+
+      <div class="lg:hidden flex items-center gap-2">
+         <ButtonThemeToggle />
+      </div>
+   </footer>
+</template>

components/DashboardMobileMenu.vue

@@ -2,6 +2,7 @@
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
 import ButtonConnect from './ui-kit/ButtonConnect.vue';
 import GlowEffect from './ui-kit/GlowEffect.vue';
+import ButtonThemeToggle from './ui-kit/ButtonThemeToggle.vue';
 
 const breakpoints = useBreakpoints(breakpointsTailwind);
 const lgAndLarger = breakpoints.greaterOrEqual('lg');

components/DataTableMyRelays/DataTableMyRelays.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
-import { useAccount } from 'use-wagmi';
+import { useAccount } from '@wagmi/vue';
 import type { FunctionName } from '@/utils/warp.write';
 import { useRelayRegistry } from '@/composables/relay-registry';
 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 Tabs from '../ui-kit/Tabs.vue';
 import Tooltip from '../ui-kit/Tooltip.vue';
 import Popover from '../ui-kit/Popover.vue';
@@ -25,7 +26,7 @@ const metricsStore = useMetricsStore();
 const registratorStore = useRegistratorStore();
 
 const { allRelays, claimableRelays } = storeToRefs(userStore);
-const { address } = useAccount({ config });
+const { address } = useAccount({ config});
 const currentTab = ref<RelayTabType>('all');
 
 // Fetching and refreshing the relay data from Warp - stored in Pinia user store
@@ -35,7 +36,7 @@ const {
   pending: verifiedPending,
 } = await useAsyncData(
   'verifiedRelays',
-  () => userStore.getVerifiedRelays().then(() => true),
+  () => userStore.getVerifiedRelays(),
   { server: false, watch: [address] }
 );
 const {
@@ -44,10 +45,30 @@ const {
   pending: claimablePending,
 } = await useAsyncData(
   'claimableRelays',
-  () => userStore.getClaimableRelays().then(() => true),
+  () => userStore.getClaimableRelays(),
   { watch: [address] }
 );
 
+if (claimableRelaysError.value?.cause?.message == "rate limited" || verifiedRelaysError.value?.cause?.message == "rate limited") {
+  toast.add({
+      id: "claimable-relays-error",
+      icon: 'i-heroicons-exclamation-triangle',
+      color: 'primary',
+      title: 'Arweave rate limit exceeded!',
+      timeout: 0,
+      description: 'Please wait...',
+    });
+  if (claimableRelaysError.value != null) {
+    userStore.claimRelayRefresh().then(() => claimableRelaysError.value = null);
+  } else if (verifiedRelaysError.value != null) {
+    userStore.verifiedRelaysRefresh().then(() => verifiedRelaysError.value = null);
+  } else {
+    userStore.claimRelayRefresh().then(() => claimableRelaysError.value = null);
+    userStore.verifiedRelaysRefresh().then(() => verifiedRelaysError.value = null);
+  }
+  // keep trying to fetch the claimable relays
+}
+
 const timestamp = computed(
   () => metricsStore.relays.timestamp && new Date(metricsStore.relays.timestamp)
 );
@@ -56,7 +77,6 @@ const timestamp = computed(
 const fingerprints = computed(() => {
   return allRelays.value.map((relay) => relay.fingerprint);
 });
-
 const relayAction = async (action: FunctionName, fingerprint: string) => {
   //TODO: Sign the message
   // See: The following resources
@@ -156,13 +176,24 @@ const handleLockRelay = async (fingerprint: string) => {
   }
 };
 
+const filterUniqueRelays = (relays: RelayRow[]) => {
+  const seen = new Set();
+  return relays.filter((relay) => {
+    const duplicate = seen.has(relay.fingerprint);
+    seen.add(relay.fingerprint);
+    return !duplicate;
+  });
+};
+
 const getTableData = (tab: RelayTabType) => {
   switch (tab) {
     case 'all':
-      return allRelays.value;
+      return filterUniqueRelays(allRelays.value);
     case 'locked':
-      return allRelays.value.filter((relay) =>
-        registratorStore.isRelayLocked(relay.fingerprint)
+      return filterUniqueRelays(
+        allRelays.value.filter((relay) =>
+          registratorStore.isRelayLocked(relay.fingerprint)
+        )
       );
     case 'claimable':
       return claimableRelays.value;
@@ -176,12 +207,26 @@ const getObservedBandwidth = (fingerprint: string) => {
       .toFormat(3) + ' MiB/s'
   );
 };
+
+const handleUnlockClick = (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)}`,
+    })
+  }
+}
 </script>
 
 <template>
   <div class="-mx-4 sm:-mx-0">
     <UAlert
-      v-if="verifiedRelaysError || claimableRelaysError"
+      v-if="verifiedRelaysError?.value || claimableRelaysError?.value"
       class="mb-6"
       icon="i-heroicons-exclamation-triangle"
       description="There was an error retrieving relays. We'll load what we can."
@@ -333,13 +378,16 @@ const getObservedBandwidth = (fingerprint: string) => {
       <template #unlock-data="{ row }">
         <UButton
           :ui="{ base: 'text-sm' }"
+          :class="
+            registratorStore.isRelayLocked(row.fingerprint) ? 'cursor-not-allowed' : ''
+          "
           icon="i-heroicons-check-circle-solid"
           size="xl"
           color="green"
           variant="outline"
           label="Unlock"
-          :disabled="true"
           :trailing="false"
+          @click="handleUnlockClick(row.fingerprint)"
         />
       </template>
       <template #owner-data="{ row }">
@@ -376,4 +424,8 @@ const getObservedBandwidth = (fingerprint: string) => {
 .status-inactive {
   background: #fa5858;
 }
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
 </style>