Decouple aens claim and preclaim transactions

src/constants/common.ts

@@ -145,6 +145,7 @@ export const STORAGE_KEYS = {
   lastAvailableTokensLoadTime: 'last-available-tokens-load-time',
   fungibleTokenList: 'fungible-token-list',
   fungibleTokenBalances: 'fungible-token-balances',
+  preclaimedNames: 'preclaimed-names',
   permissions: 'permissions',
   appsBrowserHistory: 'apps-browser-history',
 

src/popup/App.vue

@@ -104,8 +104,10 @@ import {
   useMultisigAccounts,
   useNotifications,
   useUi,
+  useTopHeaderData,
 } from '@/composables';
 import { useTransferSendHandler } from '@/composables/transferSendHandler';
+import { useAeNames } from '@/protocols/aeternity/composables/aeNames';
 
 import Header from '@/popup/components/Header.vue';
 import ConnectionStatus from '@/popup/components/ConnectionStatus.vue';
@@ -146,6 +148,8 @@ export default defineComponent({
     const { restoreLanguage } = useLanguages();
     const { restoreTransferSendForm } = useTransferSendHandler();
     const { multisigAccounts } = useMultisigAccounts({ pollingDisabled: true });
+    const { claimPreclaimedNames } = useAeNames({ pollingDisabled: true });
+    const { topBlockHeight } = useTopHeaderData();
 
     const innerElement = ref<HTMLDivElement>();
     const isRouterReady = ref(false);
@@ -245,6 +249,11 @@ export default defineComponent({
       },
     );
 
+    watch(
+      topBlockHeight,
+      claimPreclaimedNames,
+      { immediate: true },
+    );
     initVisibilityListeners();
 
     onBeforeMount(async () => {

src/popup/locales/en-US.json

@@ -235,8 +235,21 @@
       "btnText": "Import Account"
     },
     "name-exist": {
+      "title": "Name registration error",
       "msg": "This name is already registered."
     },
+    "name-already-preclaimed": {
+      "msg": "Claim process for this name is already started."
+    },
+    "name-length": {
+      "msg": "Names on SUPERHERO have to be a minimum of 13 characters."
+    },
+    "incorrect-address": {
+      "msg": "Please make sure that you have entered a valid public address."
+    },
+    "incorrect-amount": {
+      "msg": "Please make sure you entered a valid amount."
+    },
     "insufficient-balance": {
       "msg": "You do not have enough balance for this transaction."
     },

src/popup/pages/MultisigProposalDetails.vue

@@ -478,6 +478,7 @@ export default defineComponent({
                 signTransaction: signingAccount.signTransaction.bind({
                   nodeNetworkId,
                   sign: signingAccount.sign,
+                  unsafeSign: signingAccount.unsafeSign,
                 }),
               },
               fromAccount: chosenAddress as any,

src/popup/pages/Names/Claim.vue

@@ -79,7 +79,6 @@ import {
   defineComponent,
   ref,
   computed,
-  nextTick,
 } from 'vue';
 import {
   AensName,
@@ -110,7 +109,6 @@ import {
   AE_COIN_PRECISION,
   AE_AENS_DOMAIN,
   AE_AENS_NAME_MAX_LENGTH,
-  AE_AENS_NAME_AUCTION_MAX_LENGTH,
 } from '@/protocols/aeternity/config';
 import { useAeNames } from '@/protocols/aeternity/composables/aeNames';
 
@@ -140,13 +138,9 @@ export default defineComponent({
 
     const { activeAccount } = useAccounts();
     const { openDefaultModal } = useModals();
-    const { getAeSdk } = useAeSdk();
+    const { getAeSdk, nodeNetworkId } = useAeSdk();
     const { isLoaderVisible, setLoaderVisible } = useUi();
-    const {
-      setPendingAutoExtendName,
-      updateOwnedNames,
-      updateNamePointer,
-    } = useAeNames();
+    const { addNameToClaimQueue, preclaimedNames } = useAeNames();
 
     const name = ref('');
     const autoExtend = ref(false);
@@ -185,6 +179,17 @@ export default defineComponent({
         setLoaderVisible(false);
         return;
       }
+      if (
+        preclaimedNames.value[nodeNetworkId.value!]
+        && Object.keys(preclaimedNames.value[nodeNetworkId.value!]).includes(fullName.value)
+      ) {
+        setLoaderVisible(false);
+        openDefaultModal({
+          title: t('modals.name-exist.title'),
+          msg: t('modals.name-already-preclaimed.msg'),
+        });
+        return;
+      }
 
       const aeSdk = await getAeSdk();
       const nameObj = new Name(fullName.value, aeSdk.getContext());
@@ -193,45 +198,19 @@ export default defineComponent({
       if (isNameRegistered) {
         setLoaderVisible(false);
         openDefaultModal({
-          title: t('modals.name-exist.msg'),
+          title: t('modals.name-exist.title'),
+          msg: t('modals.name-exist.msg'),
         });
       } else {
-        let claimTxHash;
-
-        try {
-          await nameObj.preclaim();
-          claimTxHash = (await nameObj.claim({ waitMined: false })).hash;
-          if (autoExtend.value) {
-            setPendingAutoExtendName(fullName.value);
-          }
-          await nextTick();
+        const isClaimQueued = await addNameToClaimQueue(
+          fullName.value,
+          activeAccount.value.address,
+          autoExtend.value,
+        );
+        setLoaderVisible(false);
+        if (isClaimQueued) {
+          name.value = '';
           router.push({ name: ROUTE_ACCOUNT_DETAILS_NAMES });
-        } catch (error: any) {
-          let msg = error.message;
-          if (msg.includes('is not enough to execute') || error.statusCode === 404) {
-            msg = t('pages.names.balance-error');
-          }
-          openDefaultModal({
-            icon: 'critical',
-            msg,
-          });
-          return;
-        } finally {
-          setLoaderVisible(false);
-        }
-
-        try {
-          await aeSdk.poll(claimTxHash);
-          if (AE_AENS_NAME_AUCTION_MAX_LENGTH < fullName.value.length) {
-            await updateNamePointer({
-              name: fullName.value,
-              address: activeAccount.value.address,
-            });
-          }
-        } catch (error: any) {
-          openDefaultModal({ msg: error.message });
-        } finally {
-          updateOwnedNames();
         }
       }
     }

src/popup/pages/Names/NamesList.vue

@@ -26,8 +26,9 @@
 import { IonPage, IonContent } from '@ionic/vue';
 import { computed, defineComponent, onUnmounted } from 'vue';
 import { executeAndSetInterval } from '@/utils';
-import { useAccounts, useUi } from '@/composables';
+import { useAccounts, useAeSdk, useUi } from '@/composables';
 import { useAeNames } from '@/protocols/aeternity/composables/aeNames';
+import type { IName } from '@/types';
 
 import NameItem from '../../components/NameItem.vue';
 import RegisterName from '../../components/RegisterName.vue';
@@ -46,11 +47,29 @@ export default defineComponent({
   setup() {
     const { isAppActive } = useUi();
     const { activeAccount } = useAccounts();
-    const { areNamesFetching, ownedNames, updateOwnedNames } = useAeNames();
+    const { nodeNetworkId } = useAeSdk();
+    const {
+      areNamesFetching, ownedNames, preclaimedNames, updateOwnedNames,
+    } = useAeNames();
 
-    const namesForAccount = computed(
-      () => ownedNames.value.filter(({ owner }) => owner === activeAccount.value.address),
-    );
+    const namesForAccount = computed(() => {
+      const ownedNamesForAccount = ownedNames.value
+        .filter(({ owner }) => owner === activeAccount.value.address);
+      const ownedNameSet = new Set(ownedNamesForAccount.map(({ name }) => name));
+      const pendingNames = Object.values(preclaimedNames.value[nodeNetworkId.value!] || {})
+        .filter(({ address }) => address === activeAccount.value.address)
+        .filter(({ name }) => !ownedNameSet.has(name))
+        .map((preclaimedName) => ({
+          ...preclaimedName,
+          owner: preclaimedName.address,
+          pending: true,
+        } as Partial<IName> as IName));
+
+      return [
+        ...pendingNames,
+        ...ownedNamesForAccount,
+      ];
+    });
 
     const id = executeAndSetInterval(() => {
       if (isAppActive.value) {