From 0f058c806948a719cca1af1061f8508db4309843 Mon Sep 17 00:00:00 2001
From: MarcoMandar <malicemandar@gmail.com>
Date: Tue, 23 Jul 2024 10:16:16 +0100
Subject: [PATCH 1/3] Relays Mobile version initial

Signed-off-by: MarcoMandar <malicemandar@gmail.com>
---
 .../DataTableMyRelays/DataTableMyRelays.vue   |   1 +
 .../DataTableMyRelaysMobile.vue               | 497 ++++++++++++++++++
 .../DataTableMyRelays/FingerprintDisplay.vue  |  51 ++
 nuxt.config.ts                                |   2 +-
 pages/relays.vue                              |  50 +-
 5 files changed, 592 insertions(+), 9 deletions(-)
 create mode 100644 components/DataTableMyRelays/DataTableMyRelaysMobile.vue
 create mode 100644 components/DataTableMyRelays/FingerprintDisplay.vue

diff --git a/components/DataTableMyRelays/DataTableMyRelays.vue b/components/DataTableMyRelays/DataTableMyRelays.vue
index 0867c8f..05b957c 100755
--- a/components/DataTableMyRelays/DataTableMyRelays.vue
+++ b/components/DataTableMyRelays/DataTableMyRelays.vue
@@ -7,6 +7,7 @@ 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 FingerprintDisplay from './FingerprintDisplay.vue';
 
 import Tabs from '../ui-kit/Tabs.vue';
 import Tooltip from '../ui-kit/Tooltip.vue';
