Get ENS avatar

vue-app/src/api/user.ts

@@ -3,8 +3,9 @@ import { BigNumber, Contract } from 'ethers'
 import { Web3Provider } from '@ethersproject/providers'
 
 import { UserRegistry, ERC20 } from './abi'
-import { factory, ipfsGatewayUrl, provider } from './core'
+import { factory, provider } from './core'
 import { BrightId } from './bright-id'
+import { get3BoxAvatarUrl, getEnsAvatarUrl } from '../utils/accounts'
 
 //TODO: update anywhere this is called to take factory address as a parameter, default to env. variable
 export const LOGIN_MESSAGE = `Welcome to clr.fund!
@@ -30,16 +31,16 @@ export interface User {
 export async function getProfileImageUrl(
   walletAddress: string
 ): Promise<string | null> {
-  const threeBoxProfileUrl = `https://ipfs.3box.io/profile?address=${walletAddress}`
-  let profileImageHash: string
-  try {
-    const response = await fetch(threeBoxProfileUrl)
-    const profile = await response.json()
-    profileImageHash = profile.image[0].contentUrl['/']
-  } catch (error) {
-    return makeBlockie(walletAddress)
-  }
-  return `${ipfsGatewayUrl}/ipfs/${profileImageHash}`
+  // Priority to ENS avatars
+  const ensAvatarUrl: string | null = await getEnsAvatarUrl(walletAddress)
+  if (ensAvatarUrl) return ensAvatarUrl
+
+  // Then to 3Box
+  const threeBoxAvatarUrl: string | null = await get3BoxAvatarUrl(walletAddress)
+  if (threeBoxAvatarUrl) return threeBoxAvatarUrl
+
+  // Blockies as a fallback
+  return makeBlockie(walletAddress)
 }
 
 export async function isVerifiedUser(

vue-app/src/utils/accounts.ts

@@ -1,6 +1,8 @@
 import { ethers } from 'ethers'
 import { mainnetProvider } from '@/api/core'
 import { isAddress } from '@ethersproject/address'
+import axios from 'axios'
+import { ipfsGatewayUrl } from '@/api/core'
 
 export function isSameAddress(address1: string, address2: string): boolean {
   return ethers.utils.getAddress(address1) === ethers.utils.getAddress(address2)
@@ -25,6 +27,52 @@ export async function isValidEthAddress(address: string): Promise<boolean> {
   return !!resolved
 }
 
+export async function getEnsAvatarUrl(address: string): Promise<string | null> {
+  try {
+    const name = await ensLookup(address)
+    if (!name) return null
+    const resolver = await mainnetProvider.getResolver(name)
+    const avatar = await resolver.getText('avatar')
+    const details = avatar.split('/')
+    if (details.length !== 3 || details[0] !== 'eip155:1' || !details[2])
+      return null
+    const [, contractInfo, tokenId] = details
+    const [schema, contractAddress] = contractInfo.split(':')
+    const ABI =
+      schema === 'erc721'
+        ? [
+            'function tokenURI(uint256 tokenId) external view returns (string memory)',
+            'function ownerOf(uint256 tokenId) public view returns (address)',
+          ]
+        : [
+            'function uri(uint256 _id) public view returns (string memory)',
+            'function balanceOf(address account, uint256 id) public view returns (uint256)',
+          ]
+    const contract = new ethers.Contract(contractAddress, ABI, mainnetProvider)
+    const uri =
+      schema === 'erc721'
+        ? await contract.tokenURI(tokenId)
+        : await contract.uri(tokenId)
+    const { data } = await axios.get(uri)
+    return data.image
+  } catch (error) {
+    return null
+  }
+}
+
+export async function get3BoxAvatarUrl(
+  address: string
+): Promise<string | null> {
+  const threeBoxProfileUrl = `https://ipfs.3box.io/profile?address=${address}`
+  try {
+    const { data } = await axios.get(threeBoxProfileUrl)
+    const profileImageHash = data.image[0].contentUrl['/']
+    return `${ipfsGatewayUrl}/ipfs/${profileImageHash}`
+  } catch (error) {
+    return null
+  }
+}
+
 export function renderAddressOrHash(
   address: string,
   digitsToShow?: number