From a3143905ff75696bfa4376439c20d2fdf6252c9b Mon Sep 17 00:00:00 2001
From: Erno <erno@ivan.academy>
Date: Wed, 9 Feb 2022 17:13:56 +0000
Subject: [PATCH] feat: resolve ens

---
 README.md                               | 33 ++++++++++++++++++
 src/hooks/index.ts                      |  1 +
 src/hooks/utils/index.ts                |  1 +
 src/hooks/utils/useEns/index.ts         |  2 ++
 src/hooks/utils/useEns/useEnsAddress.ts | 27 +++++++++++++++
 src/hooks/utils/useEns/useEnsName.ts    | 45 +++++++++++++++++++++++++
 6 files changed, 109 insertions(+)
 create mode 100644 src/hooks/utils/index.ts
 create mode 100644 src/hooks/utils/useEns/index.ts
 create mode 100644 src/hooks/utils/useEns/useEnsAddress.ts
 create mode 100644 src/hooks/utils/useEns/useEnsName.ts

diff --git a/README.md b/README.md
index d78e2b2..1b95de3 100644
--- a/README.md
+++ b/README.md
@@ -138,6 +138,10 @@ function App() {
   - [`Web3`](#web3)
     - [Enable web3 via metamask](#enable-web3-via-metamask)
     - [Enable web3 via Walletconnect](#enable-web3-via-walletconnect)
+  - [Utils](#utils)
+    - [Resolve/Lookup ens names](#resolvelookup-ens-names)
+      - [`useEnsName`](#useensname)
+      - [`useEnsAddress`](#useensaddress)
   - [Components](#components)
 - [Handling responses](#handling-responses)
 - [Webpack v5 support](#webpack-v5-support)
@@ -1595,6 +1599,35 @@ const EnableWeb3 = ({user, score}) => {
 }
 ```
 
+## Utils
+
+### Resolve/Lookup ens names
+If you want to resolve/lookup ENS names, then you can use `useEnsName` or `useEnsAddress`.
+
+#### `useEnsName`
+Resolve the ENS name and lookup the address, avatar, email and url details (if they are set)
+
+*example:*
+```javascript
+  const {
+    address,
+    avatar,
+    email,
+    url,
+    isLoading,
+    error
+  } = useEnsName("ricmoo.eth");
+
+```
+
+#### `useEnsAddress`
+Lookup if an ENS name is registered for the address
+*example:*
+```javascript
+  const { name, isLoading, error } = useEnsAddress("0x5555763613a12D8F3e73be831DFf8598089d3dCa");
+```
+
+
 ## Components
 If you want to support Moralis, you can use the `ByMoralis` component, to render our logo 🙏:
 
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index e11c5b1..c061fe1 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from "./core";
 export * from "./plugins";
 export * from "./web3ApiWrappers";
+export * from "./utils";
diff --git a/src/hooks/utils/index.ts b/src/hooks/utils/index.ts
new file mode 100644
index 0000000..6ec338b
--- /dev/null
+++ b/src/hooks/utils/index.ts
@@ -0,0 +1 @@
+export * from "./useEns";
diff --git a/src/hooks/utils/useEns/index.ts b/src/hooks/utils/useEns/index.ts
new file mode 100644
index 0000000..4632038
--- /dev/null
+++ b/src/hooks/utils/useEns/index.ts
@@ -0,0 +1,2 @@
+export * from "./useEnsAddress";
+export * from "./useEnsName";
diff --git a/src/hooks/utils/useEns/useEnsAddress.ts b/src/hooks/utils/useEns/useEnsAddress.ts
new file mode 100644
index 0000000..e18f47c
--- /dev/null
+++ b/src/hooks/utils/useEns/useEnsAddress.ts
@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+import { useMoralis } from "../../core/useMoralis";
+
+export const useEnsAddress = (ensAddress: string) => {
+  const { web3 } = useMoralis();
+  const [resolved, setResolved] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (web3) {
+      setIsLoading(true);
+      setError(null);
+      web3
+        .lookupAddress(ensAddress)
+        .then((result) => {
+          setResolved(result);
+        })
+        .catch(setError)
+        .finally(() => {
+          setIsLoading(false);
+        });
+    }
+  }, [ensAddress, web3]);
+
+  return { name: resolved, isLoading, error };
+};
diff --git a/src/hooks/utils/useEns/useEnsName.ts b/src/hooks/utils/useEns/useEnsName.ts
new file mode 100644
index 0000000..9263266
--- /dev/null
+++ b/src/hooks/utils/useEns/useEnsName.ts
@@ -0,0 +1,45 @@
+import { useState, useEffect } from "react";
+import { useMoralis } from "../../core/useMoralis";
+
+export const useEnsName = (ensName: string) => {
+  const { web3 } = useMoralis();
+  const [address, setAddress] = useState<string | null>(null);
+  const [avatar, setAvatar] = useState<string | null>(null);
+  const [url, setUrl] = useState<string | null>(null);
+  const [email, setEmail] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (web3) {
+      setIsLoading(true);
+      setError(null);
+      web3
+        .getResolver(ensName)
+        .then((resolver) => {
+          if (!resolver) {
+            return;
+          }
+          Promise.all([
+            resolver.getAddress().catch(() => null),
+            resolver.getAvatar().catch(() => null),
+            resolver.getText("email").catch(() => null),
+            resolver.getText("url").catch(() => null),
+          ]).then(
+            ([resolvedAddress, resolvedAvatar, resolvedEmail, resolvedUrl]) => {
+              setAddress(resolvedAddress);
+              setAvatar(resolvedAvatar?.url ?? null);
+              setEmail(resolvedEmail);
+              setUrl(resolvedUrl);
+            },
+          );
+        })
+        .catch(setError)
+        .finally(() => {
+          setIsLoading(false);
+        });
+    }
+  }, [ensName, web3]);
+
+  return { address, avatar, email, url, isLoading, error };
+};