diff --git a/components/DataTableMyRelays/DataTableMyRelaysMobile.vue b/components/DataTableMyRelays/DataTableMyRelaysMobile.vue
new file mode 100644
index 0000000..4799f90
--- /dev/null
+++ b/components/DataTableMyRelays/DataTableMyRelaysMobile.vue
@@ -0,0 +1,497 @@
+<script lang="ts" setup>
+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 { useFacilitatorStore } from '@/stores/useFacilitatorStore';
+import FingerprintDisplay from './FingerprintDisplay.vue';
+
+import Tabs from '../ui-kit/Tabs.vue';
+import Tooltip from '../ui-kit/Tooltip.vue';
+import Popover from '../ui-kit/Popover.vue';
+
+import BigNumber from 'bignumber.js';
+
+import LockStatusColumn from './columns/LockStatusColumn.vue';
+import RegistrationActionColumn from './columns/RegistrationActionColumn.vue';
+import { useRegistrator } from '@/composables/registrator';
+import { useRegistratorStore } from '@/stores/useRegistratorStore';
+import { ethers } from 'ethers';
+import { watchAccount } from '@wagmi/core';
+import { defineProps } from 'vue';
+
+const props = defineProps<{
+  currentTab: RelayTabType;
+  registerModalOpen: boolean;
+}>();
+
+const toast = useToast();
+const userStore = useUserStore();
+const registry = useRelayRegistry();
+const metricsStore = useMetricsStore();
+const registratorStore = useRegistratorStore();
+const facilitatorStore = useFacilitatorStore();
+const registrator = useRegistrator();
+
+const isHovered = ref(false);
+const isUnlocking = ref(false);
+
+const { allRelays, claimableRelays } = storeToRefs(userStore);
+const { address } = useAccount({ config });
+const registerModalOpen = ref(false);
+
+onMounted(() => {
+  setInterval(() => {
+    if (registrator) {
+      if (userStore.userData.address) {
+        registrator.getLokedRelaysTokens(userStore.userData.address);
+      }
+    }
+  }, 1000 * 60);
+});
+
+const unwatch = watchAccount(config, {
+  onChange(account) {
+    userStore.createRelayCache();
+  },
+});
+unwatch();
+
+const { error: allRelaysError, pending: allRelaysPending } = await useAsyncData(
+  'verifiedRelays',
+  () => userStore.createRelayCache(),
+  {
+    server: false,
+    watch: [address],
+  }
+);
+const { error: claimableRelaysError, pending: claimablePending } =
+  await useAsyncData('claimableRelays', () => userStore.getClaimableRelays(), {
+    watch: [address],
+  });
+
+const { error: verifiedRelaysError, pending: verifiedPending } =
+  await useAsyncData('verifiedRelays', () => userStore.getVerifiedRelays(), {
+    server: false,
+    watch: [address],
+  });
+
+const ethAddress = ref<string>('');
+const ethAddressError = ref<string | null>(null);
+const fingerPrintRegister = ref<string>('');
+const fingerPrintRegisterError = ref<string | null>(null);
+
+if ((allRelaysError as any).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...',
+  });
+}
+
+const timestamp = computed(
+  () => metricsStore.relays.timestamp && new Date(metricsStore.relays.timestamp)
+);
+
+const fingerprints = computed(() => {
+  return allRelays.value.map((relay) => relay.fingerprint);
+});
+
+const relayAction = async (action: FunctionName, fingerprint: string) => {
+  const selectedRow = allRelays.value.find(
+    (row) => row.fingerprint === fingerprint
+  );
+  selectedRow!.isWorking = true;
+  selectedRow!.class = 'animate-pulse bg-green-100 dark:bg-zinc-600';
+
+  try {
+    let actionPromise;
+    switch (action) {
+      case 'claim':
+        actionPromise = registry.claim(fingerprint);
+        break;
+
+      case 'renounce':
+        actionPromise = registry.renounce(fingerprint);
+        break;
+
+      default:
+        throw new Error('Invalid action');
+    }
+
+    actionPromise
+      .then((res) => {
+        if (!res) {
+          selectedRow!.class = '';
+          selectedRow!.isWorking = false;
+          return;
+        }
+
+        return userStore
+          .createRelayCache()
+          .then(() => userStore.getVerifiedRelays())
+          .then(() => userStore.getClaimableRelays())
+          .then(() => {
+            toast.add({
+              icon: 'i-heroicons-check-circle',
+              color: 'primary',
+              title: 'Success',
+              timeout: 0,
+              description: `Successfully ${
+                VERBS[action].pastTense
+              } relay ${truncatedAddress(fingerprint)}!`,
+            });
+          });
+      })
+      .catch((error) => {
+        if (error?.code !== 'ACTION_REJECTED') {
+          toast.add({
+            icon: 'i-heroicons-x-circle',
+            color: 'amber',
+            title: 'Error',
+            description: `Error ${
+              VERBS[action].presentTense
+            } relay ${truncatedAddress(fingerprint)}!`,
+          });
+        }
+      })
+      .finally(() => {
+        selectedRow!.class = '';
+        selectedRow!.isWorking = false;
+      });
+  } catch (error) {
+    selectedRow!.class = '';
+    selectedRow!.isWorking = false;
+  }
+};
+
+const getVerifiedItems = (row: RelayRow) => [
+  [
+    {
+      label: 'Renounce',
+      icon: 'i-heroicons-trash-20-solid',
+      click: () => relayAction('renounce', row.fingerprint),
+    },
+  ],
+];
+
+const rules = {
+  required: (value: string) => !!value || 'Required',
+};
+
+const emits = defineEmits(['update:currentTab']);
+
+const handleTabChange = (key: string) => {
+  emits('update:currentTab', key);
+};
+
+const handleLockRelay = async (fingerprint: string) => {
+  const selectedRow = allRelays.value.find(
+    (row) => row.fingerprint === fingerprint
+  );
+  selectedRow!.isWorking = true;
+  selectedRow!.class = 'animate-pulse bg-green-100 dark:bg-zinc-600';
+
+  try {
+    const register = useRegistrator();
+    await register?.lock(fingerprint, '');
+
+    selectedRow!.class = '';
+    selectedRow!.isWorking = false;
+  } catch {
+    selectedRow!.class = '';
+    selectedRow!.isWorking = false;
+  }
+};
+
+const handleLockRemote = async () => {
+  if (fingerPrintRegisterError.value || ethAddressError.value) {
+    return;
+  }
+
+  if (fingerPrintRegister.value == '' || ethAddress.value == '') {
+    toast.remove('invalid-evm-address');
+    toast.add({
+      id: 'invalid-evm-address',
+      icon: 'i-heroicons-x-circle',
+      color: 'amber',
+      title: 'Error',
+      description: `Please fill in all fields`,
+    });
+    return;
+  }
+
+  if (!ethers.isAddress(ethAddress.value)) {
+    toast.remove('invalid-evm-address');
+    toast.add({
+      id: 'invalid-evm-address',
+      icon: 'i-heroicons-x-circle',
+      color: 'amber',
+      title: 'Error',
+      description: `Invalid EVM address`,
+    });
+    return;
+  }
+
+  try {
+    const register = useRegistrator();
+    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) {}
+};
+
+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 filterUniqueRelays(allRelays.value);
+    case 'locked':
+      return filterUniqueRelays(
+        allRelays.value.filter((relay) =>
+          registratorStore.isRelayLocked(relay.fingerprint)
+        )
+      );
+    case 'claimable':
+      return claimableRelays.value;
+  }
+};
+
+const getObservedBandwidth = (fingerprint: string) => {
+  return (
+    BigNumber(userStore?.relaysMeta?.[fingerprint]?.observed_bandwidth)
+      .dividedBy(Math.pow(1024, 2))
+      .toFormat(3) + ' MiB/s'
+  );
+};
+
+const handleUnlockClick = async (fingerprint: string) => {
+  if (registratorStore.isRelayLocked(fingerprint)) {
+    isUnlocking.value = true;
+    const register = useRegistrator();
+    try {
+      await register?.unlock(fingerprint, BigInt(100 * 1e18));
+      await userStore.createRelayCache();
+    } catch (error) {
+    } finally {
+      isUnlocking.value = false;
+    }
+  }
+};
+</script>
+
+<template>
+  <UModal v-model="registerModalOpen">
+    <UCard class="bg-white dark:bg-gray-800 rounded-lg shadow-lg">
+      <h4
+        class="text-lg font-semibold mb-4 border-b border-b-[rgba(255,255,255,0.1)] pb-4"
+      >
+        Register Fingerprint
+      </h4>
+      <UContainer class="">
+        <div class="mb-6">
+          <UFormGroup label="EVM Address" class="mb-6">
+            <UInput
+              ref="ethAddressField"
+              v-model="ethAddress"
+              hint="EVM address associated with fingerprint"
+              placeholder="EVM Address"
+              :rules="[rules.required]"
+              :error="ethAddressError !== null"
+              persistent-hint
+              class="mb-1"
+            >
+              <template #message="{ message }">
+                <UIcon name="w-4 h-4">mdi-alert</UIcon>
+                {{ message }}
+              </template>
+            </UInput>
+          </UFormGroup>
+          <UFormGroup label="Relay Fingerprint">
+            <UInput
+              ref="fingerPrintField"
+              v-model="fingerPrintRegister"
+              hint="Fingerprint associated with EVM Address"
+              placeholder="Relay Fingerprint"
+              :rules="[rules.required]"
+              :error="fingerPrintRegisterError !== null"
+              persistent-hint
+              class="mb-1"
+            >
+              <template #message="{ message }">
+                <UIcon name="w-4 h-4">mdi-alert</UIcon>
+                {{ message }}
+              </template>
+            </UInput>
+          </UFormGroup>
+        </div>
+        <div class="flex justify-between">
+          <UButton
+            variant="outline"
+            size="sm"
+            color="red"
+            @click="registerModalOpen = false"
+          >
+            Cancel
+          </UButton>
+          <UDivider />
+          <UButton
+            variant="outline"
+            size="sm"
+            color="primary"
+            @click="handleLockRemote"
+          >
+            Register
+          </UButton>
+        </div>
+      </UContainer>
+    </UCard>
+  </UModal>
+  <div class="-mx-4 sm:-mx-0">
+    <UAlert
+      v-if="(allRelaysError as any)?.value || (allRelaysError as any)?.value"
+      class="mb-6"
+      icon="i-heroicons-exclamation-triangle"
+      description="There was an error retrieving relays. We'll load what we can."
+      title="Relay error"
+      color="red"
+      variant="subtle"
+    />
+    <Tabs :tabs="TABS" @onChange="handleTabChange" />
+    <div
+      v-for="row in getTableData(currentTab)"
+      :key="row.fingerprint"
+      class="mb-4 p-4 border rounded"
+    >
+      <div class="flex justify-between items-center">
+        <div class="font-semibold">Nickname</div>
+        <div>{{ userStore?.nickNames?.[row.fingerprint] || '-' }}</div>
+      </div>
+      <div class="flex justify-between items-center mt-2">
+        <div class="font-semibold">Running</div>
+        <div class="flex items-center">
+          <span
+            :class="
+              userStore?.relaysMeta?.[row.fingerprint]?.running
+                ? 'status-active'
+                : 'status-inactive'
+            "
+          ></span>
+        </div>
+      </div>
+      <div class="flex justify-between items-center mt-2">
+        <div class="font-semibold">Relay Fingerprint</div>
+        <!-- <div>{{ row.fingerprint }}</div> -->
+        <FingerprintDisplay :fingerprint="row.fingerprint" />
+      </div>
+      <div class="flex justify-between items-center mt-2">
+        <div class="font-semibold">Consensus Weight</div>
+        <div>
+          <span
+            v-if="
+              userStore?.relaysMeta?.[row.fingerprint]?.consensus_weight !==
+              undefined
+            "
+          >
+            {{ userStore?.relaysMeta?.[row.fingerprint]?.consensus_weight }}
+          </span>
+          <span v-else class="text-sm flex items-center gap-2">
+            <Icon
+              name="heroicons:exclamation-circle"
+              class="h-4 w-4 text-red-500"
+            />
+            Unable to fetch
+          </span>
+        </div>
+      </div>
+      <div class="flex justify-between items-center mt-2">
+        <div class="font-semibold">Observed Bandwidth</div>
+        <div>
+          <span
+            v-if="
+              userStore?.relaysMeta?.[row.fingerprint]?.observed_bandwidth !==
+              undefined
+            "
+          >
+            {{ getObservedBandwidth(row.fingerprint) }}
+          </span>
+          <span v-else class="text-sm flex items-center gap-2">
+            <Icon
+              name="heroicons:exclamation-circle"
+              class="h-4 w-4 text-red-500"
+            />
+            Unable to fetch
+          </span>
+        </div>
+      </div>
+      <div class="flex justify-between items-center mt-2">
+        <div class="font-semibold">Lock Status</div>
+        <LockStatusColumn
+          :is-locked="registratorStore.isRelayLocked(row.fingerprint)"
+          :is-hardware="userStore.isHardwareRelay(row.fingerprint)"
+          :is-verified="row.status === 'verified'"
+        />
+      </div>
+      <div class="flex justify-between items-center mt-2">
+        <div class="font-semibold">Actions</div>
+        <RegistrationActionColumn
+          :row="row"
+          @relay-action="relayAction"
+          @on-lock-relay="handleLockRelay"
+          :is-locked="
+            registratorStore.isRelayLocked(row.fingerprint) ||
+            row.status === 'verified' ||
+            userStore.isHardwareRelay(row.fingerprint)
+          "
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.status-active,
+.status-inactive {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+.status-active {
+  background: #00ff84;
+}
+.status-inactive {
+  background: #fa5858;
+}
+.cursor-not-allowed,
+.disabled {
+  cursor: not-allowed;
+}
+</style>
diff --git a/components/DataTableMyRelays/FingerprintDisplay.vue b/components/DataTableMyRelays/FingerprintDisplay.vue
new file mode 100644
index 0000000..a2e339e
--- /dev/null
+++ b/components/DataTableMyRelays/FingerprintDisplay.vue
@@ -0,0 +1,51 @@
+<!-- FingerprintDisplay.vue -->
+<template>
+  <div @click="copyToClipboard" class="cursor-pointer relative">
+    <UTooltip :text="fullFingerprint" class="mr-[5px]">
+      <span>{{ formattedFingerprint }}</span>
+    </UTooltip>
+    <span
+      v-if="copied"
+      class="absolute right-[-10px] top-0 text-green-500 ml-2"
+    >
+      <Icon name="i-heroicons-check-circle" />
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps<{
+  fingerprint: string;
+}>();
+
+const fullFingerprint = ref(props.fingerprint);
+const copied = ref(false);
+
+const formattedFingerprint = computed(() => {
+  return (
+    fullFingerprint.value.slice(0, 5) + '...' + fullFingerprint.value.slice(-4)
+  );
+});
+
+const copyToClipboard = () => {
+  navigator.clipboard
+    .writeText(fullFingerprint.value)
+    .then(() => {
+      copied.value = true;
+      setTimeout(() => {
+        copied.value = false;
+      }, 2000);
+    })
+    .catch(() => {
+      console.error('Failed to copy to clipboard');
+    });
+};
+</script>
+
+<style scoped>
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3cfc48a..5ade907 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -67,7 +67,7 @@ export default defineNuxtConfig({
       supportWalletPublicKeyBase64:
         'K3jnSGVyHj4kSzgce3+k8gJsfHvUoQeJMNPO8CcsO2s=',
       commitHash: process.env.NUXT_PUBLIC_COMMIT_HASH || 'dev',
-      version: '1.0.8',
+      version: '1.0.9',
     },
   },
   plugins: [{ src: '~/plugins/vue-query.client.ts', mode: 'client' }],
diff --git a/pages/relays.vue b/pages/relays.vue
index ad4c30e..5aab377 100755
--- a/pages/relays.vue
+++ b/pages/relays.vue
@@ -3,7 +3,10 @@
     <Card class="mt-[1rem]">
       <div class="flex items-center mb-[1rem] justify-between">
         <div class="flex items-center space-x-2">
-          <Icon name="eos-icons:product-classes-outlined" class="w-[1.8rem] h-[1.8rem]" />
+          <Icon
+            name="eos-icons:product-classes-outlined"
+            class="w-[1.8rem] h-[1.8rem]"
+          />
           <p class="text-[2rem]">Relays</p>
         </div>
         <div class="flex justify-center">
@@ -15,16 +18,33 @@
           />
         </div>
       </div>
-      <DataTableMyRelays :currentTab="currentTab" @update:currentTab="handleTabChange" :registerModalOpen="registerModalOpen" />
+      <div class="hidden xl:block">
+        <DataTableMyRelays
+          :currentTab="currentTab"
+          @update:currentTab="handleTabChange"
+          :registerModalOpen="registerModalOpen"
+        />
+      </div>
+      <div class="block xl:hidden">
+        <DataTableMyRelaysMobile
+          :currentTab="currentTab"
+          @update:currentTab="handleTabChange"
+          :registerModalOpen="registerModalOpen"
+        />
+      </div>
     </Card>
   </DashboardMobileSection>
   <UModal v-model="registerModalOpen">
     <UCard class="bg-white dark:bg-gray-800 rounded-lg shadow-lg">
-      <h4 class="text-lg font-semibold mb-4 border-b border-b-[rgba(255,255,255,0.1)] pb-4">
+      <h4
+        class="text-lg font-semibold mb-4 border-b border-b-[rgba(255,255,255,0.1)] pb-4"
+      >
         Register Fingerprint
       </h4>
       <UContainer>
-        <p class="mb-[1rem] text-center">Note: this is for you to register a relay for someone else.</p>
+        <p class="mb-[1rem] text-center">
+          Note: this is for you to register a relay for someone else.
+        </p>
         <div class="mb-6">
           <UFormGroup label="EVM Address" class="mb-6">
             <UInput
@@ -50,11 +70,21 @@
           </UFormGroup>
         </div>
         <div class="flex justify-between">
-          <UButton variant="outline" size="sm" color="red" @click="registerModalOpen = false">
+          <UButton
+            variant="outline"
+            size="sm"
+            color="red"
+            @click="registerModalOpen = false"
+          >
             Cancel
           </UButton>
           <UDivider />
-          <UButton variant="outline" size="sm" color="primary" @click="handleLockRemote">
+          <UButton
+            variant="outline"
+            size="sm"
+            color="primary"
+            @click="handleLockRemote"
+          >
             Register
           </UButton>
         </div>
@@ -68,6 +98,7 @@ import { ref, onMounted, watch } from 'vue';
 import { useUserStore } from '@/stores/useUserStore';
 import DashboardMobileSection from '@/components/DashboardMobileSection.vue';
 import DataTableMyRelays from '@/components/DataTableMyRelays/DataTableMyRelays.vue';
+import DataTableMyRelaysMobile from '@/components/DataTableMyRelays/DataTableMyRelaysMobile.vue';
 import { initRegistrator, useRegistrator } from '@/composables/registrator';
 import { initDistribution, useDistribution } from '@/composables/distribution';
 import { initRelayRegistry } from '@/composables/relay-registry';
@@ -124,7 +155,10 @@ const handleLockRemote = async () => {
 
   try {
     const register = useRegistrator();
-    const success = 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 {
@@ -134,4 +168,4 @@ const handleLockRemote = async () => {
     // handle error
   }
 };
-</script>
\ No newline at end of file
+</script>

From a27ff8d542f3b00b662c15224f8f8e224103e38e Mon Sep 17 00:00:00 2001
From: MarcoMandar <malicemandar@gmail.com>
Date: Tue, 23 Jul 2024 11:07:50 +0100
Subject: [PATCH 2/3] update mobile Relay

Signed-off-by: MarcoMandar <malicemandar@gmail.com>
---
 .../DataTableMyRelaysMobile.vue               | 93 ++++++++++++++++++-
 1 file changed, 89 insertions(+), 4 deletions(-)

diff --git a/components/DataTableMyRelays/DataTableMyRelaysMobile.vue b/components/DataTableMyRelays/DataTableMyRelaysMobile.vue
index 4799f90..d576edd 100644
--- a/components/DataTableMyRelays/DataTableMyRelaysMobile.vue
+++ b/components/DataTableMyRelays/DataTableMyRelaysMobile.vue
@@ -44,6 +44,7 @@ const { address } = useAccount({ config });
 const registerModalOpen = ref(false);
 
 onMounted(() => {
+  // refresh the locked relays every minute
   setInterval(() => {
     if (registrator) {
       if (userStore.userData.address) {
@@ -55,11 +56,13 @@ onMounted(() => {
 
 const unwatch = watchAccount(config, {
   onChange(account) {
+    // account change
     userStore.createRelayCache();
   },
 });
 unwatch();
 
+// Fetching and refreshing the relay data from Warp - stored in Pinia user store
 const { error: allRelaysError, pending: allRelaysPending } = await useAsyncData(
   'verifiedRelays',
   () => userStore.createRelayCache(),
@@ -99,11 +102,18 @@ const timestamp = computed(
   () => metricsStore.relays.timestamp && new Date(metricsStore.relays.timestamp)
 );
 
+// The user's relays
 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
+  // https://academy.warp.cc/docs/sdk/advanced/plugins/signature
+  // https://github.com/brewlabs-code/ator/blob/main/composables/warp-signer.ts
+  // https://docs.google.com/document/d/1VLRd2bP96avNZksMwrf8WSDmcAwrcaQpYAd5SUGDhx0/edit?pli=1#heading=h.gtsv79v2cvnl
+
+  // Apply style to the selected row
   const selectedRow = allRelays.value.find(
     (row) => row.fingerprint === fingerprint
   );
@@ -133,6 +143,7 @@ const relayAction = async (action: FunctionName, fingerprint: string) => {
           return;
         }
 
+        // Refresh the relays cache
         return userStore
           .createRelayCache()
           .then(() => userStore.getVerifiedRelays())
@@ -171,6 +182,8 @@ const relayAction = async (action: FunctionName, fingerprint: string) => {
   }
 };
 
+// Table columns and actions
+
 const getVerifiedItems = (row: RelayRow) => [
   [
     {
@@ -210,11 +223,13 @@ const handleLockRelay = async (fingerprint: string) => {
   }
 };
 
+// for modal
 const handleLockRemote = async () => {
   if (fingerPrintRegisterError.value || ethAddressError.value) {
     return;
   }
 
+  // check for empty
   if (fingerPrintRegister.value == '' || ethAddress.value == '') {
     toast.remove('invalid-evm-address');
     toast.add({
@@ -299,6 +314,7 @@ const handleUnlockClick = async (fingerprint: string) => {
     const register = useRegistrator();
     try {
       await register?.unlock(fingerprint, BigInt(100 * 1e18));
+      // Refresh the relays
       await userStore.createRelayCache();
     } catch (error) {
     } finally {
@@ -377,7 +393,9 @@ const handleUnlockClick = async (fingerprint: string) => {
   </UModal>
   <div class="-mx-4 sm:-mx-0">
     <UAlert
-      v-if="(allRelaysError as any)?.value || (allRelaysError as any)?.value"
+      v-if="
+        (allRelaysError as any)?.value || (claimableRelaysError as any)?.value
+      "
       class="mb-6"
       icon="i-heroicons-exclamation-triangle"
       description="There was an error retrieving relays. We'll load what we can."
@@ -409,7 +427,6 @@ const handleUnlockClick = async (fingerprint: string) => {
       </div>
       <div class="flex justify-between items-center mt-2">
         <div class="font-semibold">Relay Fingerprint</div>
-        <!-- <div>{{ row.fingerprint }}</div> -->
         <FingerprintDisplay :fingerprint="row.fingerprint" />
       </div>
       <div class="flex justify-between items-center mt-2">
@@ -453,7 +470,16 @@ const handleUnlockClick = async (fingerprint: string) => {
         </div>
       </div>
       <div class="flex justify-between items-center mt-2">
-        <div class="font-semibold">Lock Status</div>
+        <div class="font-semibold flex gap-1 justify-center content-center">
+          Lock Status
+          <Tooltip
+            placement="top"
+            arrow
+            text="Shows the current lock status and amount of locked tokens needed for Registration."
+          >
+            <Icon name="heroicons:exclamation-circle" class="h-4" />
+          </Tooltip>
+        </div>
         <LockStatusColumn
           :is-locked="registratorStore.isRelayLocked(row.fingerprint)"
           :is-hardware="userStore.isHardwareRelay(row.fingerprint)"
@@ -463,6 +489,7 @@ const handleUnlockClick = async (fingerprint: string) => {
       <div class="flex justify-between items-center mt-2">
         <div class="font-semibold">Actions</div>
         <RegistrationActionColumn
+          v-if="currentTab !== 'locked'"
           :row="row"
           @relay-action="relayAction"
           @on-lock-relay="handleLockRelay"
@@ -472,6 +499,64 @@ const handleUnlockClick = async (fingerprint: string) => {
             userStore.isHardwareRelay(row.fingerprint)
           "
         />
+        <UButton
+          v-if="currentTab === 'locked'"
+          :ui="{ base: 'text-sm' }"
+          :class="{
+            'cursor-not-allowed':
+              (!registratorStore.isUnlockable(row.fingerprint) && isHovered) ||
+              isUnlocking,
+          }"
+          icon="i-heroicons-check-circle-solid"
+          size="xl"
+          color="green"
+          variant="outline"
+          label="Unlock"
+          :trailing="false"
+          :disabled="isUnlocking"
+          @click="handleUnlockClick(row.fingerprint)"
+          @mouseover="isHovered = true"
+          @mouseleave="isHovered = false"
+        />
+      </div>
+      <div
+        class="flex justify-between items-center mt-2"
+        v-if="currentTab === 'locked'"
+      >
+        <div class="font-semibold flex gap-1 justify-center content-center">
+          Owner
+          <Popover placement="top" :arrow="false">
+            <template #content>
+              <div class="text-sm font-medium text-cyan-500 mb-3">
+                Ownership Status
+              </div>
+              <div class="text-xs font-normal text-gray-600 dark:text-gray-300">
+                <span class="text-gray-800 dark:text-white">Owner:</span>
+                This relay belongs to you.
+              </div>
+              <div class="text-xs font-normal text-gray-600 dark:text-gray-300">
+                <span class="text-gray-800 dark:text-white">Others:</span>
+                This relay is owned by someone else.
+              </div>
+            </template>
+            <template #trigger>
+              <Icon name="heroicons:information-circle" />
+            </template>
+          </Popover>
+        </div>
+        <UBadge
+          v-if="
+            registratorStore.isRelayOwner(
+              row.fingerprint,
+              userStore.userData.address!
+            )
+          "
+          color="white"
+          variant="solid"
+        >
+          Owner
+        </UBadge>
+        <UBadge v-else color="cyan" variant="outline"> Others </UBadge>
       </div>
     </div>
   </div>

From 3a67c6c3f6d6f9f013e7cc1df0a0d7c8ac95c760 Mon Sep 17 00:00:00 2001
From: MarcoMandar <malicemandar@gmail.com>
Date: Tue, 23 Jul 2024 16:36:50 +0100
Subject: [PATCH 3/3] change border

Signed-off-by: MarcoMandar <malicemandar@gmail.com>
---
 components/DataTableMyRelays/DataTableMyRelaysMobile.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/DataTableMyRelays/DataTableMyRelaysMobile.vue b/components/DataTableMyRelays/DataTableMyRelaysMobile.vue
index d576edd..73408f3 100644
--- a/components/DataTableMyRelays/DataTableMyRelaysMobile.vue
+++ b/components/DataTableMyRelays/DataTableMyRelaysMobile.vue
@@ -407,7 +407,7 @@ const handleUnlockClick = async (fingerprint: string) => {
     <div
       v-for="row in getTableData(currentTab)"
       :key="row.fingerprint"
-      class="mb-4 p-4 border rounded"
+      class="mb-4 p-4 border rounded border-cyan-500 dark:border-cyan-600"
     >
       <div class="flex justify-between items-center">
         <div class="font-semibold">Nickname</div>