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

Merge for extra functionality and update addresses

components/DataTableMyRelays/DataTableMyRelays.vue

@@ -18,6 +18,7 @@ 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';
 
 const toast = useToast();
 const userStore = useUserStore();
@@ -28,6 +29,7 @@ const registratorStore = useRegistratorStore();
 const { allRelays, claimableRelays } = storeToRefs(userStore);
 const { address } = useAccount({ config});
 const currentTab = ref<RelayTabType>('all');
+const registerModalOpen = ref(false);
 
 // Fetching and refreshing the relay data from Warp - stored in Pinia user store
 const {
@@ -49,6 +51,11 @@ const {
   { watch: [address] }
 );
 
+const ethAddress = ref<string>('');
+const ethAddressError = ref<string | null>(null);
+const fingerPrintRegister = ref<string>('');
+const fingerPrintRegisterError = ref<string | null>(null);
+
 if (claimableRelaysError.value?.cause?.message == "rate limited" || verifiedRelaysError.value?.cause?.message == "rate limited") {
   toast.add({
       id: "claimable-relays-error",
@@ -153,6 +160,10 @@ const getVerifiedItems = (row: RelayRow) => [
   ],
 ];
 
+const rules = {
+  required: (value: string) => !!value || 'Required',
+};
+
 const handleTabChange = (key: string) => {
   currentTab.value = key as RelayTabType;
 };
@@ -166,7 +177,7 @@ const handleLockRelay = async (fingerprint: string) => {
 
   try {
     const register = useRegistrator();
-    await register?.lock(fingerprint);
+    await register?.lock(fingerprint, "");
 
     selectedRow!.class = '';
     selectedRow!.isWorking = false;
@@ -176,6 +187,45 @@ 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({
+      id: "invalid-evm-address",
+      icon: 'i-heroicons-x-circle',
+      color: 'amber',
+      title: 'Error',
+      description: `Please fill in all fields`,
+    });
+    return;
+  }
+
+  console.log(ethers.isAddress(ethAddress.value));
+  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();
+    await register?.lock(fingerPrintRegister.value, ethAddress.value);
+  } catch (error: any) {
+  }
+}
+
 const filterUniqueRelays = (relays: RelayRow[]) => {
   const seen = new Set();
   return relays.filter((relay) => {
@@ -224,6 +274,42 @@ const handleUnlockClick = (fingerprint: string) => {
 </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="verifiedRelaysError?.value || claimableRelaysError?.value"
@@ -235,7 +321,17 @@ const handleUnlockClick = (fingerprint: string) => {
       variant="subtle"
     />
 
-    <Tabs :tabs="TABS" @onChange="handleTabChange" />
+    <div class="md:flex">
+      <Tabs :tabs="TABS" @onChange="handleTabChange" />
+      <div class="flex justify-center">
+        <UButton @click="registerModalOpen = true" v-if="currentTab === 'locked'"
+        color="green"
+        variant="outline"
+        label="Register Relay"
+        class="mb-[1.7rem]"
+        />
+      </div>
+    </div>
 
     <UTable
       :loading="verifiedPending || claimablePending"