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

Leggo/phase 1/dev

components/DataTableMyRelays/DataTableMyRelays.vue

@@ -40,11 +40,12 @@ const isHovered = ref(false);
 const isUnlocking = ref(false);
 
 const { allRelays, claimableRelays } = storeToRefs(userStore);
-const { address } = useAccount({ config });
+const { address } = useAccount({ config } as any);
 const registerModalOpen = ref(false);
 
 onMounted(() => {
   // refresh the locked relays every minute
+
   setInterval(() => {
     if (registrator) {
       if (userStore.userData.address) {
@@ -56,7 +57,7 @@ onMounted(() => {
 
 const unwatch = watchAccount(config, {
   onChange(account) {
-    // account change
+    // account changed
     userStore.createRelayCache();
   },
 });
@@ -106,6 +107,7 @@ 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
@@ -436,6 +438,9 @@ const handleUnlockClick = async (fingerprint: string) => {
           </UDropdown>
         </div>
       </template>
+      <template #fingerprint-data="{ row }">
+        <span class="monospace">{{ row.fingerprint }}</span>
+      </template>
       <template #nickname-data="{ row }">
         {{ userStore?.nickNames?.[row.fingerprint] || '-' }}
       </template>
@@ -505,6 +510,7 @@ const handleUnlockClick = async (fingerprint: string) => {
           :is-locked="registratorStore.isRelayLocked(row.fingerprint)"
           :is-hardware="userStore.isHardwareRelay(row.fingerprint)"
           :is-verified="row.status === 'verified'"
+          :is-loading="registratorStore.loading"
         />
       </template>
 
@@ -542,6 +548,7 @@ const handleUnlockClick = async (fingerprint: string) => {
             row.status === 'verified' ||
             userStore.isHardwareRelay(row.fingerprint)
           "
+          :is-loading="registratorStore.loading"
         />
       </template>
       <template #unlock-data="{ row }">
@@ -604,6 +611,10 @@ const handleUnlockClick = async (fingerprint: string) => {
   cursor: not-allowed;
 }
 
+.monospace {
+  font-family: 'Courier New', Courier, monospace;
+}
+
 // .cursor-pointer {
 //   cursor: pointer;
 // }

components/DataTableMyRelays/DataTableMyRelaysMobile.vue

@@ -40,7 +40,7 @@ const isHovered = ref(false);
 const isUnlocking = ref(false);
 
 const { allRelays, claimableRelays } = storeToRefs(userStore);
-const { address } = useAccount({ config });
+const { address } = useAccount({ config } as any);
 const registerModalOpen = ref(false);
 
 onMounted(() => {
@@ -484,6 +484,7 @@ const handleUnlockClick = async (fingerprint: string) => {
           :is-locked="registratorStore.isRelayLocked(row.fingerprint)"
           :is-hardware="userStore.isHardwareRelay(row.fingerprint)"
           :is-verified="row.status === 'verified'"
+          :is-loading="registratorStore.loading"
         />
       </div>
       <div class="flex justify-between items-center mt-2">
@@ -498,6 +499,7 @@ const handleUnlockClick = async (fingerprint: string) => {
             row.status === 'verified' ||
             userStore.isHardwareRelay(row.fingerprint)
           "
+          :is-loading="registratorStore.loading"
         />
         <UButton
           v-if="currentTab === 'locked'"

components/DataTableMyRelays/columns/LockStatusColumn.vue

@@ -3,21 +3,26 @@ defineProps<{
   isLocked?: boolean;
   isHardware?: boolean;
   isVerified?: boolean;
+  isLoading?: boolean;
 }>();
 </script>
-
 <template>
-  <div v-if="isLocked" class="text-green-300">
-    <Icon name="material-symbols:lock" />
-    Locked
-  </div>
-  <div v-else-if="isHardware" class="text-athena-50">
-    <Icon name="material-symbols:memory" />
-    Hardware Relay
-  </div>
-  <div v-else-if="isVerified" class="text-athena-50">-</div>
-  <div v-else class="text-orange-300">
-    <Icon name="material-symbols:lock" />
-    Lock Required
-  </div>
+  <template v-if="isLoading">
+    <USkeleton class="w-[15rem] h-10" />
+  </template>
+  <template v-else>
+    <div v-if="isLocked" class="text-green-300">
+      <Icon name="material-symbols:lock" />
+      Locked
+    </div>
+    <div v-else-if="isHardware" class="text-athena-50">
+      <Icon name="material-symbols:memory" />
+      Hardware Relay
+    </div>
+    <div v-else-if="isVerified" class="text-athena-50">-</div>
+    <div v-else class="text-orange-300">
+      <Icon name="material-symbols:lock" />
+      Lock Required
+    </div>
+  </template>
 </template>

components/DataTableMyRelays/columns/RegistrationActionColumn.vue

@@ -9,46 +9,83 @@ const emit = defineEmits<{
 const props = defineProps<{
   row: RelayRow | undefined;
   isLocked: boolean;
+  isLoading?: boolean;
 }>();
+
+const userStore = useUserStore();
+var hasRegistrationCredit: boolean | undefined;
+
+async function fetchRegistrationCredit() {
+  if (props?.row) {
+    hasRegistrationCredit = await userStore.hasRegistrationCredit(
+      props?.row?.fingerprint
+    );
+  }
+}
+
+fetchRegistrationCredit();
 </script>
 
 <template>
-  <div class="max-w-32" v-if="props.row">
-    <UButton
-      v-if="!props.isLocked"
-      size="xl"
-      color="orange"
-      variant="outline"
-      label="Claimed"
-      class="flex-col text-xs"
-      @click="emit('onLockRelay', props.row.fingerprint)"
-      :disabled="row?.isWorking"
-      block
-    >
-      <div class="text-sm font-medium">Lock</div>
-      <div>Lock 100 $ANYONE</div>
-    </UButton>
-    <UButton
-      v-else-if="props.row.status === 'claimable' && props.isLocked"
-      size="xl"
-      color="green"
-      variant="solid"
-      label="Claim Now"
-      @click="emit('relayAction', 'claim', props.row.fingerprint)"
-      :trailing="false"
-      :disabled="row?.isWorking"
-      block
-    />
-    <UButton
-      v-else-if="props.row.status === 'verified' || props.isLocked"
-      icon="i-heroicons-check-circle-solid"
-      size="xl"
-      color="green"
-      variant="outline"
-      label="Claimed"
-      :disabled="true"
-      :trailing="false"
-      block
-    />
-  </div>
+  <template v-if="isLoading">
+    <USkeleton class="w-[15rem] h-10" />
+  </template>
+  <template v-else>
+    <div class="max-w-32" v-if="props.row">
+      <UButton
+        v-if="!props.isLocked"
+        size="xl"
+        color="orange"
+        variant="outline"
+        label="Claimed"
+        class="flex-col text-xs"
+        @click="emit('onLockRelay', props.row.fingerprint)"
+        :disabled="row?.isWorking"
+        block
+      >
+        <div class="text-sm font-medium">Lock</div>
+        <div>Lock 100 $ANYONE</div>
+      </UButton>
+      <UButton
+        v-else-if="
+          props.row.status === 'claimable' &&
+          props.isLocked &&
+          hasRegistrationCredit
+        "
+        size="xl"
+        color="green"
+        variant="solid"
+        label="Claim Now"
+        @click="emit('relayAction', 'claim', props.row.fingerprint)"
+        :trailing="false"
+        :disabled="row?.isWorking"
+        block
+      />
+      <UButton
+        v-else-if="
+          props.row.status === 'claimable' &&
+          props.isLocked &&
+          !hasRegistrationCredit
+        "
+        size="xl"
+        color="green"
+        variant="outline"
+        label="No Credit"
+        :trailing="false"
+        :disabled="true"
+        block
+      />
+      <UButton
+        v-else-if="props.row.status === 'verified' || props.isLocked"
+        icon="i-heroicons-check-circle-solid"
+        size="xl"
+        color="green"
+        variant="outline"
+        label="Claimed"
+        :disabled="true"
+        :trailing="false"
+        block
+      />
+    </div>
+  </template>
 </template>

components/UserBalance.vue

@@ -1,16 +1,14 @@
 <template>
   <ClientOnly>
     <div class="inline-flex items-baseline gap-2 w-[20rem]">
-      <template v-if="balanceUsdPending || balanceUsdPending">
+      <template v-if="balancePending || balanceUsdPending">
         <USkeleton class="w-[15rem] h-10" />
       </template>
       <template v-else>
         <span class="text-4xl font-bold" v-if="isConnected">
           {{ parseFloat(tokenBalance.formatted).toFixed(2) }}
         </span>
-        <span class="text-4xl font-bold" v-if="!isConnected">
-          --
-        </span>
+        <span class="text-4xl font-bold" v-if="!isConnected"> -- </span>
         <Ticker v-if="showTicker" />
         <slot></slot>
       </template>
@@ -20,7 +18,7 @@
       <span class="text-red-500 ml-1 text-xs">Error retrieving balance</span>
     </p>
     <template v-else>
-      <template v-if="balanceUsdPending || balanceUsdPending">
+      <template v-if="balancePending || balanceUsdPending">
         <USkeleton class="w-[6rem] h-4" />
       </template>
       <template v-else>
@@ -31,39 +29,51 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useAccount } from '@wagmi/vue';
 import { config } from '@/config/wagmi.config';
 import Ticker from './ui-kit/Ticker.vue';
 import { useUserStore } from '@/stores/useUserStore';
+import { watchAccount } from '@wagmi/core';
 
 const userStore = useUserStore();
 const { address, tokenBalance, tokenBalanceUsd } = storeToRefs(userStore);
-const { isConnected } = useAccount({ config });
+const { isConnected } = useAccount({ config } as any);
 
-const balancePending = ref(true);
-const balanceUsdPending = ref(true);
+const balancePending = ref(false);
+const balanceUsdPending = ref(false);
 const balanceError = ref(null as any);
 const balanceUsdError = ref(null as any);
 
-const fetchBalances = async () => {
+const fetchBalances = async (forceRefresh = false) => {
   try {
     balancePending.value = true;
-    await userStore.getTokenBalance();
+
+    await userStore.getTokenBalance(forceRefresh);
     balancePending.value = false;
   } catch (error) {
     balanceError.value = error;
   }
 
   try {
     balanceUsdPending.value = true;
-    await userStore.getUsdTokenBalance();
+    await userStore.getUsdTokenBalance(forceRefresh);
     balanceUsdPending.value = false;
   } catch (error) {
     balanceUsdError.value = error;
   }
 };
 
+watch(
+  () => userStore.userData.address,
+  async (newAddress?: string) => {
+    if (newAddress) {
+      console.log('new address', newAddress);
+      fetchBalances(true);
+    }
+  }
+);
+
 onMounted(() => {
   fetchBalances();
   setInterval(fetchBalances, 1000 * 60 * 5);
@@ -72,4 +82,4 @@ onMounted(() => {
 defineProps<{
   showTicker?: boolean;
 }>();
-</script>
+</script>

composables/facilitator/index.ts

@@ -244,6 +244,7 @@ export class Facilitator {
       useFacilitatorStore().alocatedTokens = allocatedTokens.toString();
       useFacilitatorStore().availableBudget = availableBudget.toString();
       useFacilitatorStore().usedBudget = usedBudget.toString();
+      useFacilitatorStore().setInitialized(true);
 
       this.logger.timeEnd();
       this.logger.info('Facilitator refreshed', {

composables/registrator/index.ts

@@ -103,12 +103,17 @@ export class Registrator {
     await auth.getUsdTokenBalance();
 
     this.setRefreshing(false);
+    useRegistratorStore().setInitialized(true);
+
     this.logger.info('Registrator refreshed', {
       currentLockSize: currentLockSize ? currentLockSize.toString() : null,
     });
   }
 
-  async getLokedRelaysTokens(address: string): Promise<LokedRelaysType> {
+  async getLokedRelaysTokens(
+    address: string,
+    initialized?: boolean
+  ): Promise<LokedRelaysType> {
     if (!this.contract) {
       throw new Error(ERRORS.NOT_INITIALIZED);
     }
@@ -119,6 +124,9 @@ export class Registrator {
       data: LokedRelaysResponse;
     };
 
+    if (initialized) {
+      useRegistratorStore().setLoading(true);
+    }
     let totalLockedTokens = 0n;
     const lokedRelays = lokedRelaysReponse.data.reduce((acc, item) => {
       if (item[3]) {
@@ -141,6 +149,7 @@ export class Registrator {
       useRegistratorStore().totalLockedTokens = totalLockedTokens;
       useRegistratorStore().blockNumber = currentBlockNumber;
     }
+    useRegistratorStore().setLoading(false);
 
     return lokedRelays;
   }