Merge pull request #76 from anyone-protocol/leggo/phase-1/dev

Leggo/phase 1/dev

components/DashboardHeader.vue

@@ -7,6 +7,11 @@ import ButtonThemeToggle from './ui-kit/ButtonThemeToggle.vue';
 import TitleAndLogo from './ui-kit/TitleAndLogo.vue';
 import ReportIssueButton from '@/components/ui-kit/ReportIssueButton.vue';
 import ReportIssueDialog from '@/components/ui-kit/ReportIssueDialog.vue';
+import { useAccount } from '@wagmi/vue';
+
+import { config } from '@/config/wagmi.config';
+
+const { isConnected, address } = useAccount({ config } as any);
 
 const menuStore = useMenuStore();
 </script>
@@ -19,28 +24,34 @@ 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 h-full">
+    <div
+      class="flex justify-between items-center px-6 pb-4 lg:pt-6 pt-4 relative h-full"
+    >
       <div class="flex gap-2 items-center">
         <TitleAndLogo />
       </div>
       <nav class="flex-1 h-full">
         <ul class="flex justify-center items-center space-x-2 lg:space-x-4">
           <li>
             <RouterLink to="/">
-              <UButton variant="outline" class="nav-button uniform-height text-sm lg:text-base lg:flex hidden"
+              <UButton
+                variant="outline"
+                class="nav-button uniform-height text-sm lg:text-base lg:flex hidden"
                 >Home</UButton
               >
             </RouterLink>
           </li>
           <li>
             <RouterLink to="/relays">
-              <UButton variant="outline" class="nav-button uniform-height text-sm lg:text-base lg:flex hidden"
+              <UButton
+                variant="outline"
+                class="nav-button uniform-height text-sm lg:text-base lg:flex hidden"
                 >Relays</UButton
               >
             </RouterLink>
           </li>
           <div class="lg:flex items-center gap-2 hidden h-full">
-            <ReportIssueButton class="uniform-height" />
+            <ReportIssueButton class="uniform-height" v-if="isConnected" />
           </div>
         </ul>
       </nav>
@@ -81,4 +92,4 @@ nav ul li {
   background-color: transparent;
   color: #000;
 }
-</style>
+</style>

components/DataTableMyRelays/DataTableMyRelays.vue

@@ -83,6 +83,20 @@ const { error: verifiedRelaysError, pending: verifiedPending } =
     watch: [address],
   });
 
+const isHardwareResolved = reactive<Record<string, boolean>>({});
+
+const resolveIsHardware = async (fingerprints: string[]) => {
+  for (const fingerprint of fingerprints) {
+    // Resolve the hardware relay status for each fingerprint
+    isHardwareResolved[fingerprint] =
+      await userStore.isHardwareRelay(fingerprint);
+  }
+};
+watch(allRelays, (newRelays) => {
+  const fingerprints = newRelays.map((relay) => relay.fingerprint);
+  resolveIsHardware(fingerprints);
+});
+
 const ethAddress = ref<string>('');
 const ethAddressError = ref<string | null>(null);
 const fingerPrintRegister = ref<string>('');
@@ -537,7 +551,7 @@ const handleUnlockClick = async (fingerprint: string) => {
       <template #lockStatus-data="{ row }">
         <LockStatusColumn
           :is-locked="registratorStore.isRelayLocked(row.fingerprint)"
-          :is-hardware="userStore.isHardwareRelay(row.fingerprint)"
+          :is-hardware="isHardwareResolved[row.fingerprint]"
           :is-verified="row.status === 'verified'"
           :is-loading="registratorStore.loading"
         />
@@ -579,7 +593,7 @@ const handleUnlockClick = async (fingerprint: string) => {
           :is-locked="
             registratorStore.isRelayLocked(row.fingerprint) ||
             row.status === 'verified' ||
-            userStore.isHardwareRelay(row.fingerprint)
+            isHardwareResolved[row.fingerprint]
           "
           :is-loading="registratorStore.loading"
           :has-registration-credit="relayCredits[row.fingerprint]"

components/DataTableMyRelays/DataTableMyRelaysMobile.vue

@@ -68,7 +68,7 @@ unwatch();
 // Fetching and refreshing the relay data from Warp - stored in Pinia user store
 const { error: allRelaysError, pending: allRelaysPending } = await useAsyncData(
   'verifiedRelays',
-  () => userStore.createRelayCache(),
+  () => userStore.getRelayCache(),
   {
     server: false,
     watch: [address],
@@ -85,6 +85,20 @@ const { error: verifiedRelaysError, pending: verifiedPending } =
     watch: [address],
   });
 
+const isHardwareResolved = reactive<Record<string, boolean>>({});
+
+const resolveIsHardware = async (fingerprints: string[]) => {
+  for (const fingerprint of fingerprints) {
+    // Resolve the hardware relay status for each fingerprint
+    isHardwareResolved[fingerprint] =
+      await userStore.isHardwareRelay(fingerprint);
+  }
+};
+watch(allRelays, (newRelays) => {
+  const fingerprints = newRelays.map((relay) => relay.fingerprint);
+  resolveIsHardware(fingerprints);
+});
+
 const ethAddress = ref<string>('');
 const ethAddressError = ref<string | null>(null);
 const fingerPrintRegister = ref<string>('');
@@ -501,7 +515,7 @@ const handleUnlockClick = async (fingerprint: string) => {
         </div>
         <LockStatusColumn
           :is-locked="registratorStore.isRelayLocked(row.fingerprint)"
-          :is-hardware="userStore.isHardwareRelay(row.fingerprint)"
+          :is-hardware="isHardwareResolved[row.fingerprint]"
           :is-verified="row.status === 'verified'"
           :is-loading="registratorStore.loading"
         />
@@ -516,7 +530,7 @@ const handleUnlockClick = async (fingerprint: string) => {
           :is-locked="
             registratorStore.isRelayLocked(row.fingerprint) ||
             row.status === 'verified' ||
-            userStore.isHardwareRelay(row.fingerprint)
+            isHardwareResolved[row.fingerprint]
           "
           :is-loading="registratorStore.loading"
           :has-registration-credit="relayCredits[row.fingerprint]"