Merge pull request #180 from enkryptcom/devop/cleanup-ens-ud

Devop: tweak ENS and UD

packages/extension/src/libs/name-resolver/index.ts

@@ -0,0 +1,23 @@
+import NameResolver, { CoinType } from "@enkryptcom/name-resolution";
+class GenericNameResolver {
+  nameResolver: NameResolver;
+
+  constructor() {
+    this.nameResolver = new NameResolver({
+      ens: { node: "https://nodes.mewapi.io/rpc/eth" },
+    });
+  }
+
+  async resolveName(name: string, coins: CoinType[]): Promise<string | null> {
+    let response: string | null = null;
+    for (const coin of coins) {
+      response = await this.nameResolver
+        .resolveAddress(name, coin)
+        .catch(() => null);
+      if (response) return response;
+    }
+    return response;
+  }
+}
+
+export { CoinType, GenericNameResolver };

packages/extension/src/providers/ethereum/ui/send-transaction/index.vue

@@ -129,6 +129,7 @@
 <script setup lang="ts">
 import { ref, onMounted, PropType, computed, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { debounce } from "lodash";
 import SendHeader from "./components/send-header.vue";
 import SendAddressInput from "./components/send-address-input.vue";
 import SendFromContactsList from "./components/send-from-contacts-list.vue";
@@ -164,7 +165,7 @@ import getUiPath from "@/libs/utils/get-ui-path";
 import Browser from "webextension-polyfill";
 import { ProviderName } from "@/types/provider";
 import PublicKeyRing from "@/libs/keyring/public-keyring";
-import NameResolver, { CoinType } from "@enkryptcom/name-resolution";
+import { GenericNameResolver, CoinType } from "@/libs/name-resolver";
 
 const props = defineProps({
   network: {
@@ -188,10 +189,8 @@ const loadingAsset = new Erc20Token({
 
 const route = useRoute();
 const router = useRouter();
-const nameResolver = new NameResolver({
-  ens: { node: "https://nodes.mewapi.io/rpc/eth" },
-});
 
+const nameResolver = new GenericNameResolver();
 const addressInputTo = ref();
 const selected: string = route.params.id as string;
 const accountAssets = ref<Erc20Token[]>([]);
@@ -219,8 +218,6 @@ const addressFrom = ref<string>(
 const addressTo = ref<string>("");
 const isLoadingAssets = ref(true);
 
-const resolveTimeoutId = ref<ReturnType<typeof setTimeout> | null>(null);
-
 const nativeBalance = computed(() => {
   const accountIndex = props.accountInfo.activeAccounts.findIndex(
     (acc) => acc.address === addressFrom.value
@@ -448,24 +445,16 @@ const inputAddressFrom = (text: string) => {
 };
 
 const inputAddressTo = async (text: string) => {
-  if (resolveTimeoutId.value) {
-    clearTimeout(resolveTimeoutId.value);
-    resolveTimeoutId.value = null;
-  }
-
-  resolveTimeoutId.value = setTimeout(async () => {
-    // Get the resolved address for the current network, or default to ETH
-    const resolved =
-      (await nameResolver
-        .resolveAddress(text, props.network.name as CoinType)
-        .catch(() => null)) ||
-      (await nameResolver.resolveAddress(text, "ETH").catch(() => null));
-
-    if (resolved) {
-      addressTo.value = resolved;
-    }
+  const debounceResolve = debounce(() => {
+    nameResolver
+      .resolveName(text, [props.network.name as CoinType, "ETH"])
+      .then((resolved) => {
+        if (resolved) {
+          addressTo.value = resolved;
+        }
+      });
   }, 500);
-
+  debounceResolve();
   addressTo.value = text;
 };
 

packages/extension/src/providers/polkadot/ui/send-transaction/index.vue

@@ -95,6 +95,7 @@
 <script setup lang="ts">
 import { computed, onMounted, PropType, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { debounce } from "lodash";
 import CloseIcon from "@action/icons/common/close-icon.vue";
 import SendAddressInput from "./components/send-address-input.vue";
 import SendContactsList from "./components/send-contacts-list.vue";
@@ -124,7 +125,7 @@ import getUiPath from "@/libs/utils/get-ui-path";
 import { ProviderName } from "@/types/provider";
 import PublicKeyRing from "@/libs/keyring/public-keyring";
 import { polkadotEncodeAddress } from "@enkryptcom/utils";
-import NameResolver, { CoinType } from "@enkryptcom/name-resolution";
+import { GenericNameResolver, CoinType } from "@/libs/name-resolver";
 
 const props = defineProps({
   network: {
@@ -139,9 +140,7 @@ const props = defineProps({
 
 const route = useRoute();
 const router = useRouter();
-const nameResolver = new NameResolver({
-  ens: { node: "https://nodes.mewapi.io/rpc/eth" },
-});
+const nameResolver = new GenericNameResolver();
 
 const addressInputTo = ref();
 const addressInputFrom = ref();
@@ -315,25 +314,16 @@ const inputAddressFrom = (text: string) => {
 };
 
 const inputAddressTo = (text: string) => {
-  if (resolveTimeoutId.value) {
-    clearTimeout(resolveTimeoutId.value);
-    resolveTimeoutId.value = null;
-  }
-
-  resolveTimeoutId.value = setTimeout(async () => {
-    // Get the resolved address for the current network, then try for DOT, then KSM
-    const resolved =
-      (await nameResolver
-        .resolveAddress(text, props.network.name as CoinType)
-        .catch(() => null)) ||
-      (await nameResolver.resolveAddress(text, "DOT").catch(() => null)) ||
-      (await nameResolver.resolveAddress(text, "KSM").catch(() => null));
-
-    if (resolved) {
-      addressTo.value = resolved;
-    }
+  const debounceResolve = debounce(() => {
+    nameResolver
+      .resolveName(text, [props.network.name as CoinType, "DOT", "KSM"])
+      .then((resolved) => {
+        if (resolved) {
+          addressTo.value = resolved;
+        }
+      });
   }, 500);
-
+  debounceResolve();
   addressTo.value = text;
 };